diff --git a/apps/mobile/.vscode/settings.json b/apps/mobile/.vscode/settings.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/apps/mobile/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/apps/mobile/App.js b/apps/mobile/App.js
index de7fcb507..4263ed49e 100644
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import Orientation from 'react-native-orientation';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import AppLoader from './src/components/AppLoader';
+import Launcher from './src/components/launcher';
 import { RootView } from './src/navigation/RootView';
 import { useTracked } from './src/provider';
 import { initialize, useSettingStore, useUserStore } from './src/provider/stores';
@@ -10,11 +10,10 @@ import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from './src/services/E
 import Notifications from './src/services/Notifications';
 import SettingsService from './src/services/SettingsService';
 import { TipManager } from './src/services/tip-manager';
-import { Tracker } from './src/utils';
 import { db } from './src/utils/database';
-import { eDispatchAction } from './src/utils/Events';
-import { MMKV } from './src/utils/mmkv';
-import { useAppEvents } from './src/utils/use-app-events';
+import { eDispatchAction } from './src/utils/events';
+import { useAppEvents } from './src/utils/hooks/use-app-events';
+import { MMKV } from './src/utils/database/mmkv';
 
 let databaseHasLoaded = false;
 
@@ -78,9 +77,6 @@ const App = () => {
         await TipManager.init();
         await loadDatabase();
         useUserStore.getState().setUser(await db.user.getUser());
-        if (SettingsService.get().telemetry) {
-          Tracker.record('3c6890ce-8410-49d5-8831-15fb2eb28a21');
-        }
       } catch (e) {
       } finally {
         databaseHasLoaded = true;
@@ -103,7 +99,7 @@ const App = () => {
   return (
     <SafeAreaProvider>
       <RootView />
-      <AppLoader onLoad={loadMainApp} />
+      <Launcher onLoad={loadMainApp} />
     </SafeAreaProvider>
   );
 };
diff --git a/apps/mobile/share/index.js b/apps/mobile/share/index.js
index 5826465d8..a7d86a336 100644
--- a/apps/mobile/share/index.js
+++ b/apps/mobile/share/index.js
@@ -28,8 +28,8 @@ import isURL from 'validator/lib/isURL';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../src/services/EventManager';
 import { getElevation } from '../src/utils';
 import { db } from '../src/utils/database';
-import Storage from '../src/utils/storage';
-import { sleep } from '../src/utils/TimeUtils';
+import Storage from '../src/utils/database/storage';
+import { sleep } from '../src/utils/time';
 import { Search } from './search';
 import { useShareStore } from './store';
 
diff --git a/apps/mobile/share/quick-note.js b/apps/mobile/share/quick-note.js
index a2262215b..f47762ed2 100644
--- a/apps/mobile/share/quick-note.js
+++ b/apps/mobile/share/quick-note.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Appearance, SafeAreaView } from 'react-native';
 import RNBootSplash from 'react-native-bootsplash';
-import { COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../src/utils/Colors';
+import { COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../src/utils/color-scheme';
 import NotesnookShare from './index';
 
 export default class QuickNoteIOS extends Component {
diff --git a/apps/mobile/share/store.js b/apps/mobile/share/store.js
index 1c9d13499..3de7b6525 100644
--- a/apps/mobile/share/store.js
+++ b/apps/mobile/share/store.js
@@ -1,7 +1,7 @@
 import { Appearance } from 'react-native';
 import create from 'zustand';
-import { ACCENT, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT, setAccentColor } from '../src/utils/Colors';
-import { MMKV } from '../src/utils/mmkv';
+import { ACCENT, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../src/utils/color-scheme';
+import { MMKV } from '../src/utils/database/mmkv';
 
 export const useShareStore = create((set, get) => ({
   colors: Appearance.getColorScheme() === 'dark' ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,
diff --git a/apps/mobile/src/components/ActionIcon/index.js b/apps/mobile/src/components/ActionIcon/index.js
deleted file mode 100644
index d429aa2eb..000000000
--- a/apps/mobile/src/components/ActionIcon/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { PressableButton } from '../PressableButton';
-import { SIZE } from '../../utils/SizeUtils';
-import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils';
-import { showTooltip, TOOLTIP_POSITIONS } from '../../utils';
-
-export const ActionIcon = ({
-  onPress,
-  name,
-  color,
-  customStyle,
-  size = SIZE.xxl,
-  iconStyle = {},
-  left = 10,
-  right = 10,
-  top = 30,
-  bottom = 10,
-  testID,
-  disabled,
-  onLongPress,
-  tooltipText,
-  type = 'gray',
-  fwdRef,
-  tooltipPosition = TOOLTIP_POSITIONS.TOP
-}) => {
-  const [state, dispatch] = useTracked();
-  const { colors } = state;
-
-  return (
-    <PressableButton
-      testID={testID}
-      fwdRef={fwdRef}
-      onPress={onPress}
-      hitSlop={{ top: top, left: left, right: right, bottom: bottom }}
-      onLongPress={event => {
-        if (onLongPress) {
-          onLongPress();
-          return;
-        }
-        if (tooltipText) {
-          showTooltip(event, tooltipText, tooltipPosition);
-        }
-      }}
-      disabled={disabled}
-      type={type}
-      customStyle={{
-        width: 40,
-        height: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 100,
-        ...customStyle
-      }}
-    >
-      <Icon
-        name={name}
-        style={iconStyle}
-        color={disabled ? RGB_Linear_Shade(-0.05, hexToRGBA(colors.nav)) : color}
-        size={size}
-      />
-    </PressableButton>
-  );
-};
diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js
index 84aa49b63..d80146c73 100644
--- a/apps/mobile/src/components/AddNotebookDialog/index.js
+++ b/apps/mobile/src/components/AddNotebookDialog/index.js
@@ -7,17 +7,17 @@ import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseAddNotebookDialog, eOpenAddNotebookDialog } from '../../utils/Events';
-import { ph, pv, SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
+import { eCloseAddNotebookDialog, eOpenAddNotebookDialog } from '../../utils/events';
+import { ph, pv, SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
 import { MoveNotes } from '../MoveNoteDialog/movenote';
-import Seperator from '../Seperator';
-import SheetWrapper from '../Sheet';
-import { Toast } from '../Toast';
+import Seperator from '../ui/seperator';
+import SheetWrapper from '../ui/sheet';
+import { Toast } from '../toast';
 
 let refs = [];
 
@@ -477,7 +477,7 @@ const TopicItem = ({ item, index, colors, onPress, onDelete }) => {
           justifyContent: 'flex-end'
         }}
       >
-        <ActionIcon
+        <IconButton
           onPress={() => {
             onPress(item, index);
           }}
@@ -485,7 +485,7 @@ const TopicItem = ({ item, index, colors, onPress, onDelete }) => {
           size={SIZE.lg - 5}
           color={colors.icon}
         />
-        <ActionIcon
+        <IconButton
           onPress={() => {
             onDelete(index);
           }}
diff --git a/apps/mobile/src/components/AddTopicDialog/index.js b/apps/mobile/src/components/AddTopicDialog/index.js
index bedfe4777..6e7662903 100644
--- a/apps/mobile/src/components/AddTopicDialog/index.js
+++ b/apps/mobile/src/components/AddTopicDialog/index.js
@@ -5,15 +5,15 @@ import { useMenuStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseAddTopicDialog, eOpenAddTopicDialog } from '../../utils/Events';
-import { sleep } from '../../utils/TimeUtils';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
-import DialogContainer from '../Dialog/dialog-container';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
+import { eCloseAddTopicDialog, eOpenAddTopicDialog } from '../../utils/events';
+import { sleep } from '../../utils/time';
+import BaseDialog from '../dialog/base-dialog';
+import DialogButtons from '../dialog/dialog-buttons';
+import DialogContainer from '../dialog/dialog-container';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {
diff --git a/apps/mobile/src/components/Announcements/announcement.js b/apps/mobile/src/components/Announcements/announcement.js
index 9850de779..29a2c408e 100644
--- a/apps/mobile/src/components/Announcements/announcement.js
+++ b/apps/mobile/src/components/Announcements/announcement.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, View } from 'react-native';
 import { useTracked } from '../../provider';
 import { useMessageStore, useSelectionStore } from '../../provider/stores';
-import { Button } from '../Button';
+import { Button } from '../ui/button';
 import { allowedOnPlatform, renderItem } from './functions';
 
 export const Announcement = ({ color }) => {
diff --git a/apps/mobile/src/components/Announcements/body.js b/apps/mobile/src/components/Announcements/body.js
index 1941527b8..ea2a4b1e0 100644
--- a/apps/mobile/src/components/Announcements/body.js
+++ b/apps/mobile/src/components/Announcements/body.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import Paragraph from '../Typography/Paragraph';
+import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 
 export const Body = ({ text, style = {} }) => {
diff --git a/apps/mobile/src/components/Announcements/cta.js b/apps/mobile/src/components/Announcements/cta.js
index 3e7dfa0fa..049155c65 100644
--- a/apps/mobile/src/components/Announcements/cta.js
+++ b/apps/mobile/src/components/Announcements/cta.js
@@ -2,14 +2,14 @@ import React from 'react';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet } from '../../services/EventManager';
-import { eCloseAnnouncementDialog } from '../../utils/Events';
+import { eCloseAnnouncementDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import SettingsBackupAndRestore from '../../views/Settings/backup-restore';
-import { Button } from '../Button';
-import GeneralSheet from '../GeneralSheet';
-import { PricingPlans } from '../Premium/pricing-plans';
+import { Button } from '../ui/button';
+import SheetProvider from '../sheet-provider';
+import { PricingPlans } from '../premium/pricing-plans';
 import { allowedOnPlatform, getStyle } from './functions';
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
@@ -53,7 +53,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
         ...getStyle(style)
       }}
     >
-      <GeneralSheet context="premium_cta" />
+      <SheetProvider context="premium_cta" />
       {buttons.length > 0 &&
         buttons.slice(0, 1).map(item => (
           <Button
diff --git a/apps/mobile/src/components/Announcements/description.js b/apps/mobile/src/components/Announcements/description.js
index 093bb534c..070375d2f 100644
--- a/apps/mobile/src/components/Announcements/description.js
+++ b/apps/mobile/src/components/Announcements/description.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 
 export const Description = ({ text, style = {} }) => {
diff --git a/apps/mobile/src/components/Announcements/index.js b/apps/mobile/src/components/Announcements/index.js
index 7c028fcec..e482a6bde 100644
--- a/apps/mobile/src/components/Announcements/index.js
+++ b/apps/mobile/src/components/Announcements/index.js
@@ -4,8 +4,8 @@ import { useTracked } from '../../provider';
 import { useMessageStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eCloseAnnouncementDialog, eOpenAnnouncementDialog } from '../../utils/Events';
-import BaseDialog from '../Dialog/base-dialog';
+import { eCloseAnnouncementDialog, eOpenAnnouncementDialog } from '../../utils/events';
+import BaseDialog from '../dialog/base-dialog';
 import { allowedOnPlatform, renderItem } from './functions';
 
 export const AnnouncementDialog = () => {
diff --git a/apps/mobile/src/components/Announcements/list.js b/apps/mobile/src/components/Announcements/list.js
index 249ddaa7b..cb988e18d 100644
--- a/apps/mobile/src/components/Announcements/list.js
+++ b/apps/mobile/src/components/Announcements/list.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import Paragraph from '../Typography/Paragraph';
+import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 
 export const List = ({ items, listType, style = {} }) => {
diff --git a/apps/mobile/src/components/Announcements/subheading.js b/apps/mobile/src/components/Announcements/subheading.js
index 39e0ea8a7..4548adb81 100644
--- a/apps/mobile/src/components/Announcements/subheading.js
+++ b/apps/mobile/src/components/Announcements/subheading.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
 import { getStyle } from './functions';
 
 export const SubHeading = ({ text, style = {} }) => {
diff --git a/apps/mobile/src/components/Announcements/title.js b/apps/mobile/src/components/Announcements/title.js
index 92fb70cc3..efd4b4d8c 100644
--- a/apps/mobile/src/components/Announcements/title.js
+++ b/apps/mobile/src/components/Announcements/title.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import Heading from '../Typography/Heading';
+import Heading from '../ui/typography/heading';
 import { getStyle } from './functions';
 
 export const Title = ({ text, style = {} }) => {
diff --git a/apps/mobile/src/components/AttachmentDialog/attachmentitem.js b/apps/mobile/src/components/AttachmentDialog/attachmentitem.js
new file mode 100644
index 000000000..2174f62a7
--- /dev/null
+++ b/apps/mobile/src/components/AttachmentDialog/attachmentitem.js
@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import * as Progress from 'react-native-progress';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTracked } from '../../provider';
+import { useAttachmentStore } from '../../provider/stores';
+import { db } from '../../utils/database';
+import filesystem from '../../utils/filesystem';
+import { SIZE } from '../../utils/size';
+import SheetProvider from '../sheet-provider';
+import { IconButton } from '../ui/icon-button';
+import Paragraph from '../ui/typography/paragraph';
+
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+function getFileExtension(filename) {
+  var ext = /^.+\.([^.]+)$/.exec(filename);
+  return ext == null ? '' : ext[1];
+}
+
+export const AttachmentItem = ({ attachment, encryption }) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  const progress = useAttachmentStore(state => state.progress);
+  const [currentProgress, setCurrentProgress] = useState(
+    encryption
+      ? {
+          type: 'encrypt'
+        }
+      : null
+  );
+  const encryptionProgress = encryption
+    ? useAttachmentStore(state => state.encryptionProgress)
+    : null;
+
+  const onPress = async () => {
+    if (currentProgress) {
+      db.fs.cancel(attachment.metadata.hash, 'download');
+      useAttachmentStore.getState().remove(attachment.metadata.hash);
+      return;
+    }
+    filesystem.downloadAttachment(attachment.metadata.hash, false);
+  };
+
+  useEffect(() => {
+    let prog = progress[attachment.metadata.hash];
+    if (prog) {
+      let type = prog.type;
+      let loaded = prog.type === 'download' ? prog.recieved : prog.sent;
+      prog = loaded / prog.total;
+      prog = (prog * 100).toFixed(0);
+      console.log('progress: ', prog);
+      console.log(prog);
+      setCurrentProgress({
+        value: prog,
+        percent: prog + '%',
+        type: type
+      });
+    } else {
+      setCurrentProgress(null);
+    }
+  }, [progress]);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        marginVertical: 5,
+        justifyContent: 'space-between',
+        padding: 12,
+        paddingVertical: 6,
+        borderRadius: 5,
+        backgroundColor: colors.nav
+      }}
+      type="grayBg"
+    >
+      <SheetProvider context={attachment.metadata.hash} />
+      <View
+        style={{
+          flexShrink: 1,
+          flexDirection: 'row',
+          alignItems: 'center'
+        }}
+      >
+        <View
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginLeft: -5
+          }}
+        >
+          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
+
+          <Paragraph
+            adjustsFontSizeToFit
+            size={6}
+            color={colors.light}
+            style={{
+              position: 'absolute'
+            }}
+          >
+            {getFileExtension(attachment.metadata.filename).toUpperCase()}
+          </Paragraph>
+        </View>
+
+        <View
+          style={{
+            flexShrink: 1,
+            marginLeft: 10
+          }}
+        >
+          <Paragraph
+            size={SIZE.sm - 1}
+            style={{
+              flexWrap: 'wrap',
+              marginBottom: 2.5
+            }}
+            numberOfLines={1}
+            lineBreakMode="middle"
+            color={colors.pri}
+          >
+            {attachment.metadata.filename}
+          </Paragraph>
+
+          <Paragraph color={colors.icon} size={SIZE.xs}>
+            {formatBytes(attachment.length)}{' '}
+            {currentProgress?.type ? '(' + currentProgress.type + 'ing - tap to cancel)' : ''}
+          </Paragraph>
+        </View>
+      </View>
+
+      {currentProgress || encryptionProgress || encryption ? (
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={() => {
+            if (encryption) return;
+            db.fs.cancel(attachment.metadata.hash);
+            setCurrentProgress(null);
+          }}
+          style={{
+            justifyContent: 'center',
+            marginLeft: 5,
+            marginTop: 5,
+            marginRight: -5
+          }}
+        >
+          <Progress.Circle
+            size={SIZE.xxl}
+            progress={
+              encryptionProgress
+                ? encryptionProgress
+                : currentProgress?.value
+                ? currentProgress?.value / 100
+                : 0
+            }
+            showsText
+            textStyle={{
+              fontSize: 10
+            }}
+            color={colors.accent}
+            formatText={progress => (progress * 100).toFixed(0)}
+            borderWidth={0}
+            thickness={2}
+          />
+        </TouchableOpacity>
+      ) : (
+        <IconButton
+          onPress={() => !encryption && onPress(attachment)}
+          name="download"
+          size={SIZE.lg}
+          color={colors.pri}
+        />
+      )}
+    </View>
+  );
+};
diff --git a/apps/mobile/src/components/AttachmentDialog/index.js b/apps/mobile/src/components/AttachmentDialog/index.js
index cd61ed93f..2ddb464d7 100644
--- a/apps/mobile/src/components/AttachmentDialog/index.js
+++ b/apps/mobile/src/components/AttachmentDialog/index.js
@@ -1,20 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
-import * as Progress from 'react-native-progress';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import { useAttachmentStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { eCloseAttachmentDialog, eOpenAttachmentsDialog } from '../../utils/Events';
-import filesystem from '../../utils/filesystem';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import SheetWrapper from '../Sheet';
-import DialogHeader from '../Dialog/dialog-header';
-import GeneralSheet from '../GeneralSheet';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseAttachmentDialog, eOpenAttachmentsDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import DialogHeader from '../dialog/dialog-header';
+import SheetWrapper from '../ui/sheet';
+import Paragraph from '../ui/typography/paragraph';
+import { AttachmentItem } from './attachment-item';
 export const AttachmentDialog = () => {
   const [state] = useTracked();
   const colors = state.colors;
@@ -89,7 +85,7 @@ export const AttachmentDialog = () => {
           }
           data={attachments}
           renderItem={({ item, index }) => (
-            <Attachment attachment={item} note={note} setNote={setNote} />
+            <AttachmentItem attachment={item} note={note} setNote={setNote} />
           )}
         />
 
@@ -108,177 +104,3 @@ export const AttachmentDialog = () => {
     </SheetWrapper>
   );
 };
-
-function formatBytes(bytes, decimals = 2) {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
-
-function getFileExtension(filename) {
-  var ext = /^.+\.([^.]+)$/.exec(filename);
-  return ext == null ? '' : ext[1];
-}
-
-export const Attachment = ({ attachment, encryption }) => {
-  const [state] = useTracked();
-  const colors = state.colors;
-  const progress = useAttachmentStore(state => state.progress);
-  const [currentProgress, setCurrentProgress] = useState(
-    encryption
-      ? {
-          type: 'encrypt'
-        }
-      : null
-  );
-  const encryptionProgress = encryption
-    ? useAttachmentStore(state => state.encryptionProgress)
-    : null;
-
-  const onPress = async () => {
-    if (currentProgress) {
-      db.fs.cancel(attachment.metadata.hash, 'download');
-      useAttachmentStore.getState().remove(attachment.metadata.hash);
-      return;
-    }
-    filesystem.downloadAttachment(attachment.metadata.hash, false);
-  };
-
-  useEffect(() => {
-    let prog = progress[attachment.metadata.hash];
-    if (prog) {
-      let type = prog.type;
-      let loaded = prog.type === 'download' ? prog.recieved : prog.sent;
-      prog = loaded / prog.total;
-      prog = (prog * 100).toFixed(0);
-      console.log('progress: ', prog);
-      console.log(prog);
-      setCurrentProgress({
-        value: prog,
-        percent: prog + '%',
-        type: type
-      });
-    } else {
-      setCurrentProgress(null);
-    }
-  }, [progress]);
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        marginVertical: 5,
-        justifyContent: 'space-between',
-        padding: 12,
-        paddingVertical: 6,
-        borderRadius: 5,
-        backgroundColor: colors.nav
-      }}
-      type="grayBg"
-    >
-      <GeneralSheet context={attachment.metadata.hash} />
-      <View
-        style={{
-          flexShrink: 1,
-          flexDirection: 'row',
-          alignItems: 'center'
-        }}
-      >
-        <View
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginLeft: -5
-          }}
-        >
-          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
-
-          <Paragraph
-            adjustsFontSizeToFit
-            size={6}
-            color={colors.light}
-            style={{
-              position: 'absolute'
-            }}
-          >
-            {getFileExtension(attachment.metadata.filename).toUpperCase()}
-          </Paragraph>
-        </View>
-
-        <View
-          style={{
-            flexShrink: 1,
-            marginLeft: 10
-          }}
-        >
-          <Paragraph
-            size={SIZE.sm - 1}
-            style={{
-              flexWrap: 'wrap',
-              marginBottom: 2.5
-            }}
-            numberOfLines={1}
-            lineBreakMode="middle"
-            color={colors.pri}
-          >
-            {attachment.metadata.filename}
-          </Paragraph>
-
-          <Paragraph color={colors.icon} size={SIZE.xs}>
-            {formatBytes(attachment.length)}{' '}
-            {currentProgress?.type ? '(' + currentProgress.type + 'ing - tap to cancel)' : ''}
-          </Paragraph>
-        </View>
-      </View>
-
-      {currentProgress || encryptionProgress || encryption ? (
-        <TouchableOpacity
-          activeOpacity={0.9}
-          onPress={() => {
-            if (encryption) return;
-            db.fs.cancel(attachment.metadata.hash);
-            setCurrentProgress(null);
-          }}
-          style={{
-            justifyContent: 'center',
-            marginLeft: 5,
-            marginTop: 5,
-            marginRight: -5
-          }}
-        >
-          <Progress.Circle
-            size={SIZE.xxl}
-            progress={
-              encryptionProgress
-                ? encryptionProgress
-                : currentProgress?.value
-                ? currentProgress?.value / 100
-                : 0
-            }
-            showsText
-            textStyle={{
-              fontSize: 10
-            }}
-            color={colors.accent}
-            formatText={progress => (progress * 100).toFixed(0)}
-            borderWidth={0}
-            thickness={2}
-          />
-        </TouchableOpacity>
-      ) : (
-        <ActionIcon
-          onPress={() => !encryption && onPress(attachment)}
-          name="download"
-          size={SIZE.lg}
-          color={colors.pri}
-        />
-      )}
-    </View>
-  );
-};
diff --git a/apps/mobile/src/components/DialogManager/index.js b/apps/mobile/src/components/DialogManager/index.js
deleted file mode 100644
index 87c72fb4b..000000000
--- a/apps/mobile/src/components/DialogManager/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { Component } from 'react';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { getCurrentColors } from '../../utils/Colors';
-import { eThemeUpdated } from '../../utils/Events';
-import { EditorSettings } from '../../views/Editor/EditorSettings';
-import { AddNotebookDialog } from '../AddNotebookDialog';
-import { AddTopicDialog } from '../AddTopicDialog';
-import { AnnouncementDialog } from '../Announcements';
-import { AttachmentDialog } from '../AttachmentDialog';
-import { Dialog } from '../Dialog';
-import ExportDialog from '../ExportDialog';
-import GeneralSheet from '../GeneralSheet';
-import ImagePreview from '../ImagePreview';
-import Auth from '../Auth';
-import { SessionExpired } from '../Auth/session-expired';
-import MergeEditor from '../MergeEditor';
-import MoveNoteDialog from '../MoveNoteDialog';
-import PremiumDialog from '../Premium';
-import { Expiring } from '../Premium/expiring';
-import PublishNoteDialog from '../PublishNoteDialog';
-import RateDialog from '../RateDialog';
-import RecoveryKeyDialog from '../RecoveryKeyDialog';
-import RestoreDialog from '../RestoreDialog';
-import ResultDialog from '../ResultDialog';
-import TagsDialog from '../TagsDialog';
-import { VaultDialog } from '../VaultDialog';
-
-export class DialogManager extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      colors: getCurrentColors()
-    };
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return JSON.stringify(nextProps) !== JSON.stringify(this.props) || nextState !== this.state;
-  }
-
-  onThemeChange = () => {
-    this.setState({
-      colors: getCurrentColors()
-    });
-  };
-
-  componentDidMount() {
-    eSubscribeEvent(eThemeUpdated, this.onThemeChange);
-  }
-
-  componentWillUnmount() {
-    eUnSubscribeEvent(eThemeUpdated, this.onThemeChange);
-  }
-
-  render() {
-    let { colors } = this.state;
-    return (
-      <>
-        <Dialog context="global" />
-        <AddTopicDialog colors={colors} />
-        <AddNotebookDialog colors={colors} />
-        <PremiumDialog colors={colors} />
-        <Auth colors={colors} />
-        <MergeEditor />
-        <ExportDialog />
-        <RecoveryKeyDialog colors={colors} />
-        <GeneralSheet />
-        <RestoreDialog />
-        <ResultDialog />
-        <VaultDialog colors={colors} />
-        <MoveNoteDialog colors={colors} />
-        <RateDialog />
-        <ImagePreview />
-        <EditorSettings />
-        <PublishNoteDialog />
-        <TagsDialog />
-        <AttachmentDialog />
-        <Expiring />
-        <AnnouncementDialog />
-        <SessionExpired />
-      </>
-    );
-  }
-}
diff --git a/apps/mobile/src/components/ExportDialog/index.js b/apps/mobile/src/components/ExportDialog/index.js
index 85e195932..cf7ef41ec 100644
--- a/apps/mobile/src/components/ExportDialog/index.js
+++ b/apps/mobile/src/components/ExportDialog/index.js
@@ -8,18 +8,18 @@ import { useTracked } from '../../provider';
 import { ToastEvent } from '../../services/EventManager';
 import Exporter from '../../services/Exporter';
 import { getElevation } from '../../utils';
-import { ph, pv, SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import { PressableButton } from '../PressableButton';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { ph, pv, SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const { eSubscribeEvent, eUnSubscribeEvent } = require('../../services/EventManager');
-const { eOpenExportDialog, eCloseExportDialog } = require('../../utils/Events');
+const { eOpenExportDialog, eCloseExportDialog } = require('../../utils/events');
 
 const ExportDialog = () => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/ExportDialog/share.js b/apps/mobile/src/components/ExportDialog/share.js
index 8cef067e2..b775d891d 100644
--- a/apps/mobile/src/components/ExportDialog/share.js
+++ b/apps/mobile/src/components/ExportDialog/share.js
@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import FileViewer from 'react-native-file-viewer';
 import Share from 'react-native-share';
 import { ToastEvent } from '../../services/EventManager';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
 
 export const ShareComponent = ({ uri, name, padding }) => {
   return (
diff --git a/apps/mobile/src/components/Github/issue.js b/apps/mobile/src/components/Github/issue.js
index 68a8bf944..5e4dc7053 100644
--- a/apps/mobile/src/components/Github/issue.js
+++ b/apps/mobile/src/components/Github/issue.js
@@ -7,15 +7,15 @@ import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
 import { APP_VERSION } from '../../../version';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog } from '../../utils/Events';
+import { eCloseProgressDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import { presentDialog } from '../Dialog/functions';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import { presentDialog } from '../dialog/functions';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 import deviceInfoModule from 'react-native-device-info';
 
 export const Issue = () => {
diff --git a/apps/mobile/src/components/JumpToDialog/index.js b/apps/mobile/src/components/JumpToDialog/index.js
index 7722bc5d6..398c02b36 100644
--- a/apps/mobile/src/components/JumpToDialog/index.js
+++ b/apps/mobile/src/components/JumpToDialog/index.js
@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import BaseDialog from '../../components/Dialog/base-dialog';
-import { PressableButton } from '../../components/PressableButton';
-import Seperator from '../../components/Seperator';
+import BaseDialog from '../dialog/base-dialog';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
 import { useTracked } from '../../provider';
 import { useMessageStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseJumpToDialog, eOpenJumpToDialog, eScrollEvent } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseJumpToDialog, eOpenJumpToDialog, eScrollEvent } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const offsets = [];
 let timeout = null;
diff --git a/apps/mobile/src/components/ListPlaceholders/index.js b/apps/mobile/src/components/ListPlaceholders/index.js
deleted file mode 100644
index fdcbfb57c..000000000
--- a/apps/mobile/src/components/ListPlaceholders/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-import {
-  FAV_SVG,
-  LOGIN_SVG,
-  LOGO_SVG,
-  NOTEBOOK_SVG,
-  NOTE_SVG,
-  SEARCH_SVG,
-  SETTINGS_SVG,
-  TAG_SVG,
-  TOPIC_SVG,
-  TRASH_SVG
-} from '../../assets/images/assets';
-import { useTracked } from '../../provider';
-export const Placeholder = ({ type, w, h, color }) => {
-  const [state, dispatch] = useTracked();
-  const { colors } = state;
-  const getSVG = () => {
-    switch (type) {
-      case 'notes':
-        return NOTE_SVG(color || colors.accent);
-      case 'notebooks':
-        return NOTEBOOK_SVG(colors.accent);
-      case 'topics':
-        return TOPIC_SVG(colors.accent);
-      case 'tags':
-        return TAG_SVG(colors.accent);
-      case 'favorites':
-        return FAV_SVG(colors.accent);
-      case 'trash':
-        return TRASH_SVG(colors.accent);
-      case 'settings':
-        return SETTINGS_SVG(colors.accent);
-      case 'search':
-        return SEARCH_SVG(colors.accent);
-      case 'login':
-        return LOGIN_SVG(colors.accent);
-      case 'signup':
-        return LOGO_SVG;
-    }
-  };
-
-  return (
-    <SvgToPngView
-      color={type === 'notes' ? color || colors.accent : colors.accent}
-      src={getSVG()}
-      img={type}
-      width={w}
-      height={h}
-    />
-  );
-};
-
-export const SvgToPngView = ({ width = 250, height = 250, src }) => {
-  const [error, setError] = useState(false);
-
-  return (
-    <View
-      style={{
-        height: width || 250,
-        width: height || 250
-      }}
-    >
-      <SvgXml xml={src} width="100%" height="100%" />
-    </View>
-  );
-};
diff --git a/apps/mobile/src/components/Loading/index.js b/apps/mobile/src/components/Loading/index.js
deleted file mode 100644
index 032033d93..000000000
--- a/apps/mobile/src/components/Loading/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import { useTracked } from '../../provider';
-import { ph, pv, SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Paragraph from '../Typography/Paragraph';
-
-export const Loading = ({
-  height = 150,
-  tagline = 'Loading....',
-  done = false,
-  doneText = 'Action completed successfully!',
-  onDone = () => {},
-  customStyle = {}
-}) => {
-  const [state, dispatch] = useTracked();
-  const { colors } = state;
-
-  return (
-    <View
-      style={[
-        { height: height, backgroundColor: colors.bg },
-        styles.activityContainer,
-        customStyle
-      ]}
-    >
-      {done ? (
-        <>
-          <Paragraph color={colors.icon} size={SIZE.xs} style={styles.activityText}>
-            {doneText}
-          </Paragraph>
-
-          <Button onPress={onDone} title="Open file" />
-        </>
-      ) : (
-        <>
-          <ActivityIndicator color={colors.accent} />
-          <Paragraph
-            size={SIZE.md}
-            style={{
-              marginTop: 10
-            }}
-            color={colors.pri}
-          >
-            {tagline}
-          </Paragraph>
-        </>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  activityText: {
-    fontSize: SIZE.sm,
-    textAlign: 'center',
-    marginBottom: 10
-  },
-  activityContainer: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  button: {
-    paddingVertical: pv,
-    paddingHorizontal: ph,
-    marginTop: 10,
-    borderRadius: 5,
-    alignSelf: 'center',
-    width: '48%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    flexDirection: 'row'
-  },
-  buttonText: {
-    //fontFamily: "sans-serif",
-    color: 'white',
-    fontSize: SIZE.sm
-  }
-});
diff --git a/apps/mobile/src/components/Menu/ColorSection.js b/apps/mobile/src/components/Menu/ColorSection.js
index 17e8f9369..c872fd45d 100644
--- a/apps/mobile/src/components/Menu/ColorSection.js
+++ b/apps/mobile/src/components/Menu/ColorSection.js
@@ -4,14 +4,14 @@ import { useTracked } from '../../provider';
 import { useMenuStore, useNoteStore } from '../../provider/stores';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { presentDialog } from '../Dialog/functions';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { refreshNotesPage } from '../../utils/events';
+import { normalize, SIZE } from '../../utils/size';
+import { presentDialog } from '../dialog/functions';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const ColorSection = () => {
   const colorNotes = useMenuStore(state => state.colorNotes);
diff --git a/apps/mobile/src/components/Menu/TimeSince.js b/apps/mobile/src/components/Menu/TimeSince.js
deleted file mode 100644
index 0d4661ebf..000000000
--- a/apps/mobile/src/components/Menu/TimeSince.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { timeSince } from '../../utils/TimeUtils';
-import Paragraph from '../Typography/Paragraph';
-
-export const TimeSince = ({ time, style, updateFrequency = 30000 }) => {
-  const [timeAgo, setTimeAgo] = useState(null);
-
-  useEffect(() => {
-    let t = timeSince(time || Date.now());
-    setTimeAgo(t);
-    let interval = setInterval(() => {
-      t = timeSince(time);
-      setTimeAgo(t);
-    }, updateFrequency);
-    return () => {
-      clearInterval(interval);
-      interval = null;
-    };
-  }, [time, updateFrequency]);
-
-  return <Paragraph style={style}>{timeAgo}</Paragraph>;
-};
diff --git a/apps/mobile/src/components/MergeEditor/index.js b/apps/mobile/src/components/MergeEditor/index.js
index d603a167f..bef5fad34 100644
--- a/apps/mobile/src/components/MergeEditor/index.js
+++ b/apps/mobile/src/components/MergeEditor/index.js
@@ -17,19 +17,19 @@ import Navigation from '../../services/Navigation';
 import Sync from '../../services/Sync';
 import { dHeight } from '../../utils';
 import { db } from '../../utils/database';
-import { eApplyChanges, eShowMergeDialog, refreshNotesPage } from '../../utils/Events';
+import { eApplyChanges, eShowMergeDialog, refreshNotesPage } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { timeConverter } from '../../utils/TimeUtils';
+import { normalize, SIZE } from '../../utils/size';
+import { timeConverter } from '../../utils/time';
 import { getNote, sourceUri, updateNoteInEditor } from '../../views/Editor/Functions';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
-import DialogContainer from '../Dialog/dialog-container';
-import DialogHeader from '../Dialog/dialog-header';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import DialogButtons from '../dialog/dialog-buttons';
+import DialogContainer from '../dialog/dialog-container';
+import DialogHeader from '../dialog/dialog-header';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 
 const primaryWebView = createRef();
 const secondaryWebView = createRef();
@@ -324,7 +324,7 @@ const MergeEditor = () => {
                 flexShrink: 1
               }}
             >
-              <ActionIcon onPress={close} color={colors.pri} name="arrow-left" />
+              <IconButton onPress={close} color={colors.pri} name="arrow-left" />
               <Paragraph style={{ flexWrap: 'wrap' }} color={colors.icon} size={SIZE.xs}>
                 <Text style={{ color: colors.accent, fontWeight: 'bold' }}>(This Device)</Text>
                 {'\n'}
diff --git a/apps/mobile/src/components/MoveNoteDialog/index.js b/apps/mobile/src/components/MoveNoteDialog/index.js
index 53dfe318d..ae8ebb2d4 100644
--- a/apps/mobile/src/components/MoveNoteDialog/index.js
+++ b/apps/mobile/src/components/MoveNoteDialog/index.js
@@ -8,19 +8,19 @@ import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/E
 import Navigation from '../../services/Navigation';
 import { getTotalNotes } from '../../utils';
 import { db } from '../../utils/database';
-import { eOpenMoveNoteDialog } from '../../utils/Events';
+import { eOpenMoveNoteDialog } from '../../utils/events';
 import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import DialogHeader from '../Dialog/dialog-header';
-import { presentDialog } from '../Dialog/functions';
-import Input from '../Input';
-import { PressableButton } from '../PressableButton';
-import SheetWrapper from '../Sheet';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import DialogHeader from '../dialog/dialog-header';
+import { presentDialog } from '../dialog/functions';
+import Input from '../ui/input';
+import { PressableButton } from '../ui/pressable';
+import SheetWrapper from '../ui/sheet';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 let newNotebookTitle = null;
 const notebookInput = createRef();
@@ -332,7 +332,7 @@ const MoveNoteComponent = ({ close, note, setNote }) => {
                     ) : null}
                   </View>
 
-                  <ActionIcon
+                  <IconButton
                     name={expanded === item.id ? 'plus' : 'chevron-down'}
                     color={expanded === item.id ? colors.accent : colors.pri}
                     size={SIZE.xl}
diff --git a/apps/mobile/src/components/MoveNoteDialog/movenote.tsx b/apps/mobile/src/components/MoveNoteDialog/movenote.tsx
index 4a9b846ff..c955fdf93 100644
--- a/apps/mobile/src/components/MoveNoteDialog/movenote.tsx
+++ b/apps/mobile/src/components/MoveNoteDialog/movenote.tsx
@@ -6,17 +6,17 @@ import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import DialogHeader from '../Dialog/dialog-header';
-import { presentDialog } from '../Dialog/functions';
-import { PressableButton } from '../PressableButton';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseProgressDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import DialogHeader from '../dialog/dialog-header';
+import { presentDialog } from '../dialog/functions';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const MoveNotes = ({
   notebook,
@@ -31,7 +31,7 @@ export const MoveNotes = ({
   const colors = state.colors;
   const [currentNotebook, setCurrentNotebook] = useState(notebook);
 
-  let notes = db.notes.all;
+  let notes = db.notes?.all;
 
   const [selectedNoteIds, setSelectedNoteIds] = useState<String[]>([]);
   const [topic, setTopic] = useState(selectedTopic);
@@ -80,8 +80,8 @@ export const MoveNotes = ({
       });
       return false;
     }
-    await db.notebooks.notebook(currentNotebook.id).topics.add(value);
-    setCurrentNotebook(db.notebooks.notebook(currentNotebook.id).data);
+    await db.notebooks?.notebook(currentNotebook.id).topics.add(value);
+    setCurrentNotebook(db.notebooks?.notebook(currentNotebook.id).data);
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.NotesPage,
       Navigation.routeNames.Favorites,
@@ -139,7 +139,7 @@ export const MoveNotes = ({
         ) : null}
 
         {selectedNoteIds.indexOf(item.id) > -1 ? (
-          <ActionIcon
+          <IconButton
             customStyle={{
               width: null,
               height: null,
@@ -262,7 +262,7 @@ export const MoveNotes = ({
         <Button
           //@ts-ignore
           onPress={async () => {
-            await db.notes.move(
+            await db.notes?.move(
               {
                 topic: topic.id,
                 id: topic.notebookId
@@ -289,6 +289,8 @@ export const MoveNotes = ({
 
 MoveNotes.present = (notebook: any, topic: any) => {
   presentSheet({
-    component: ref => <MoveNotes fwdRef={ref} notebook={notebook} selectedTopic={topic} />
+    component: (ref: RefObject<ActionSheet>) => (
+      <MoveNotes fwdRef={ref} notebook={notebook} selectedTopic={topic} />
+    )
   });
 };
diff --git a/apps/mobile/src/components/NoteHistory/index.js b/apps/mobile/src/components/NoteHistory/index.js
index 112574a95..eef1b0522 100644
--- a/apps/mobile/src/components/NoteHistory/index.js
+++ b/apps/mobile/src/components/NoteHistory/index.js
@@ -6,13 +6,13 @@ import { useTracked } from '../../provider';
 import { presentSheet } from '../../services/EventManager';
 import { db } from '../../utils/database';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { timeConverter, timeSince } from '../../utils/TimeUtils';
-import DialogHeader from '../Dialog/dialog-header';
-import GeneralSheet from '../GeneralSheet';
-import { PressableButton } from '../PressableButton';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { timeConverter, timeSince } from '../../utils/time';
+import DialogHeader from '../dialog/dialog-header';
+import SheetProvider from '../sheet-provider';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 import NotePreview from './preview';
 
 export default function NoteHistory({ note, ref }) {
@@ -82,7 +82,7 @@ export default function NoteHistory({ note, ref }) {
 
   return (
     <View>
-      <GeneralSheet context="note_history" />
+      <SheetProvider context="note_history" />
       <DialogHeader
         title="Note history"
         paragraph="Revert back to an older version of this note"
diff --git a/apps/mobile/src/components/NoteHistory/preview.js b/apps/mobile/src/components/NoteHistory/preview.js
index 725dbcfcb..e8fb6970e 100644
--- a/apps/mobile/src/components/NoteHistory/preview.js
+++ b/apps/mobile/src/components/NoteHistory/preview.js
@@ -6,15 +6,15 @@ import { useEditorStore } from '../../provider/stores';
 import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog, eOnLoadNote } from '../../utils/Events';
+import { eCloseProgressDialog, eOnLoadNote } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { normalize } from '../../utils/SizeUtils';
+import { normalize } from '../../utils/size';
 import { getNote, sourceUri } from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Paragraph from '../Typography/Paragraph';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Paragraph from '../ui/typography/paragraph';
 
 export default function NotePreview({ session, content }) {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index 3289f5e1d..2ebfbbac0 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -7,16 +7,16 @@ import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { TimeSince } from '../Menu/TimeSince';
-import { Properties } from '../Properties';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { refreshNotesPage } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { TimeSince } from '../side-menu/TimeSince';
+import { Properties } from '../properties';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const navigateToTopic = topic => {
   let routeName = 'NotesPage';
@@ -282,7 +282,7 @@ const NoteItem = ({ item, isTrash, tags, dateBy = 'dateCreated', noOpen = false
           )}
         </View>
       </View>
-      <ActionIcon
+      <IconButton
         testID={notesnook.listitem.menu}
         color={colors.pri}
         name="dots-horizontal"
diff --git a/apps/mobile/src/components/Properties/useActions.js b/apps/mobile/src/components/Properties/useActions.js
index e7bc3dbda..37fb47f44 100644
--- a/apps/mobile/src/components/Properties/useActions.js
+++ b/apps/mobile/src/components/Properties/useActions.js
@@ -31,7 +31,7 @@ import {
   COLOR_SCHEME_LIGHT,
   COLOR_SCHEME_PITCH_BLACK,
   setColorScheme
-} from '../../utils/Colors';
+} from '../../utils/color-scheme';
 import { db } from '../../utils/database';
 import {
   eOpenAddNotebookDialog,
@@ -41,11 +41,11 @@ import {
   eOpenLoginDialog,
   eOpenMoveNoteDialog,
   eOpenPublishNoteDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import { deleteItems } from '../../utils/functions';
-import { MMKV } from '../../utils/mmkv';
-import { sleep } from '../../utils/TimeUtils';
-import { presentDialog } from '../Dialog/functions';
+import { MMKV } from '../../utils/database/mmkv';
+import { sleep } from '../../utils/time';
+import { presentDialog } from '../dialog/functions';
 import { MoveNotes } from '../MoveNoteDialog/movenote';
 import NoteHistory from '../NoteHistory';
 import tiny from '../../views/Editor/tiny/tiny.js';
diff --git a/apps/mobile/src/components/PublishNoteDialog/index.js b/apps/mobile/src/components/PublishNoteDialog/index.js
index 3e95207d6..d71b92ea0 100644
--- a/apps/mobile/src/components/PublishNoteDialog/index.js
+++ b/apps/mobile/src/components/PublishNoteDialog/index.js
@@ -6,17 +6,17 @@ import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eClosePublishNoteDialog, eOpenPublishNoteDialog } from '../../utils/Events';
+import { eClosePublishNoteDialog, eOpenPublishNoteDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { useAttachmentStore } from '../../provider/stores';
 import { editing } from '../../utils';
 
@@ -203,7 +203,7 @@ const PublishNoteDialog = () => {
                   </Paragraph>
                 </View>
 
-                <ActionIcon
+                <IconButton
                   onPress={() => {
                     Clipboard.setString(publishUrl);
                     ToastEvent.show({
@@ -232,7 +232,7 @@ const PublishNoteDialog = () => {
                 marginBottom: 10
               }}
             >
-              <ActionIcon
+              <IconButton
                 onPress={() => {
                   if (publishing) return;
                   setIsLocked(!isLocked);
@@ -265,7 +265,7 @@ const PublishNoteDialog = () => {
                 alignItems: 'center'
               }}
             >
-              <ActionIcon
+              <IconButton
                 onPress={() => {
                   setSelfDestruct(!selfDestruct);
                 }}
diff --git a/apps/mobile/src/components/RateDialog/index.js b/apps/mobile/src/components/RateDialog/index.js
index 9b5443a10..15947480c 100644
--- a/apps/mobile/src/components/RateDialog/index.js
+++ b/apps/mobile/src/components/RateDialog/index.js
@@ -1,15 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Linking, Platform, View } from 'react-native';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eCloseRateDialog, eOpenRateDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { STORE_LINK } from '../../utils';
+import { eCloseRateDialog, eOpenRateDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { STORE_LINK } from '../../utils/constants';
 import { clearMessage } from '../../services/Message';
 
 const RateDialog = () => {
diff --git a/apps/mobile/src/components/RecoveryKeyDialog/index.js b/apps/mobile/src/components/RecoveryKeyDialog/index.js
index 0cd400473..facc5362f 100644
--- a/apps/mobile/src/components/RecoveryKeyDialog/index.js
+++ b/apps/mobile/src/components/RecoveryKeyDialog/index.js
@@ -1,31 +1,25 @@
+import Clipboard from '@react-native-clipboard/clipboard';
 import React, { createRef } from 'react';
 import { Platform, View } from 'react-native';
+import FileViewer from 'react-native-file-viewer';
 import QRCode from 'react-native-qrcode-svg';
+import * as ScopedStorage from 'react-native-scoped-storage';
 import Share from 'react-native-share';
 import { LOGO_BASE64 } from '../../assets/images/assets';
-import Clipboard from '@react-native-clipboard/clipboard';
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
-} from '../../services/EventManager';
-import { db } from '../../utils/database';
-import { eOpenRecoveryKeyDialog, eOpenResultDialog } from '../../utils/Events';
-import { sanitizeFilename } from '../../utils/filename';
-import { SIZE } from '../../utils/SizeUtils';
-import Storage from '../../utils/storage';
-import { sleep } from '../../utils/TimeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
-import FileViewer from 'react-native-file-viewer';
-
-import * as ScopedStorage from 'react-native-scoped-storage';
-import { MMKV } from '../../utils/mmkv';
+import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import { clearMessage } from '../../services/Message';
+import { db } from '../../utils/database';
+import { eOpenRecoveryKeyDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { sanitizeFilename } from '../../utils/sanitizer';
+import { SIZE } from '../../utils/size';
+import Storage from '../../utils/database/storage';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Seperator from '../ui/seperator';
+import SheetWrapper from '../ui/sheet';
+import Paragraph from '../ui/typography/paragraph';
 
 let RNFetchBlob;
 
diff --git a/apps/mobile/src/components/RestoreDialog/index.js b/apps/mobile/src/components/RestoreDialog/index.js
index 2dc41e4c3..dd812753b 100644
--- a/apps/mobile/src/components/RestoreDialog/index.js
+++ b/apps/mobile/src/components/RestoreDialog/index.js
@@ -6,21 +6,21 @@ import { useTracked } from '../../provider';
 import { initialize } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { eCloseRestoreDialog, eOpenRestoreDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import storage from '../../utils/storage';
-import { sleep, timeConverter } from '../../utils/TimeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseRestoreDialog, eOpenRestoreDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import storage from '../../utils/database/storage';
+import { sleep, timeConverter } from '../../utils/time';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 import * as ScopedStorage from 'react-native-scoped-storage';
-import { Dialog } from '../Dialog';
+import { Dialog } from '../dialog';
 import { verifyUser } from '../../views/Settings/functions';
-import { presentDialog } from '../Dialog/functions';
-import { Toast } from '../Toast';
+import { presentDialog } from '../dialog/functions';
+import { Toast } from '../toast';
 
 const actionSheetRef = createRef();
 let RNFetchBlob;
diff --git a/apps/mobile/src/components/ResultDialog/ProFeatures.js b/apps/mobile/src/components/ResultDialog/ProFeatures.js
index 1a7cbb31b..51653c206 100644
--- a/apps/mobile/src/components/ResultDialog/ProFeatures.js
+++ b/apps/mobile/src/components/ResultDialog/ProFeatures.js
@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
-import { eCloseProgressDialog, eCloseResultDialog, eOpenPremiumDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseProgressDialog, eCloseResultDialog, eOpenPremiumDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import Paragraph from '../ui/typography/paragraph';
 export const ProFeatures = ({ count = 6 }) => {
   const [state, dispatch] = useTracked();
   const { colors } = state;
diff --git a/apps/mobile/src/components/ResultDialog/index.js b/apps/mobile/src/components/ResultDialog/index.js
index 2b065f373..399939485 100644
--- a/apps/mobile/src/components/ResultDialog/index.js
+++ b/apps/mobile/src/components/ResultDialog/index.js
@@ -4,13 +4,13 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseResultDialog, eOpenResultDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseResultDialog, eOpenResultDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { ProFeatures } from './pro-features';
 
 const ResultDialog = () => {
diff --git a/apps/mobile/src/components/Shapes/index.js b/apps/mobile/src/components/Shapes/index.js
deleted file mode 100644
index d72cf6615..000000000
--- a/apps/mobile/src/components/Shapes/index.js
+++ /dev/null
@@ -1,258 +0,0 @@
-import React from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
-
-const Circle = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    circle: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      backgroundColor: color
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.circle} />
-    </View>
-  );
-};
-
-const Donut = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    donut: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      borderWidth: size / 4,
-      borderColor: color
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.donut} />
-    </View>
-  );
-};
-
-const Triangle = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    triangle: {
-      width: 0,
-      height: 0,
-      backgroundColor: 'transparent',
-      borderStyle: 'solid',
-      borderLeftWidth: size / 2,
-      borderRightWidth: size / 2,
-      borderBottomWidth: size,
-      borderLeftColor: 'transparent',
-      borderRightColor: 'transparent',
-      borderBottomColor: color,
-      transform: [{ rotate: '180deg' }]
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.triangle} />
-    </View>
-  );
-};
-
-const DiamondNarrow = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    diamondNarrow: {},
-    diamondNarrowTop: {
-      width: 0,
-      height: 0,
-      borderTopWidth: 0,
-      borderTopColor: 'transparent',
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 2,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 2,
-      borderBottomColor: color,
-      borderBottomWidth: size / 1.42
-    },
-    diamondNarrowBottom: {
-      width: 0,
-      height: 0,
-      borderTopWidth: size / 1.42,
-      borderTopColor: color,
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 2,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 2,
-      borderBottomColor: 'transparent',
-      borderBottomWidth: 0
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.diamondNarrow}>
-        <View style={style.diamondNarrowTop} />
-        <View style={style.diamondNarrowBottom} />
-      </View>
-    </View>
-  );
-};
-
-const CutDiamond = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    cutDiamond: {},
-    cutDiamondTop: {
-      width: size,
-      height: 0,
-      borderTopWidth: 0,
-      borderTopColor: 'transparent',
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 4,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 4,
-      borderBottomColor: color,
-      borderBottomWidth: size / 4
-    },
-    cutDiamondBottom: {
-      width: 0,
-      height: 0,
-      borderTopWidth: size / 1.42,
-      borderTopColor: color,
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 2,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 2,
-      borderBottomColor: 'transparent',
-      borderBottomWidth: 0
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.cutDiamond}>
-        <View style={style.cutDiamondTop} />
-        <View style={style.cutDiamondBottom} />
-      </View>
-    </View>
-  );
-};
-
-const Shapes = ({ primaryColor, secondaryColor, height, figures, borderRadius, style }) => {
-  const config = {
-    primaryColor: primaryColor || '#416DF8',
-    secondaryColor: secondaryColor || '#2F53D5',
-    height: Dimensions.get('window').height / (height || 3.5),
-    sizefigure: 100,
-    figures: figures || [
-      { name: 'circle', position: 'center', size: 60 },
-      { name: 'donut', position: 'flex-start', axis: 'top', size: 80 },
-      { name: 'circle', position: 'center', axis: 'right', size: 100 }
-    ],
-    borderRadius: borderRadius !== undefined ? borderRadius : 30
-  };
-
-  const arrFigures = [];
-  const buildFigures = () => {
-    config.figures.forEach((e, i) => {
-      let position = {
-        alignItems: e.position
-      };
-
-      const sizefigure = e.size || config.sizefigure;
-
-      switch (e.axis) {
-        case 'left':
-          position.left = -sizefigure / 2;
-          break;
-        case 'right':
-          position.right = -sizefigure / 2;
-          break;
-        case 'top':
-          position.top = -sizefigure / 2;
-          break;
-        case 'bottom':
-          position.bottom = -sizefigure / 2;
-          break;
-        default:
-          break;
-      }
-
-      if (e.name === 'circle') {
-        arrFigures.push(
-          <Circle key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-      if (e.name === 'donut') {
-        arrFigures.push(
-          <Donut key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-      if (e.name === 'triangle') {
-        arrFigures.push(
-          <Triangle key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-      if (e.name === 'diamondNarrow') {
-        arrFigures.push(
-          <DiamondNarrow
-            key={i}
-            size={sizefigure}
-            color={config.secondaryColor}
-            position={position}
-          />
-        );
-      }
-      if (e.name === 'cutDiamond') {
-        arrFigures.push(
-          <CutDiamond key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-    });
-
-    return arrFigures;
-  };
-
-  return (
-    <View
-      style={{
-        ...styles.wrapper,
-        backgroundColor: config.primaryColor,
-        height: config.height,
-        borderBottomLeftRadius: config.borderRadius,
-        borderBottomRightRadius: config.borderRadius,
-        ...style
-      }}
-    >
-      <>{buildFigures()}</>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    height: '100%',
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  }
-});
-
-export { Shapes };
diff --git a/apps/mobile/src/components/SimpleList/empty.js b/apps/mobile/src/components/SimpleList/empty.js
index caddfad88..0d7d6a650 100644
--- a/apps/mobile/src/components/SimpleList/empty.js
+++ b/apps/mobile/src/components/SimpleList/empty.js
@@ -4,13 +4,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { useTip } from '../../services/tip-manager';
-import { COLORS_NOTE } from '../../utils/Colors';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Seperator from '../Seperator';
-import { Tip } from '../Tip';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import { Tip } from '../tip';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Empty = React.memo(
   ({ loading = true, placeholderData, headerProps, type, screen }) => {
diff --git a/apps/mobile/src/components/SimpleList/header.js b/apps/mobile/src/components/SimpleList/header.js
deleted file mode 100644
index 859b1353e..000000000
--- a/apps/mobile/src/components/SimpleList/header.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useTracked } from '../../provider';
-import { useMessageStore } from '../../provider/stores';
-import { COLORS_NOTE } from '../../utils/Colors';
-import { hexToRGBA } from '../../utils/ColorUtils';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { Announcement } from '../Announcements/announcement';
-import { Button } from '../Button';
-import { Placeholder } from '../ListPlaceholders';
-import Heading from '../Typography/Heading';
-import { Card } from './card';
-
-export const Header = React.memo(
-  ({
-    type,
-    messageCard = true,
-    title,
-    paragraph,
-    color,
-    onPress,
-    shouldShow = false,
-    icon,
-    screen,
-    noAnnouncement,
-    height
-  }) => {
-    const [state] = useTracked();
-    const { colors } = state;
-    const announcements = useMessageStore(state => state.announcements);
-
-    return announcements.length !== 0 && !noAnnouncement ? (
-      <Announcement color={color || colors.accent} />
-    ) : type === 'search' ? null : !shouldShow ? (
-      <View
-        style={{
-          marginBottom: 5,
-          padding: 0,
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }}
-      >
-        {messageCard ? <Card color={COLORS_NOTE[color?.toLowerCase()] || colors.accent} /> : null}
-      </View>
-    ) : (
-      <View
-        style={{
-          width: '100%'
-        }}
-      >
-        <View
-          style={{
-            minHeight: height || 195,
-            padding: 12,
-            width: '100%',
-            zIndex: 10,
-            justifyContent: 'flex-end',
-            backgroundColor: COLORS_NOTE[color?.toLowerCase()]
-              ? hexToRGBA(COLORS_NOTE[color?.toLowerCase()], 0.15)
-              : color || colors.shade
-          }}
-        >
-          <View
-            style={{
-              right: 0,
-              paddingRight: 12,
-              bottom: 0,
-              position: 'absolute'
-            }}
-          >
-            <Placeholder
-              color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
-              w={normalize(150)}
-              h={normalize(150)}
-              type={screen === 'Favorites' ? 'favorites' : type}
-            />
-          </View>
-
-          <View
-            style={{
-              marginTop: 15
-            }}
-          >
-            <Heading style={{ marginBottom: paragraph ? 0 : 0 }} size={SIZE.xxxl * 1.2}>
-              <Heading size={SIZE.xxxl * 1.2} color={colors.accent}>
-                {title.slice(0, 1) === '#' ? '#' : null}
-              </Heading>
-
-              {title.slice(0, 1) === '#' ? title.slice(1) : title}
-            </Heading>
-
-            {paragraph ? (
-              <Button
-                height={20}
-                title={paragraph}
-                icon={icon}
-                style={{
-                  alignSelf: 'flex-start',
-                  paddingLeft: 0
-                }}
-                textStyle={{
-                  fontWeight: 'normal'
-                }}
-                iconSize={SIZE.sm}
-                fontSize={SIZE.sm}
-                onPress={onPress}
-              />
-            ) : null}
-          </View>
-        </View>
-      </View>
-    );
-  }
-);
-
-Header.displayName = 'Header';
diff --git a/apps/mobile/src/components/SimpleList/sectionheader.js b/apps/mobile/src/components/SimpleList/sectionheader.js
index 8714d70a2..8ce468bd1 100644
--- a/apps/mobile/src/components/SimpleList/sectionheader.js
+++ b/apps/mobile/src/components/SimpleList/sectionheader.js
@@ -9,15 +9,15 @@ import {
   presentSheet
 } from '../../services/EventManager';
 import SettingsService from '../../services/SettingsService';
-import { GROUP } from '../../utils';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { GROUP } from '../../utils/constants';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { eOpenJumpToDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import Sort from '../Sort';
-import Heading from '../Typography/Heading';
+import { eOpenJumpToDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import Sort from '../sort';
+import Heading from '../ui/typography/heading';
 
 export const SectionHeader = ({ item, index, type, color, screen }) => {
   const [state] = useTracked();
@@ -117,7 +117,7 @@ export const SectionHeader = ({ item, index, type, color, screen }) => {
             />
 
             {type === 'notes' || type === 'notebooks' || type === 'home' ? (
-              <ActionIcon
+              <IconButton
                 customStyle={{
                   width: 25,
                   height: 25
diff --git a/apps/mobile/src/components/TagsDialog/index.js b/apps/mobile/src/components/TagsDialog/index.js
index b844eef3c..e2200f2a8 100644
--- a/apps/mobile/src/components/TagsDialog/index.js
+++ b/apps/mobile/src/components/TagsDialog/index.js
@@ -6,14 +6,14 @@ import { useTagStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseTagsDialog, eOpenTagsDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import Input from '../Input';
-import { PressableButton } from '../PressableButton';
-import SheetWrapper from '../Sheet';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseTagsDialog, eOpenTagsDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import Input from '../ui/input';
+import { PressableButton } from '../ui/pressable';
+import SheetWrapper from '../ui/sheet';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 const TagsDialog = () => {
   const [state] = useTracked();
   const colors = state.colors;
diff --git a/apps/mobile/src/components/VaultDialog/index.js b/apps/mobile/src/components/VaultDialog/index.js
index d68b5a061..d5f4234f1 100644
--- a/apps/mobile/src/components/VaultDialog/index.js
+++ b/apps/mobile/src/components/VaultDialog/index.js
@@ -20,19 +20,19 @@ import {
   eCloseVaultDialog,
   eOnLoadNote,
   eOpenVaultDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import { deleteItems } from '../../utils/functions';
-import { tabBarRef } from '../../utils/Refs';
-import { sleep } from '../../utils/TimeUtils';
+import { tabBarRef } from '../../utils/global-refs';
+import { sleep } from '../../utils/time';
 import { getNote } from '../../views/Editor/Functions';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
-import Paragraph from '../Typography/Paragraph';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import DialogButtons from '../dialog/dialog-buttons';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
+import Paragraph from '../ui/typography/paragraph';
 
 let Keychain;
 const passInputRef = createRef();
@@ -703,7 +703,7 @@ export class VaultDialog extends Component {
                   onSubmit={() => {
                     changePassword ? changePassInputRef.current?.focus() : this.onPress;
                   }}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   returnKeyLabel={changePassword ? 'Next' : this.state.title}
                   returnKeyType={changePassword ? 'next' : 'done'}
                   secureTextEntry
@@ -755,7 +755,7 @@ export class VaultDialog extends Component {
                   onChangeText={value => {
                     this.newPassword = value;
                   }}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   onSubmit={this.onPress}
                   returnKeyLabel="Change"
                   returnKeyType="done"
@@ -774,7 +774,7 @@ export class VaultDialog extends Component {
                   onChangeText={value => {
                     this.password = value;
                   }}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   secureTextEntry
@@ -794,7 +794,7 @@ export class VaultDialog extends Component {
                   errorMessage="Passwords do not match."
                   onErrorCheck={e => null}
                   marginBottom={0}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   returnKeyLabel="Create"
                   returnKeyType="done"
                   onChangeText={value => {
diff --git a/apps/mobile/src/components/Auth/background.js b/apps/mobile/src/components/auth/background.js
similarity index 100%
rename from apps/mobile/src/components/Auth/background.js
rename to apps/mobile/src/components/auth/background.js
diff --git a/apps/mobile/src/components/Auth/changepassword.js b/apps/mobile/src/components/auth/changepassword.js
similarity index 91%
rename from apps/mobile/src/components/Auth/changepassword.js
rename to apps/mobile/src/components/auth/changepassword.js
index 952c617f9..fbd628cbb 100644
--- a/apps/mobile/src/components/Auth/changepassword.js
+++ b/apps/mobile/src/components/auth/changepassword.js
@@ -4,12 +4,12 @@ import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog } from '../../utils/Events';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import { Notice } from '../Notice';
-import Seperator from '../Seperator';
+import { eCloseProgressDialog } from '../../utils/events';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import { Notice } from '../ui/notice';
+import Seperator from '../ui/seperator';
 
 export const ChangePassword = () => {
   const [state] = useTracked();
@@ -83,7 +83,7 @@ export const ChangePassword = () => {
         returnKeyLabel="Next"
         returnKeyType="next"
         secureTextEntry
-        autoCompleteType="password"
+        autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
         placeholder="Old Password"
@@ -99,7 +99,7 @@ export const ChangePassword = () => {
         returnKeyType="next"
         secureTextEntry
         validationType="password"
-        autoCompleteType="password"
+        autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
         placeholder="New password"
diff --git a/apps/mobile/src/components/Auth/forgotpassword.js b/apps/mobile/src/components/auth/forgotpassword.js
similarity index 91%
rename from apps/mobile/src/components/Auth/forgotpassword.js
rename to apps/mobile/src/components/auth/forgotpassword.js
index e154f8595..dc854608f 100644
--- a/apps/mobile/src/components/Auth/forgotpassword.js
+++ b/apps/mobile/src/components/auth/forgotpassword.js
@@ -5,14 +5,14 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { MMKV } from '../../utils/mmkv';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { MMKV } from '../../utils/database/mmkv';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const ForgotPassword = () => {
   const [state] = useTracked();
@@ -86,7 +86,7 @@ export const ForgotPassword = () => {
               paddingBottom: 50
             }}
           >
-            <ActionIcon
+            <IconButton
               customStyle={{
                 width: null,
                 height: null
@@ -129,7 +129,7 @@ export const ForgotPassword = () => {
               onErrorCheck={e => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
-              autoCompleteType="email"
+              autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"
diff --git a/apps/mobile/src/components/Auth/index.js b/apps/mobile/src/components/auth/index.js
similarity index 93%
rename from apps/mobile/src/components/Auth/index.js
rename to apps/mobile/src/components/auth/index.js
index 0ca2478ad..bcdf81581 100644
--- a/apps/mobile/src/components/Auth/index.js
+++ b/apps/mobile/src/components/auth/index.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTracked } from '../../provider/index';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eCloseLoginDialog, eOpenLoginDialog } from '../../utils/Events';
-import { sleep } from '../../utils/TimeUtils';
-import BaseDialog from '../Dialog/base-dialog';
-import { Toast } from '../Toast';
+import { eCloseLoginDialog, eOpenLoginDialog } from '../../utils/events';
+import { sleep } from '../../utils/time';
+import BaseDialog from '../dialog/base-dialog';
+import { Toast } from '../toast';
 import { Login } from './login';
 import { Signup } from './signup';
 
diff --git a/apps/mobile/src/components/Auth/login.js b/apps/mobile/src/components/auth/login.js
similarity index 90%
rename from apps/mobile/src/components/Auth/login.js
rename to apps/mobile/src/components/auth/login.js
index 548649c36..9260c799d 100644
--- a/apps/mobile/src/components/Auth/login.js
+++ b/apps/mobile/src/components/auth/login.js
@@ -9,18 +9,18 @@ import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManage
 import { clearMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import { db } from '../../utils/database';
-import { eCloseLoginDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import Input from '../Input';
-import { SvgToPngView } from '../ListPlaceholders';
-import { BouncingView } from '../Transitions/bouncing-view';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseLoginDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import Input from '../ui/input';
+import { SvgView } from '../ui/svg';
+import { BouncingView } from '../ui/transitions/bouncing-view';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { SVG } from './background';
 import { ForgotPassword } from './forgot-password';
 
@@ -101,7 +101,7 @@ export const Login = ({ changeMode }) => {
 
   return (
     <>
-      <ActionIcon
+      <IconButton
         name="arrow-left"
         onPress={() => {
           eSendEvent(eCloseLoginDialog);
@@ -134,7 +134,7 @@ export const Login = ({ changeMode }) => {
           }}
         >
           <BouncingView initialScale={1.2} duration={5000}>
-            <SvgToPngView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
+            <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
           </BouncingView>
         </View>
         <BouncingView initialScale={0.95} duration={3000}>
@@ -187,7 +187,7 @@ export const Login = ({ changeMode }) => {
               onErrorCheck={e => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
-              autoCompleteType="email"
+              autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"
@@ -205,7 +205,7 @@ export const Login = ({ changeMode }) => {
               returnKeyLabel="Done"
               returnKeyType="done"
               secureTextEntry
-              autoCompleteType="password"
+              autoComplete="password"
               autoCapitalize="none"
               validationType="password"
               autoCorrect={false}
diff --git a/apps/mobile/src/components/Auth/sessionexpired.js b/apps/mobile/src/components/auth/sessionexpired.js
similarity index 91%
rename from apps/mobile/src/components/Auth/sessionexpired.js
rename to apps/mobile/src/components/auth/sessionexpired.js
index d6378dbaf..e60d360ab 100644
--- a/apps/mobile/src/components/Auth/sessionexpired.js
+++ b/apps/mobile/src/components/auth/sessionexpired.js
@@ -14,17 +14,17 @@ import { clearMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import Sync from '../../services/Sync';
 import { db } from '../../utils/database';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import { presentDialog } from '../Dialog/functions';
-import Input from '../Input';
-import { Toast } from '../Toast';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import { presentDialog } from '../dialog/functions';
+import Input from '../ui/input';
+import { Toast } from '../toast';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 function getEmail(email) {
   if (!email) return null;
@@ -157,7 +157,7 @@ export const SessionExpired = () => {
               paddingVertical: 20
             }}
           >
-            <ActionIcon
+            <IconButton
               customStyle={{
                 width: 60,
                 height: 60
@@ -187,7 +187,7 @@ export const SessionExpired = () => {
             returnKeyLabel="Next"
             returnKeyType="next"
             secureTextEntry
-            autoCompleteType="password"
+            autoComplete="password"
             autoCapitalize="none"
             autoCorrect={false}
             placeholder="Password"
diff --git a/apps/mobile/src/components/Auth/signup.js b/apps/mobile/src/components/auth/signup.js
similarity index 91%
rename from apps/mobile/src/components/Auth/signup.js
rename to apps/mobile/src/components/auth/signup.js
index cb1391a13..ac259e2c6 100644
--- a/apps/mobile/src/components/Auth/signup.js
+++ b/apps/mobile/src/components/auth/signup.js
@@ -8,19 +8,19 @@ import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import { clearMessage, setEmailVerifyMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import { db } from '../../utils/database';
-import { eCloseLoginDialog } from '../../utils/Events';
+import { eCloseLoginDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import Input from '../Input';
-import { SvgToPngView } from '../ListPlaceholders';
-import { BouncingView } from '../Transitions/bouncing-view';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import umami from '../../utils/analytics';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import Input from '../ui/input';
+import { SvgView } from '../ui/svg';
+import { BouncingView } from '../ui/transitions/bouncing-view';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { SVG } from './background';
 
 export const Signup = ({ changeMode, welcome, trial }) => {
@@ -87,7 +87,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
   return (
     <>
       {!welcome && (
-        <ActionIcon
+        <IconButton
           name="arrow-left"
           onPress={() => {
             eSendEvent(eCloseLoginDialog);
@@ -119,7 +119,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
           }}
         >
           <BouncingView initialScale={1.2} duration={5000}>
-            <SvgToPngView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
+            <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
           </BouncingView>
         </View>
 
@@ -172,7 +172,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
               onErrorCheck={e => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
-              autoCompleteType="email"
+              autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"
@@ -190,7 +190,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
               returnKeyLabel="Next"
               returnKeyType="next"
               secureTextEntry
-              autoCompleteType="password"
+              autoComplete="password"
               autoCapitalize="none"
               validationType="password"
               autoCorrect={false}
@@ -206,7 +206,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
               returnKeyLabel="Signup"
               returnKeyType="done"
               secureTextEntry
-              autoCompleteType="password"
+              autoComplete="password"
               autoCapitalize="none"
               autoCorrect={false}
               validationType="confirmPassword"
diff --git a/apps/mobile/src/components/Container/ContainerTopSection.js b/apps/mobile/src/components/container/containerheader.js
similarity index 90%
rename from apps/mobile/src/components/Container/ContainerTopSection.js
rename to apps/mobile/src/components/container/containerheader.js
index f32397afb..c2ebf161b 100644
--- a/apps/mobile/src/components/Container/ContainerTopSection.js
+++ b/apps/mobile/src/components/container/containerheader.js
@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { useSelectionStore } from '../../provider/stores';
 
-export const ContainerTopSection = ({ children }) => {
+export const ContainerHeader = ({ children }) => {
   const [state] = useTracked();
   const { colors } = state;
   const selectionMode = useSelectionStore(state => state.selectionMode);
diff --git a/apps/mobile/src/components/Container/ContainerBottomButton.js b/apps/mobile/src/components/container/floatingbutton.js
similarity index 93%
rename from apps/mobile/src/components/Container/ContainerBottomButton.js
rename to apps/mobile/src/components/container/floatingbutton.js
index 6d2081505..9f24b81dd 100644
--- a/apps/mobile/src/components/Container/ContainerBottomButton.js
+++ b/apps/mobile/src/components/container/floatingbutton.js
@@ -6,11 +6,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
 import { useSelectionStore, useSettingStore } from '../../provider/stores';
 import { editing, getElevation, showTooltip, TOOLTIP_POSITIONS } from '../../utils';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
+import { normalize, SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
 
 const translateY = new Animated.Value(0);
-export const ContainerBottomButton = ({ title, onPress, color = 'accent', shouldShow = false }) => {
+export const FloatingButton = ({ title, onPress, color = 'accent', shouldShow = false }) => {
   const insets = useSafeAreaInsets();
   const deviceMode = useSettingStore(state => state.deviceMode);
   const selectionMode = useSelectionStore(state => state.selectionMode);
diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/container/index.js
similarity index 90%
rename from apps/mobile/src/components/Container/index.js
rename to apps/mobile/src/components/container/index.js
index 82d831dee..b275e52e3 100644
--- a/apps/mobile/src/components/Container/index.js
+++ b/apps/mobile/src/components/container/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { KeyboardAvoidingView, Platform, SafeAreaView } from 'react-native';
 import { useTracked } from '../../provider';
-import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
+import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
 export const Container = ({ children }) => {
   const [state] = useTracked();
   const { colors } = state;
diff --git a/apps/mobile/src/components/Dialog/BaseDialog.js b/apps/mobile/src/components/dialog/BaseDialog.js
similarity index 94%
rename from apps/mobile/src/components/Dialog/BaseDialog.js
rename to apps/mobile/src/components/dialog/BaseDialog.js
index df5d497bd..6c4ab85da 100644
--- a/apps/mobile/src/components/Dialog/BaseDialog.js
+++ b/apps/mobile/src/components/dialog/BaseDialog.js
@@ -9,8 +9,8 @@ import {
   View
 } from 'react-native';
 import { useSettingStore } from '../../provider/stores';
-import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
-import { BouncingView } from '../Transitions/bouncing-view';
+import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
+import { BouncingView } from '../ui/transitions/bouncing-view';
 
 const BaseDialog = ({
   visible,
diff --git a/apps/mobile/src/components/Dialog/DialogButtons.js b/apps/mobile/src/components/dialog/DialogButtons.js
similarity index 94%
rename from apps/mobile/src/components/Dialog/DialogButtons.js
rename to apps/mobile/src/components/dialog/DialogButtons.js
index d123406fa..abcaddeda 100644
--- a/apps/mobile/src/components/Dialog/DialogButtons.js
+++ b/apps/mobile/src/components/dialog/DialogButtons.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Paragraph from '../ui/typography/paragraph';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
 
diff --git a/apps/mobile/src/components/Dialog/DialogContainer.js b/apps/mobile/src/components/dialog/DialogContainer.js
similarity index 100%
rename from apps/mobile/src/components/Dialog/DialogContainer.js
rename to apps/mobile/src/components/dialog/DialogContainer.js
diff --git a/apps/mobile/src/components/Dialog/DialogHeader.js b/apps/mobile/src/components/dialog/DialogHeader.js
similarity index 91%
rename from apps/mobile/src/components/Dialog/DialogHeader.js
rename to apps/mobile/src/components/dialog/DialogHeader.js
index 97d11e7ac..90fc15660 100644
--- a/apps/mobile/src/components/Dialog/DialogHeader.js
+++ b/apps/mobile/src/components/dialog/DialogHeader.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { Text } from 'react-native';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const DialogHeader = ({
   icon,
diff --git a/apps/mobile/src/components/Dialog/functions.ts b/apps/mobile/src/components/dialog/functions.ts
similarity index 98%
rename from apps/mobile/src/components/Dialog/functions.ts
rename to apps/mobile/src/components/dialog/functions.ts
index 9306cc7e9..9b41436e5 100644
--- a/apps/mobile/src/components/Dialog/functions.ts
+++ b/apps/mobile/src/components/dialog/functions.ts
@@ -1,5 +1,5 @@
 import { eSendEvent } from '../../services/EventManager';
-import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/Events';
+import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/events';
 
 type DialogInfo = {
   title?: string;
diff --git a/apps/mobile/src/components/Dialog/index.js b/apps/mobile/src/components/dialog/index.js
similarity index 52%
rename from apps/mobile/src/components/Dialog/index.js
rename to apps/mobile/src/components/dialog/index.js
index 4bdaa9314..495a61a5e 100644
--- a/apps/mobile/src/components/Dialog/index.js
+++ b/apps/mobile/src/components/dialog/index.js
@@ -4,11 +4,11 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/Events';
-import { sleep } from '../../utils/TimeUtils';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
+import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/events';
+import { sleep } from '../../utils/time';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
 import BaseDialog from './base-dialog';
 import DialogButtons from './dialog-buttons';
 import DialogHeader from './dialog-header';
@@ -84,66 +84,64 @@ export const Dialog = ({ context = 'global' }) => {
     paddingTop: 12
   };
 
-  return (
-    visible && (
-      <BaseDialog
-        statusBarTranslucent={false}
-        bounce={!dialogInfo.input}
-        closeOnTouch={!dialogInfo.disableBackdropClosing}
-        onShow={async () => {
-          if (dialogInfo.input) {
-            inputRef.current?.setNativeProps({
-              text: dialogInfo.defaultValue
-            });
-            await sleep(300);
-            inputRef.current?.focus();
-          }
-        }}
-        visible={true}
-        onRequestClose={hide}
-      >
-        <View style={style}>
-          <DialogHeader
-            title={dialogInfo.title}
-            icon={dialogInfo.icon}
-            paragraph={dialogInfo.paragraph}
-            paragraphColor={dialogInfo.paragraphColor}
-            padding={12}
-          />
-          <Seperator half />
+  return visible ? (
+    <BaseDialog
+      statusBarTranslucent={false}
+      bounce={!dialogInfo.input}
+      closeOnTouch={!dialogInfo.disableBackdropClosing}
+      onShow={async () => {
+        if (dialogInfo.input) {
+          inputRef.current?.setNativeProps({
+            text: dialogInfo.defaultValue
+          });
+          await sleep(300);
+          inputRef.current?.focus();
+        }
+      }}
+      visible={true}
+      onRequestClose={hide}
+    >
+      <View style={style}>
+        <DialogHeader
+          title={dialogInfo.title}
+          icon={dialogInfo.icon}
+          paragraph={dialogInfo.paragraph}
+          paragraphColor={dialogInfo.paragraphColor}
+          padding={12}
+        />
+        <Seperator half />
 
-          {dialogInfo.input ? (
-            <View
-              style={{
-                paddingHorizontal: 12
+        {dialogInfo.input ? (
+          <View
+            style={{
+              paddingHorizontal: 12
+            }}
+          >
+            <Input
+              fwdRef={inputRef}
+              autoCapitalize="none"
+              onChangeText={value => {
+                setInputValue(value);
               }}
-            >
-              <Input
-                fwdRef={inputRef}
-                autoCapitalize="none"
-                onChangeText={value => {
-                  setInputValue(value);
-                }}
-                secureTextEntry={dialogInfo.secureTextEntry}
-                //defaultValue={dialogInfo.defaultValue}
-                onSubmit={onPressPositive}
-                returnKeyLabel="Done"
-                returnKeyType="done"
-                placeholder={dialogInfo.inputPlaceholder}
-              />
-            </View>
-          ) : null}
+              secureTextEntry={dialogInfo.secureTextEntry}
+              //defaultValue={dialogInfo.defaultValue}
+              onSubmit={onPressPositive}
+              returnKeyLabel="Done"
+              returnKeyType="done"
+              placeholder={dialogInfo.inputPlaceholder}
+            />
+          </View>
+        ) : null}
 
-          <DialogButtons
-            onPressNegative={onNegativePress}
-            onPressPositive={dialogInfo.positivePress && onPressPositive}
-            positiveTitle={dialogInfo.positiveText}
-            negativeTitle={dialogInfo.negativeText}
-            positiveType={dialogInfo.positiveType}
-          />
-        </View>
-        <Toast context="local" />
-      </BaseDialog>
-    )
-  );
+        <DialogButtons
+          onPressNegative={onNegativePress}
+          onPressPositive={dialogInfo.positivePress && onPressPositive}
+          positiveTitle={dialogInfo.positiveText}
+          negativeTitle={dialogInfo.negativeText}
+          positiveType={dialogInfo.positiveType}
+        />
+      </View>
+      <Toast context="local" />
+    </BaseDialog>
+  ) : null;
 };
diff --git a/apps/mobile/src/components/DialogManager/Recievers.js b/apps/mobile/src/components/dialogprovider/Recievers.js
similarity index 97%
rename from apps/mobile/src/components/DialogManager/Recievers.js
rename to apps/mobile/src/components/dialogprovider/Recievers.js
index 1a8ec9fad..2dcf5048a 100644
--- a/apps/mobile/src/components/DialogManager/Recievers.js
+++ b/apps/mobile/src/components/dialogprovider/Recievers.js
@@ -9,7 +9,7 @@ import {
   eOpenAddNotebookDialog,
   eOpenAddTopicDialog,
   eOpenMoveNoteDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 
 export const ActionSheetEvent = (item, buttons) => {
   eSendEvent(eOpenActionSheet, {
diff --git a/apps/mobile/src/components/dialogprovider/index.js b/apps/mobile/src/components/dialogprovider/index.js
new file mode 100644
index 000000000..dbebad159
--- /dev/null
+++ b/apps/mobile/src/components/dialogprovider/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import { EditorSettings } from '../../views/Editor/EditorSettings';
+import { AddNotebookDialog } from '../AddNotebookDialog';
+import { AddTopicDialog } from '../AddTopicDialog';
+import { AnnouncementDialog } from '../Announcements';
+import { AttachmentDialog } from '../AttachmentDialog';
+import Auth from '../auth';
+import { SessionExpired } from '../auth/session-expired';
+import { Dialog } from '../dialog';
+import ExportDialog from '../ExportDialog';
+import ImagePreview from '../image-preview';
+import MergeEditor from '../MergeEditor';
+import MoveNoteDialog from '../MoveNoteDialog';
+import PremiumDialog from '../premium';
+import { Expiring } from '../premium/expiring';
+import PublishNoteDialog from '../PublishNoteDialog';
+import RateDialog from '../RateDialog';
+import RecoveryKeyDialog from '../RecoveryKeyDialog';
+import RestoreDialog from '../RestoreDialog';
+import ResultDialog from '../ResultDialog';
+import SheetProvider from '../sheet-provider';
+import TagsDialog from '../TagsDialog';
+import { VaultDialog } from '../VaultDialog';
+
+function DialogProvider() {
+  const [state] = useTracked();
+  const { colors } = state;
+
+  return (
+    <>
+      <Dialog context="global" />
+      <AddTopicDialog colors={colors} />
+      <AddNotebookDialog colors={colors} />
+      <PremiumDialog colors={colors} />
+      <Auth colors={colors} />
+      <MergeEditor />
+      <ExportDialog />
+      <RecoveryKeyDialog colors={colors} />
+      <SheetProvider />
+      <RestoreDialog />
+      <ResultDialog />
+      <VaultDialog colors={colors} />
+      <MoveNoteDialog colors={colors} />
+      <RateDialog />
+      <ImagePreview />
+      <EditorSettings />
+      <PublishNoteDialog />
+      <TagsDialog />
+      <AttachmentDialog />
+      <Expiring />
+      <AnnouncementDialog />
+      <SessionExpired />
+    </>
+  );
+}
+
+export default React.memo(DialogProvider, () => true);
diff --git a/apps/mobile/src/components/Header/index.js b/apps/mobile/src/components/header/index.js
similarity index 86%
rename from apps/mobile/src/components/Header/index.js
rename to apps/mobile/src/components/header/index.js
index c5f583629..aeef40dc9 100644
--- a/apps/mobile/src/components/Header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -4,11 +4,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import SearchService from '../../services/SearchService';
-import { eScrollEvent } from '../../utils/Events';
-import { ActionIcon } from '../ActionIcon';
+import { eScrollEvent } from '../../utils/events';
+import { IconButton } from '../ui/icon-button';
 import { SearchInput } from '../SearchInput';
-import { HeaderLeftMenu } from './HeaderLeftMenu';
-import { HeaderRightMenu } from './HeaderRightMenu';
+import { LeftMenus } from './left-menus';
+import { RightMenus } from './right-menus';
 import { Title } from './title';
 
 export const Header = React.memo(
@@ -49,7 +49,7 @@ export const Header = React.memo(
         ]}
       >
         <View style={styles.leftBtnContainer}>
-          <HeaderLeftMenu headerMenuState={!isBack} currentScreen={screen} />
+          <LeftMenus headerMenuState={!isBack} currentScreen={screen} />
 
           <Title
             notebook={notebook}
@@ -60,7 +60,7 @@ export const Header = React.memo(
           />
         </View>
 
-        <HeaderRightMenu rightButtons={rightButtons} action={action} currentScreen={screen} />
+        <RightMenus rightButtons={rightButtons} action={action} currentScreen={screen} />
       </View>
     );
   },
diff --git a/apps/mobile/src/components/Header/HeaderLeftMenu.js b/apps/mobile/src/components/header/leftmenus.js
similarity index 88%
rename from apps/mobile/src/components/Header/HeaderLeftMenu.js
rename to apps/mobile/src/components/header/leftmenus.js
index 1aca3f90e..e151efa02 100644
--- a/apps/mobile/src/components/Header/HeaderLeftMenu.js
+++ b/apps/mobile/src/components/header/leftmenus.js
@@ -4,10 +4,9 @@ import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import Navigation from '../../services/Navigation';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
+import { IconButton } from '../ui/icon-button';
 
-export const HeaderLeftMenu = ({ currentScreen, headerMenuState }) => {
+export const LeftMenus = ({ currentScreen, headerMenuState }) => {
   const [state] = useTracked();
   const { colors } = state;
   const deviceMode = useSettingStore(state => state.deviceMode);
@@ -23,7 +22,7 @@ export const HeaderLeftMenu = ({ currentScreen, headerMenuState }) => {
   return (
     <>
       {deviceMode !== 'tablet' || currentScreen === 'Search' || !headerMenuState ? (
-        <ActionIcon
+        <IconButton
           testID={notesnook.ids.default.header.buttons.left}
           customStyle={{
             justifyContent: 'center',
diff --git a/apps/mobile/src/components/Header/HeaderRightMenu.js b/apps/mobile/src/components/header/rightmenus.js
similarity index 86%
rename from apps/mobile/src/components/Header/HeaderRightMenu.js
rename to apps/mobile/src/components/header/rightmenus.js
index 978b4a677..fb795c9ea 100644
--- a/apps/mobile/src/components/Header/HeaderRightMenu.js
+++ b/apps/mobile/src/components/header/rightmenus.js
@@ -1,17 +1,15 @@
 import React, { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Menu, { MenuItem } from 'react-native-reanimated-material-menu';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Menu from 'react-native-reanimated-material-menu';
 import { notesnook } from '../../../e2e/test.ids';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import Navigation from '../../services/Navigation';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { IconButton } from '../ui/icon-button';
 
-export const HeaderRightMenu = ({ currentScreen, action, rightButtons }) => {
+export const RightMenus = ({ currentScreen, action, rightButtons }) => {
   const [state] = useTracked();
   const { colors } = state;
   const deviceMode = useSettingStore(state => state.deviceMode);
@@ -19,7 +17,7 @@ export const HeaderRightMenu = ({ currentScreen, action, rightButtons }) => {
   return (
     <View style={styles.rightBtnContainer}>
       {currentScreen !== 'Settings' ? (
-        <ActionIcon
+        <IconButton
           onPress={async () => {
             Navigation.navigate('Search', {
               menu: false
@@ -65,7 +63,7 @@ export const HeaderRightMenu = ({ currentScreen, action, rightButtons }) => {
             backgroundColor: colors.bg
           }}
           button={
-            <ActionIcon
+            <IconButton
               onPress={() => {
                 menuRef.current?.show();
               }}
diff --git a/apps/mobile/src/components/Header/title.js b/apps/mobile/src/components/header/title.js
similarity index 90%
rename from apps/mobile/src/components/Header/title.js
rename to apps/mobile/src/components/header/title.js
index d0cab1391..778cd32e1 100644
--- a/apps/mobile/src/components/Header/title.js
+++ b/apps/mobile/src/components/header/title.js
@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { eOnNewTopicAdded, eScrollEvent } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eOnNewTopicAdded, eScrollEvent } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Title = ({ heading, headerColor, screen, notebook }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/ImagePreview/index.js b/apps/mobile/src/components/imagepreview/index.js
similarity index 92%
rename from apps/mobile/src/components/ImagePreview/index.js
rename to apps/mobile/src/components/imagepreview/index.js
index 5e8f1f660..811c21fad 100644
--- a/apps/mobile/src/components/ImagePreview/index.js
+++ b/apps/mobile/src/components/imagepreview/index.js
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import RNFetchBlob from 'rn-fetch-blob';
-import Storage from '../../utils/storage';
-import { ActionIcon } from '../ActionIcon';
-import BaseDialog from '../Dialog/base-dialog';
+import Storage from '../../utils/database/storage';
+import { IconButton } from '../ui/icon-button';
+import BaseDialog from '../dialog/base-dialog';
 const { eSubscribeEvent, eUnSubscribeEvent } = require('../../services/EventManager');
 
 const ImagePreview = () => {
@@ -62,7 +62,7 @@ const ImagePreview = () => {
                   paddingTop: 30
                 }}
               >
-                <ActionIcon
+                <IconButton
                   name="close"
                   color="white"
                   onPress={() => {
diff --git a/apps/mobile/src/components/SplashScreen/index.js b/apps/mobile/src/components/intro/index.js
similarity index 96%
rename from apps/mobile/src/components/SplashScreen/index.js
rename to apps/mobile/src/components/intro/index.js
index 8ba76f552..fd4e9835c 100644
--- a/apps/mobile/src/components/SplashScreen/index.js
+++ b/apps/mobile/src/components/intro/index.js
@@ -1,30 +1,28 @@
-import React, { useEffect, useState } from 'react';
-import { Dimensions, Image, View, TouchableOpacity, useWindowDimensions } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import React, { useEffect } from 'react';
+import { Dimensions, Image, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import Animated, { Easing, timing, useValue } from 'react-native-reanimated';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
-import { dHeight, getElevation } from '../../utils';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { Button } from '../Button';
-import { SvgToPngView } from '../ListPlaceholders';
-import { BouncingView } from '../Transitions/bouncing-view';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
 import SettingsService from '../../services/SettingsService';
+import { getElevation } from '../../utils';
+import umami from '../../utils/analytics';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import AppLock from '../../views/Settings/app-lock';
-import { eSendEvent } from '../../services/EventManager';
-import { eOpenLoginDialog } from '../../utils/Events';
+import { Button } from '../ui/button';
+import { SvgView } from '../ui/svg';
+import { BouncingView } from '../ui/transitions/bouncing-view';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 let SVG_D = `<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="485.83373" height="483.5" viewBox="0 0 485.83373 483.5" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M677.54186,336.34717H597.80041a11.47812,11.47812,0,0,1-9.06567-4.39356h0a11.62154,11.62154,0,0,1-2.17652-9.96777,201.63052,201.63052,0,0,0-.00049-93.647,11.62425,11.62425,0,0,1,2.17676-9.96729,11.47753,11.47753,0,0,1,9.06592-4.39355h79.74145a11.6235,11.6235,0,0,1,11.439,9.75537,337.96108,337.96108,0,0,1,0,102.8584A11.6235,11.6235,0,0,1,677.54186,336.34717Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M597.80041,219.978a5.51264,5.51264,0,0,0-4.35449,2.1084,5.65943,5.65943,0,0,0-1.05371,4.85351,207.656,207.656,0,0,1,.00048,96.44531,5.65638,5.65638,0,0,0,1.053,4.85254l.00049.00049a5.5112,5.5112,0,0,0,4.35425,2.10889h79.74145a5.58248,5.58248,0,0,0,5.50879-4.667,331.9854,331.9854,0,0,0,0-101.03516,5.58248,5.58248,0,0,0-5.50879-4.667Z" transform="translate(-357.08314 -208.25)" fill="#fff"/><path d="M660.14054,248.82872h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00633,6.00633,0,0,1,5.99977-5.99977h41.845a6.00633,6.00633,0,0,1,5.99976,5.99977V242.829A6.00632,6.00632,0,0,1,660.14054,248.82872Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M660.14054,278.4545h-41.845a6.00632,6.00632,0,0,1-5.99977-5.99976V270.1101a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34464A6.00632,6.00632,0,0,1,660.14054,278.4545Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M660.14054,308.08029h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34463A6.00632,6.00632,0,0,1,660.14054,308.08029Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M827.54186,412.34717H747.80041a11.47812,11.47812,0,0,1-9.06567-4.39356h0a11.62154,11.62154,0,0,1-2.17652-9.96777,201.63052,201.63052,0,0,0-.00049-93.647,11.62425,11.62425,0,0,1,2.17676-9.96729,11.47753,11.47753,0,0,1,9.06592-4.39355h79.74145a11.6235,11.6235,0,0,1,11.439,9.75537,337.96108,337.96108,0,0,1,0,102.8584A11.6235,11.6235,0,0,1,827.54186,412.34717Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M747.80041,295.978a5.51264,5.51264,0,0,0-4.35449,2.1084,5.65943,5.65943,0,0,0-1.05371,4.85351,207.656,207.656,0,0,1,.00048,96.44531,5.65638,5.65638,0,0,0,1.053,4.85254l.00049.00049a5.5112,5.5112,0,0,0,4.35425,2.10889h79.74145a5.58248,5.58248,0,0,0,5.50879-4.667,331.9854,331.9854,0,0,0,0-101.03516,5.58248,5.58248,0,0,0-5.50879-4.667Z" transform="translate(-357.08314 -208.25)" fill="#fff"/><path d="M668.54186,498.84717H588.80041a11.97546,11.97546,0,0,1-9.45825-4.584,12.1192,12.1192,0,0,1-2.27-10.394,201.13112,201.13112,0,0,0-.00049-93.41357,12.12077,12.12077,0,0,1,2.27026-10.39356,11.97561,11.97561,0,0,1,9.4585-4.584h79.74145a12.12667,12.12667,0,0,1,11.93311,10.1792,338.45925,338.45925,0,0,1,0,103.01074A12.12668,12.12668,0,0,1,668.54186,498.84717Z" transform="translate(-357.08314 -208.25)" fill="#f2f2f2"/><path d="M810.14054,339.82872h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00633,6.00633,0,0,1,5.99977-5.99977h41.845a6.00633,6.00633,0,0,1,5.99976,5.99977V333.829A6.00632,6.00632,0,0,1,810.14054,339.82872Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M810.14054,369.4545h-41.845a6.00632,6.00632,0,0,1-5.99977-5.99976V361.1101a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34464A6.00632,6.00632,0,0,1,810.14054,369.4545Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><circle cx="271.81102" cy="228.5" r="23" fill="#fff"/><path d="M639.89416,433.75h-8v-8a3,3,0,0,0-6,0v8h-8a3,3,0,0,0,0,6h8v8a3,3,0,0,0,6,0v-8h8a3,3,0,0,0,0-6Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M657.89416,225.25h-42a4.50508,4.50508,0,0,1-4.5-4.5v-8a4.50508,4.50508,0,0,1,4.5-4.5h42a4.50508,4.50508,0,0,1,4.5,4.5v8A4.50508,4.50508,0,0,1,657.89416,225.25Z" transform="translate(-357.08314 -208.25)" fill="#ccc"/><path d="M809.89416,302.25h-42a4.50508,4.50508,0,0,1-4.5-4.5v-8a4.50508,4.50508,0,0,1,4.5-4.5h42a4.50508,4.50508,0,0,1,4.5,4.5v8A4.50508,4.50508,0,0,1,809.89416,302.25Z" transform="translate(-357.08314 -208.25)" fill="#ccc"/><polygon points="88.596 471.061 100.856 471.061 104.689 423.773 88.594 423.773 88.596 471.061" fill="#ffb8b8"/><path d="M442.55234,675.30845l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38647,15.38623v.5l-39.53051.00146Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><polygon points="22.596 471.061 34.856 471.061 40.689 423.773 22.594 423.773 22.596 471.061" fill="#ffb8b8"/><path d="M376.55234,675.30845l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38647,15.38623v.5l-39.53051.00146Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><path d="M381.85436,664.37256a4.98141,4.98141,0,0,1-3.375-1.31836h0a4.961,4.961,0,0,1-1.61572-3.53711L371.947,483.30371l69.81115,17.45215,21.53955,64.61768a70.461,70.461,0,0,1,3.54541,25.82421l-2.67456,62.63672a4.996,4.996,0,0,1-4.99438,4.75879h-11.709a5.02349,5.02349,0,0,1-4.95483-4.32959l-8.3689-69.1416a37.82338,37.82338,0,0,0-5.53173-15.16406l-16.46949-26.07617a1.00011,1.00011,0,0,0-1.83764.41015L397.378,659.38037a4.99328,4.99328,0,0,1-4.687,4.39649l-10.552.58691C382.04406,664.36914,381.94934,664.37256,381.85436,664.37256Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><circle cx="73.05767" cy="136.40609" r="24.56103" fill="#ffb8b8"/><path d="M441.4237,507.92236a5.07628,5.07628,0,0,1-1.25293-.15918H440.17l-69.26428-17.75976a4.9985,4.9985,0,0,1-3.66285-5.81543L383.15,398.49707a31.21377,31.21377,0,0,1,18.24975-22.53955,30.11308,30.11308,0,0,1,28.26563,2.07519c.96973.605,1.94653,1.26465,2.90259,1.96094a30.96046,30.96046,0,0,1,12.57885,24.5293l1.2649,98.32861a5.00656,5.00656,0,0,1-4.988,5.0708Z" transform="translate(-357.08314 -208.25)" fill="#f0f0f0"/><path d="M378.03248,508.93008a10.05576,10.05576,0,0,1,4.214-14.83233l-3.08079-35.6018,16.326,8.84848.42262,32.4515a10.11027,10.11027,0,0,1-17.8818,9.13415Z" transform="translate(-357.08314 -208.25)" fill="#ffb8b8"/><path d="M383.86511,489.38916a5.53224,5.53224,0,0,1-1.36573-.17285,5.49559,5.49559,0,0,1-3.97192-3.98633l-8.02319-31.88379a47.37028,47.37028,0,0,1,3.76123-33.13476l16.80884-32.88184a15.54083,15.54083,0,0,1,18.8081-11.01855,15.35574,15.35574,0,0,1,9.47485,7.10058,15.56707,15.56707,0,0,1,1.65406,11.91309l-23.92749,53.50586.28418,32.03564a5.5186,5.5186,0,0,1-3.58448,5.20459l-8.00732,2.97363A5.48,5.48,0,0,1,383.86511,489.38916Z" transform="translate(-357.08314 -208.25)" fill="#f0f0f0"/><path d="M498.40087,495.83467a10.05578,10.05578,0,0,1-8.493-12.86954l-28.99341-20.88926,17.35654-6.60182,24.8717,20.84893a10.11027,10.11027,0,0,1-4.74186,19.51169Z" transform="translate(-357.08314 -208.25)" fill="#ffb8b8"/><path d="M483.223,480.58057a5.52249,5.52249,0,0,1-2.46265-.58155L451.3612,465.28174a47.381,47.381,0,0,1-22.66064-24.46533L414.74328,406.626a15.54363,15.54363,0,0,1,3.91772-21.44434,15.35158,15.35158,0,0,1,11.59034-2.54346,15.56975,15.56975,0,0,1,10.08081,6.51221l24.94507,53.03955L489.743,462.87256a5.51764,5.51764,0,0,1,1.60669,6.11182l-2.96973,8.0083a5.474,5.474,0,0,1-2.00684,2.59619,5.49717,5.49717,0,0,1-3.15014.9917Z" transform="translate(-357.08314 -208.25)" fill="#f0f0f0"/><path d="M424.98332,369.5931c1.305.571,3.97732-9.82732,2.78025-11.90707-1.78025-3.09293-1.675-3.07072-2.85681-5.117s-1.44623-4.84712.08417-6.64761,5.072-1.56163,5.77042.69581c-.4493-4.2878,3.79189-7.73454,7.993-8.70313s8.63244-.36723,12.85668-1.22917c4.90243-1.00032,10.00316-5.10972,8.04719-10.5007a7.5931,7.5931,0,0,0-1.48106-2.43408c-2.25993-2.54094-5.42117-3.62594-8.512-4.675-6.43006-2.18246-13.036-4.39233-19.82212-4.15141A28.7977,28.7977,0,0,0,404.3967,333.533a26.15571,26.15571,0,0,0-1.08344,4.02534c-2.32924,12.52423,4.94368,24.87794,16.75623,29.64715Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><polygon points="38.9 273.343 39.457 240.414 56.9 205.343 42.9 241.343 38.9 273.343" opacity="0.2"/><path d="M554.16035,564.23244,480.522,533.63692a11.47817,11.47817,0,0,1-6.68609-7.53565h0a11.62155,11.62155,0,0,1,1.81454-10.04,201.63062,201.63062,0,0,0,35.9304-86.47983,11.62422,11.62422,0,0,1,5.83445-8.36925,11.47751,11.47751,0,0,1,10.05779-.57884l73.63839,30.59552a11.62349,11.62349,0,0,1,6.8205,13.39769,337.96147,337.96147,0,0,1-39.46512,94.98607A11.6235,11.6235,0,0,1,554.16035,564.23244Z" transform="translate(-357.08314 -208.25)" fill="#e6e6e6"/><path d="M525.17093,426.17415a5.51263,5.51263,0,0,0-4.83017.27629,5.65945,5.65945,0,0,0-2.83529,4.07775,207.65608,207.65608,0,0,1-37.00407,89.064,5.65636,5.65636,0,0,0-.88946,4.88515l.00027.00064a5.51116,5.51116,0,0,0,3.21185,3.61814l73.63839,30.59552a5.58247,5.58247,0,0,0,6.87782-2.19616,331.98566,331.98566,0,0,0,38.76558-93.30238,5.58248,5.58248,0,0,0-3.29652-6.42343Z" transform="translate(-357.08314 -208.25)" fill="#fff"/><path d="M564.38028,494.28148l-38.6424-16.05527a6.00633,6.00633,0,0,1-3.23855-7.84259l.8996-2.16518a6.00632,6.00632,0,0,1,7.84258-3.23856l38.6424,16.05527a6.00634,6.00634,0,0,1,3.23855,7.84259l-.8996,2.16518A6.00632,6.00632,0,0,1,564.38028,494.28148Z" transform="translate(-357.08314 -208.25)" fill="#808080"/><path d="M553.01334,521.63984l-38.6424-16.05527a6.00633,6.00633,0,0,1-3.23855-7.84259l.89959-2.16518a6.00634,6.00634,0,0,1,7.84259-3.23856L558.517,508.39351a6.00633,6.00633,0,0,1,3.23856,7.84258l-.8996,2.16519A6.00632,6.00632,0,0,1,553.01334,521.63984Z" transform="translate(-357.08314 -208.25)" fill="#808080"/><path d="M579.86437,455.832a4.48944,4.48944,0,0,1-1.68725-.33057l-38.938-15.74267a4.50518,4.50518,0,0,1-2.48535-5.8584l2.99878-7.417a4.50027,4.50027,0,0,1,5.85864-2.48486l38.938,15.74267a4.50518,4.50518,0,0,1,2.48535,5.8584l-2.99878,7.417a4.51079,4.51079,0,0,1-4.17139,2.81543Z" transform="translate(-357.08314 -208.25)" fill="#ccc"/><path d="M498.08314,691.75h-140a1,1,0,1,1,0-2h140a1,1,0,0,1,0,2Z" transform="translate(-357.08314 -208.25)" fill="#ccc"/></svg>`;
 
 const SVG_Z = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245.487 113.9115"><g transform="translate(15.9581 -70.1437)"><path fill="#f2f2f2" d="M181.8672 183.796H88.3134v-54.8973l-.43-.2765 15.1857-14.7907a41.4878 41.4878 0 0 1 28.6939-11.8174l27.916-.2551.04.0477 22.2131 26.426-.0655.7316z" style="stroke-width:.264583"/><path fill="#fff" d="M105.9334 112.1178h55.9519v.5292h-55.9519zM100.3772 117.6741h55.9519v.5292h-55.9519z" style="stroke-width:.264583"/><path fill="#fff" d="M178.6826 154.0514h10.1706v8.9897h-10.1706z" data-name="Rectangle 371" style="stroke-width:.264583"/><path fill="#fff" d="M178.6826 138.4916h10.1706v8.8471h-10.1706z" data-name="Rectangle 372" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M166.653 102.649h9.1202v31.5648h-9.1202z" style="stroke-width:.264583"/><path fill="#e6e6e6" d="M181.8672 183.7957h-50.0656v-36.3798a35.3975 35.3975 0 0 1 8.4588-22.9515l19.3804-22.7213 22.2264 26.4599z" style="stroke-width:.264583"/><path fill="#fff" d="M155.3064 156.4369h10.1706v8.9897h-10.1706z" data-name="Rectangle 374" style="stroke-width:.264583"/><path fill="#fff" d="M155.3064 140.8768h10.1706v8.8471h-10.1706z" data-name="Rectangle 375" style="stroke-width:.264583"/><path fill="#fff" d="M106.7252 154.0514h10.1706v8.9897h-10.1706z" data-name="Rectangle 378" style="stroke-width:.264583"/><path fill="#fff" d="M106.7252 138.4916h10.1706v8.8471h-10.1706z" data-name="Rectangle 379" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M91.7626 85.332h11.0675v38.3117H91.7626z" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M110.199 183.7954H-3.295v-66.6167l-.5047-.325.119-.116 20.73-20.1916A41.863 41.863 0 0 1 46.0038 84.621l37.2782-.3406.0402.0477 26.9535 32.0651-.0773.8764z" style="stroke-width:.264583"/><path fill="#e6e6e6" d="M110.199 183.7954H49.4881V134.88a29.9322 29.9322 0 0 1 7.1528-19.408l26.6087-31.1956 26.9492 32.0815Z" style="stroke-width:.264583"/><path fill="#fff" d="M80.3413 150.6172h9.8174v8.6775h-9.8174zM80.3413 135.5359h9.8174v8.6775h-9.8174z" data-name="Rectangle 381" style="stroke-width:.264583"/><path fill="#fff" d="M19.0243 147.7216H31.369v10.9112H19.0243z" data-name="Rectangle 385" style="stroke-width:.264583"/><path fill="#fff" d="M19.0243 128.8356H31.369v10.7381H19.0243z" data-name="Rectangle 386" style="stroke-width:.264583"/><ellipse cx="20.8891" cy="154.324" fill="#3f3d56" data-name="Ellipse 519" rx="8.7979" ry="17.9515" style="stroke-width:.264583"/><path fill="#808080" d="M21.7016 183.7075c-3.5237-21.1402-.0354-42.2063 0-42.4164l.6856.1162c-.0355.209-3.5036 21.1635 0 42.1862z" data-name="Path 2702" style="fill:#999;stroke-width:.264583"/><path fill="#808080" d="M-54.7406 146.1809h9.0223v.6953h-9.0223z" data-name="Rectangle 388" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-28.142)"/><path fill="#808080" d="M-129.2795 83.128h.6953v9.0226h-.6953z" data-name="Rectangle 389" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-61.842)"/><ellipse cx="-.4146" cy="141.6901" fill="#808080" data-name="Ellipse 520" rx="12.6968" ry="25.9067" style="fill:#333;stroke-width:.264583"/><path fill="#3f3d56" d="M.9996 184.0552c-5.0784-30.47-.0514-60.829 0-61.1323l.5056.0857c-.0513.3025-5.0636 30.5798 0 60.9624z" data-name="Path 2703" style="fill:#e6e6e6;stroke-width:.264583"/><path fill="#3f3d56" d="M-67.7316 125.3486h13.0209v.513h-13.0209z" data-name="Rectangle 390" style="fill:#ccc;stroke-width:.264583" transform="rotate(-28.142)"/><path fill="#3f3d56" d="M-129.3145 54.7885h.513v13.0209h-.513z" data-name="Rectangle 391" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-61.842)"/><path fill="#3f3d56" d="m159.149 89.5463 2.7831-2.2262c-2.1621-.2381-3.0506.9406-3.413 1.874-1.6892-.7014-3.5283.2178-3.5283.2178l5.5687 2.0217a4.2137 4.2137 0 0 0-1.4097-1.8876z" data-name="Path 2708" style="stroke-width:.264583"/><path fill="#3f3d56" d="m108.853 72.401 2.7831-2.2262c-2.1621-.2381-3.0506.9406-3.413 1.874-1.6892-.7013-3.5283.2178-3.5283.2178l5.5687 2.0217a4.214 4.214 0 0 0-1.4105-1.8873z" data-name="Path 2709" style="stroke-width:.264583"/><path fill="#3f3d56" d="m178.9044 76.546 2.7831-2.2262c-2.1622-.2381-3.0506.9406-3.4131 1.874-1.6891-.7014-3.5282.2178-3.5282.2178l5.5687 2.0217a4.2138 4.2138 0 0 0-1.4097-1.8876z" data-name="Path 2710" style="stroke-width:.264583"/><path fill="#3f3d56" d="M60.5922 179.896a4.2088 4.2088 0 0 0-2.1077.5656 4.5297 4.5297 0 0 0-7.567 3.365h13.8924a4.2299 4.2299 0 0 0-4.2174-3.9304z" data-name="Path 2712" style="stroke-width:.264583"/><path fill="#3f3d56" d="M132.852 179.896a4.2088 4.2088 0 0 0-2.1076.5656 4.5297 4.5297 0 0 0-7.5671 3.365h13.8925a4.2299 4.2299 0 0 0-4.2178-3.9307z" data-name="Path 2713" style="stroke-width:.264583"/><g fill="#3f3d56" data-name="Group 204"><path d="M97.2576 176.8633H77.5234v.6366h3.0777v6.0476h.6365v-6.0476H93.225v6.0476h.6365v-6.0476h3.396z" data-name="Path 2714"/><path d="M77.5623 174.9588h19.7342v.6366H77.5623z" data-name="Rectangle 400"/><path d="M77.5623 173.3674h19.7342v.6365H77.5623z" data-name="Rectangle 401"/></g><ellipse cx="215.2396" cy="158.3491" fill="#e6e6e6" data-name="Ellipse 525" rx="7.7041" ry="15.7197" style="stroke-width:.264583"/><path fill="#3f3d56" d="M214.3815 184.0552c3.0816-18.4886.031-36.9094 0-37.0946l-.3069.053c.031.1833 3.0726 18.5551 0 36.9908z" data-name="Path 2716" style="stroke-width:.264583"/><path fill="#3f3d56" d="M-38.7353 256.9106h.3115v7.9035h-.3115z" data-name="Rectangle 406" style="stroke-width:.264583" transform="rotate(-61.847)"/><path fill="#3f3d56" d="M114.2645 243.4071h7.9035v.3115h-7.9035z" data-name="Rectangle 407" style="stroke-width:.264583" transform="rotate(-28.153)"/><g fill="#3f3d56" data-name="Group 205"><path d="M169.5172 176.8633H149.783v.6366h3.0776v6.0476h.6366v-6.0476h11.9872v6.0476h.6366v-6.0476h3.396z" data-name="Path 2714-2"/><path d="M149.8219 174.9588h19.7342v.6366h-19.7342z" data-name="Rectangle 400-2"/><path d="M149.8219 173.3674h19.7342v.6365h-19.7342z" data-name="Rectangle 401-2"/></g><path fill="#f2f2f2" d="m90.2625 105.5306-2.3728-5.5049-4.763.085-2.8892 5.488.0583.0732h-.0208v11.4152h9.981v-11.4153zM164.4423 119.3093l-1.9175-4.0238-3.849.062-2.3348 4.0115.0471.0535h-.0168v8.3438h8.0658v-8.3438z" data-name="Path 2700" style="stroke-width:.264583"/><path fill="#fff" d="M10.3066 102.6488h55.9519v.5292H10.3066zM10.3066 103.178h55.9519v.5292H10.3066zM166.653 104.181h9.1202v.5292h-9.1202zM166.653 109.7372h9.1202v.5292h-9.1202zM91.7626 87.2476h11.0675v.5292H91.7626zM91.7626 92.8039h11.0675v.5292H91.7626z" style="stroke-width:.264583"/></g></svg>`;
 
-const SplashScreen = () => {
+const Intro = () => {
   const [state] = useTracked();
   const { colors } = state;
   const isIntroCompleted = useSettingStore(state => state.isIntroCompleted);
@@ -117,7 +115,7 @@ const SplashScreen = () => {
                 marginBottom: 100
               }}
             >
-              <SvgToPngView
+              <SvgView
                 width={height / 4 > 200 ? 200 : height / 4}
                 height={height / 4 > 200 ? 200 : height / 4}
                 src={SVG_D}
@@ -210,7 +208,7 @@ const SplashScreen = () => {
               }}
               duration={3000}
             >
-              <SvgToPngView
+              <SvgView
                 width={Dimensions.get('window').width}
                 height={Dimensions.get('window').width}
                 src={SVG_Z}
@@ -223,7 +221,7 @@ const SplashScreen = () => {
   );
 };
 
-export default SplashScreen;
+export default Intro;
 
 /**
  * 1. Welcome Screen
diff --git a/apps/mobile/src/components/SplashScreen/welcome.js b/apps/mobile/src/components/intro/welcome.js
similarity index 96%
rename from apps/mobile/src/components/SplashScreen/welcome.js
rename to apps/mobile/src/components/intro/welcome.js
index 7bd525f3d..7334f8985 100644
--- a/apps/mobile/src/components/SplashScreen/welcome.js
+++ b/apps/mobile/src/components/intro/welcome.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import { View } from 'react-native';
-import umami from '../../utils/umami';
+import umami from '../../utils/analytics';
 import { useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseProgressDialog, eOpenLoginDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import { SvgToPngView } from '../ListPlaceholders';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { sleep } from '../../utils/TimeUtils';
+import { eCloseProgressDialog, eOpenLoginDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { SvgView } from '../ui/svg';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { sleep } from '../../utils/time';
 const IMAGE = color =>
   `<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="1100.50064" height="691.70682" viewBox="0 0 1100.50064 691.70682" xmlns:xlink="http://www.w3.org/1999/xlink"><title>two_factor_authentication</title><path d="M1150.25032,388.23743h-1.85859V337.32194a29.4685,29.4685,0,0,0-29.46859-29.46853H1011.05186a29.4685,29.4685,0,0,0-29.46859,29.46853V616.64827a29.46851,29.46851,0,0,0,29.46859,29.46854h107.87128a29.46851,29.46851,0,0,0,29.46859-29.46854V424.47994h1.85859Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M1142.121,339.05342v278.92a22.01111,22.01111,0,0,1-22.01,22.01h-108.39a22.00248,22.00248,0,0,1-22-22.01v-278.92a22.00031,22.00031,0,0,1,22-22h13.15a10.4608,10.4608,0,0,0,9.68,14.4h61.8a10.44027,10.44027,0,0,0,9.67993-14.4H1120.111A22.00894,22.00894,0,0,1,1142.121,339.05342Z" transform="translate(-49.74968 -104.14659)" fill="#d0cde1"/><rect x="945.85129" y="355.70682" width="126" height="34" fill="${color}"/><path d="M1126.601,487.85341h-122a3.00328,3.00328,0,0,1-3-3v-30a3.00328,3.00328,0,0,1,3-3h122a3.00328,3.00328,0,0,1,3,3v30A3.00328,3.00328,0,0,1,1126.601,487.85341Zm-122-34a1.001,1.001,0,0,0-1,1v30a1.00067,1.00067,0,0,0,1,1h122a1.00067,1.00067,0,0,0,1-1v-30a1.001,1.001,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="959.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="981.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1003.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1025.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1047.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><path d="M1142.121,589.61342v28.36a22.01111,22.01111,0,0,1-22.01,22.01h-108.39a22.00248,22.00248,0,0,1-22-22.01v-130.46Z" transform="translate(-49.74968 -104.14659)" opacity="0.1"/><rect x="99.85129" y="459.70682" width="473" height="232" fill="#d0cde1"/><path d="M502.351,795.85341H151.601a2.00591,2.00591,0,0,1-2-2v-228a2.00587,2.00587,0,0,1,2-2h4.44Z" transform="translate(-49.74968 -104.14659)" opacity="0.1"/><rect x="318.85129" y="490.70682" width="732.99951" height="2" fill="#3f3d56"/><path d="M600.34268,108.46435H390.853v-4.31776H295.86217v4.31776H85.5089a14.17039,14.17039,0,0,0-14.1704,14.1704V409.4906a14.17043,14.17043,0,0,0,14.1704,14.17045H600.34268a14.17044,14.17044,0,0,0,14.1704-14.17045V122.63475A14.17039,14.17039,0,0,0,600.34268,108.46435Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="40.59128" y="29.35679" width="505.16998" height="284.98004" fill="#d0cde1"/><circle cx="292.74433" cy="16.4075" r="5.18132" fill="${color}"/><path d="M240.601,239.85341h-12a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h12a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,240.601,239.85341Zm-12-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h12a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="176.85129" y="133.70682" width="228" height="2" fill="#3f3d56"/><rect x="345.85129" y="188.70682" width="53" height="16" fill="${color}"/><path d="M452.601,304.85341h-49a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h49a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,452.601,304.85341Zm-49-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h49a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="703.85129" y="206.70682" width="100" height="70" fill="${color}"/><path d="M863.601,375.35341h-96a4.00427,4.00427,0,0,1-4-4v-66a4.00427,4.00427,0,0,1,4-4h96a4.00426,4.00426,0,0,1,4,4v66A4.00426,4.00426,0,0,1,863.601,375.35341Zm-96-70v66H863.6039l-.00293-66Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M852.601,302.85341h-4a33,33,0,1,0-66,0h-4a37,37,0,1,1,74,0Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M825.601,330.35341a10.00023,10.00023,0,1,0-15.29412,8.47258V349.5593a5.29411,5.29411,0,0,0,5.29412,5.29411h0a5.29411,5.29411,0,0,0,5.29411-5.29411V338.826A9.98327,9.98327,0,0,0,825.601,330.35341Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="284.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="306.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="328.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="350.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="372.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><path d="M643.60059,778.85352H174.60107a4.00428,4.00428,0,0,1-4-4v-228a4.00427,4.00427,0,0,1,4-4H643.60059a4.004,4.004,0,0,1,4,4v228A4.004,4.004,0,0,1,643.60059,778.85352Zm-468.99952-232v228H643.60352l-.00293-228Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><circle cx="145.85129" cy="470.70682" r="6" fill="#3f3d56"/><circle cx="166.85129" cy="470.70682" r="6" fill="#3f3d56"/><circle cx="187.85129" cy="470.70682" r="6" fill="#3f3d56"/><path d="M453.601,680.85341h-135a3.00328,3.00328,0,0,1-3-3v-34a3.00328,3.00328,0,0,1,3-3h135a3.00328,3.00328,0,0,1,3,3v34A3.00328,3.00328,0,0,1,453.601,680.85341Zm-135-38a1.001,1.001,0,0,0-1,1v34a1.001,1.001,0,0,0,1,1h135a1.001,1.001,0,0,0,1-1v-34a1.001,1.001,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><circle cx="437.85129" cy="559.70682" r="18" fill="${color}"/><path d="M493.601,679.85341a19,19,0,1,1,19-19A19.02162,19.02162,0,0,1,493.601,679.85341Zm0-36a17,17,0,1,0,17,17A17.019,17.019,0,0,0,493.601,643.85341Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><polygon points="444.118 563.803 434.437 554.121 437.265 551.293 443.584 557.611 461.216 532.555 464.487 534.858 444.118 563.803" fill="#3f3d56"/><polygon points="433.761 314.337 40.591 314.337 40.591 50.947 433.761 314.337" opacity="0.1"/><path d="M628.69739,413.2984H579.39527v-3.55218a.7043.7043,0,0,0-.70431-.70432H561.78737a.70429.70429,0,0,0-.70431.70432v3.55218H550.51832v-3.55218a.7043.7043,0,0,0-.70432-.70432H532.91042a.7043.7043,0,0,0-.70432.70432v3.55218H521.64136v-3.55218a.70429.70429,0,0,0-.70431-.70432H504.03347a.7043.7043,0,0,0-.70432.70432v3.55218H492.76441v-3.55218a.7043.7043,0,0,0-.70432-.70432H475.15651a.70429.70429,0,0,0-.70431.70432v3.55218H463.88746v-3.55218a.7043.7043,0,0,0-.70432-.70432H446.27956a.7043.7043,0,0,0-.70432.70432v3.55218H435.0105v-3.55218a.70429.70429,0,0,0-.70431-.70432H417.4026a.7043.7043,0,0,0-.70431.70432v3.55218H406.13355v-3.55218a.7043.7043,0,0,0-.70432-.70432H273.01784a.7043.7043,0,0,0-.70432.70432v3.55218H261.74878v-3.55218a.7043.7043,0,0,0-.70432-.70432H244.14088a.70429.70429,0,0,0-.70431.70432v3.55218H232.87183v-3.55218a.7043.7043,0,0,0-.70432-.70432H215.26393a.7043.7043,0,0,0-.70432.70432v3.55218H203.99487v-3.55218a.70429.70429,0,0,0-.70431-.70432H186.387a.7043.7043,0,0,0-.70431.70432v3.55218H175.11792v-3.55218a.7043.7043,0,0,0-.70432-.70432H157.51a.7043.7043,0,0,0-.70432.70432v3.55218H146.241v-3.55218a.7043.7043,0,0,0-.70432-.70432H128.63307a.7043.7043,0,0,0-.70432.70432v3.55218H117.364v-3.55218a.7043.7043,0,0,0-.70431-.70432H99.75611a.70429.70429,0,0,0-.70431.70432v3.55218H66.65326A16.90359,16.90359,0,0,0,49.74968,430.202v7.6434a16.90358,16.90358,0,0,0,16.90358,16.90354H628.69739A16.90358,16.90358,0,0,0,645.601,437.84539V430.202A16.90359,16.90359,0,0,0,628.69739,413.2984Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M474.601,321.85341h-264a3.00328,3.00328,0,0,1-3-3v-110a3.00328,3.00328,0,0,1,3-3h264a3.00328,3.00328,0,0,1,3,3v110A3.00328,3.00328,0,0,1,474.601,321.85341Zm-264-114a1.0013,1.0013,0,0,0-1,1v110a1.0013,1.0013,0,0,0,1,1h264a1.0013,1.0013,0,0,0,1-1v-110a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M240.601,269.85341h-12a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h12a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,240.601,269.85341Zm-12-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h12a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="176.85129" y="163.70682" width="228" height="2" fill="#3f3d56"/><rect x="264.85129" y="269.70682" width="732.99951" height="2" fill="#3f3d56"/><circle cx="264.85129" cy="269.70682" r="14" fill="#3f3d56"/><circle cx="997.85129" cy="271.70682" r="11" fill="#3f3d56"/><circle cx="1051.85129" cy="492.70682" r="11" fill="#3f3d56"/><circle cx="321.85129" cy="492.70682" r="11" fill="#3f3d56"/></svg>`;
 
@@ -26,7 +26,7 @@ export const WelcomeNotice = () => {
         width: '100%'
       }}
     >
-      <SvgToPngView width={200} height={200} src={IMAGE(colors.accent)} />
+      <SvgView width={200} height={200} src={IMAGE(colors.accent)} />
 
       <Heading>100% encrypted notes</Heading>
       <Paragraph
diff --git a/apps/mobile/src/components/AppLoader/index.js b/apps/mobile/src/components/launcher/index.js
similarity index 91%
rename from apps/mobile/src/components/AppLoader/index.js
rename to apps/mobile/src/components/launcher/index.js
index d1e62c46c..6204ba821 100644
--- a/apps/mobile/src/components/AppLoader/index.js
+++ b/apps/mobile/src/components/launcher/index.js
@@ -23,27 +23,27 @@ import { setRateAppMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import { editing } from '../../utils';
 import { db } from '../../utils/database';
-import { eOpenAnnouncementDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { tabBarRef } from '../../utils/Refs';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { eOpenAnnouncementDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { tabBarRef } from '../../utils/global-refs';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import SettingsBackupAndRestore from '../../views/Settings/backup-restore';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import Input from '../Input';
-import { SvgToPngView } from '../ListPlaceholders';
-import { SVG } from '../Auth/background';
-import Seperator from '../Seperator';
-import SplashScreen from '../SplashScreen';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { Update } from '../Update';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import Input from '../ui/input';
+import { SvgView } from '../ui/svg';
+import { SVG } from '../auth/background';
+import Seperator from '../ui/seperator';
+import Intro from '../intro';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { Update } from '../update';
 
 let passwordValue = null;
 let didVerifyUser = false;
 
-const AppLoader = ({ onLoad }) => {
+const Launcher = ({ onLoad }) => {
   const [state] = useTracked();
   const colors = state.colors;
   const setNotes = useNoteStore(state => state.setNotes);
@@ -250,7 +250,7 @@ const AppLoader = ({ onLoad }) => {
           overflow: 'hidden'
         }}
       >
-        <SvgToPngView src={SVG(colors.night ? 'white' : 'black')} height={700} />
+        <SvgView src={SVG(colors.night ? 'white' : 'black')} height={700} />
       </View>
 
       <View
@@ -263,7 +263,7 @@ const AppLoader = ({ onLoad }) => {
           marginTop: 15
         }}
       >
-        <ActionIcon
+        <IconButton
           name="fingerprint"
           size={100}
           customStyle={{
@@ -355,8 +355,8 @@ const AppLoader = ({ onLoad }) => {
       </View>
     </View>
   ) : requireIntro.value && !_loading ? (
-    <SplashScreen />
+    <Intro />
   ) : null;
 };
 
-export default AppLoader;
+export default Launcher;
diff --git a/apps/mobile/src/components/SimpleList/card.js b/apps/mobile/src/components/list/card.js
similarity index 92%
rename from apps/mobile/src/components/SimpleList/card.js
rename to apps/mobile/src/components/list/card.js
index 5a4a361b7..7249097a9 100644
--- a/apps/mobile/src/components/SimpleList/card.js
+++ b/apps/mobile/src/components/list/card.js
@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { useMessageStore, useSelectionStore } from '../../provider/stores';
-import { hexToRGBA } from '../../utils/ColorUtils';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
-import Paragraph from '../Typography/Paragraph';
+import { hexToRGBA } from '../../utils/color-scheme/utils';
+import { SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Card = ({ color }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/list/empty.js b/apps/mobile/src/components/list/empty.js
new file mode 100644
index 000000000..0d7d6a650
--- /dev/null
+++ b/apps/mobile/src/components/list/empty.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTracked } from '../../provider';
+import { useSettingStore } from '../../provider/stores';
+import { useTip } from '../../services/tip-manager';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import { Tip } from '../tip';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+
+export const Empty = React.memo(
+  ({ loading = true, placeholderData, headerProps, type, screen }) => {
+    const [state] = useTracked();
+    const { colors } = state;
+    const insets = useSafeAreaInsets();
+    const { height } = useWindowDimensions();
+    const introCompleted = useSettingStore(state => state.isIntroCompleted);
+    const tip = useTip(
+      screen === 'Notes' && introCompleted ? 'first-note' : placeholderData.type || type,
+      screen === 'Notes' ? 'notes' : null
+    );
+    const color =
+      colors[COLORS_NOTE[headerProps.color?.toLowerCase()] ? headerProps.color : 'accent'];
+    return (
+      <View
+        style={[
+          {
+            height: height - (140 + insets.top),
+            width: '80%',
+            justifyContent: 'center',
+            alignSelf: 'center'
+          }
+        ]}
+      >
+        {!loading ? (
+          <>
+            <Tip
+              color={COLORS_NOTE[headerProps.color?.toLowerCase()] ? headerProps.color : 'accent'}
+              tip={tip}
+              style={{
+                backgroundColor: 'transparent',
+                paddingHorizontal: 0
+              }}
+            />
+            {placeholderData.button && (
+              <Button
+                type="grayAccent"
+                title={placeholderData.button}
+                iconPosition="right"
+                icon="arrow-right"
+                onPress={placeholderData.action}
+                accentColor={
+                  COLORS_NOTE[headerProps.color?.toLowerCase()] ? headerProps.color : 'accent'
+                }
+                accentText="light"
+                style={{
+                  alignSelf: 'flex-start',
+                  borderRadius: 5,
+                  height: 40
+                }}
+              />
+            )}
+          </>
+        ) : (
+          <>
+            <View
+              style={{
+                alignSelf: 'center',
+                alignItems: 'flex-start',
+                width: '100%'
+              }}
+            >
+              <Heading>{placeholderData.heading}</Heading>
+              <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
+                {placeholderData.loading}
+              </Paragraph>
+              <Seperator />
+              <ActivityIndicator
+                size={SIZE.lg}
+                color={COLORS_NOTE[headerProps.color?.toLowerCase()] || colors.accent}
+              />
+            </View>
+          </>
+        )}
+      </View>
+    );
+  },
+  (prev, next) => {
+    if (prev.loading === next.loading) return true;
+    return false;
+  }
+);
+
+/**
+ * Make a tips manager.
+ * The tip manager stores many tips. Each tip has following values
+ * 1. Text
+ * 2. contexts: An array of context strings. // Places where the tip can be shown
+ * 3. Button if any.
+ * 4. Image/Gif asset.
+ *
+ * Tip manager adds the following methods -> get(context). Returns a random tip for the following context.
+ *
+ * Tips can be shown in a sheet or in a list. For sheets, GeneralSheet can be used to
+ * render tips.
+ *
+ * Where can the tips be shown and how?
+ * 1. When transitioning, show tips in a sheet. Make sure its useful
+ * 2. Replace placeholders with tips.
+ * 3. Show tips in editor placeholder.
+ * 4. Show tips between list items?
+ *
+ * Tooltips.
+ * Small tooltips can be shown in initial render first time.
+ * Especially for items that are not shown on blank page. Should be
+ * in places where it makes sense and does not interrupt the user.
+ *
+ * Can also be shown when first time entering a screen that
+ * has something that the user might not know of. Like sorting and side menu.
+ *
+ * Todo:
+ * 1. Make a tip manager.
+ * 2. Make a list of tips.
+ * 3. Add images for those tips.
+ * 4. Show tips
+ */
diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/list/index.js
similarity index 92%
rename from apps/mobile/src/components/SimpleList/index.js
rename to apps/mobile/src/components/list/index.js
index 6f0a0ce5f..b6ca15bc1 100644
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/list/index.js
@@ -6,14 +6,14 @@ import { useUserStore } from '../../provider/stores';
 import { eSendEvent } from '../../services/EventManager';
 import Sync from '../../services/Sync';
 import { db } from '../../utils/database';
-import { eScrollEvent } from '../../utils/Events';
+import { eScrollEvent } from '../../utils/events';
 import JumpToDialog from '../JumpToDialog';
-import { NotebookWrapper } from '../NotebookItem/wrapper';
-import { NoteWrapper } from '../NoteItem/wrapper';
-import TagItem from '../TagItem';
+import { NotebookWrapper } from '../list-items/notebook/wrapper';
+import { NoteWrapper } from '../list-items/note/wrapper';
+import TagItem from '../list-items/tag';
 import { Empty } from './empty';
-import { Footer } from './footer';
-import { Header } from './header';
+import { Footer } from '../list-items/footer';
+import { Header } from '../list-items/headers/header';
 import { SectionHeader } from './section-header';
 
 let renderItems = {
@@ -48,7 +48,7 @@ const RenderItem = ({ item, index, type, ...restArgs }) => {
   return <Item item={item} tags={tags} dateBy={dateBy} index={index} type={type} {...restArgs} />;
 };
 
-const SimpleList = ({
+const List = ({
   listData,
   type,
   refreshCallback,
@@ -186,4 +186,4 @@ const SimpleList = ({
   );
 };
 
-export default SimpleList;
+export default List;
diff --git a/apps/mobile/src/components/SimpleList/footer.js b/apps/mobile/src/components/listitems/footer/index.js
similarity index 100%
rename from apps/mobile/src/components/SimpleList/footer.js
rename to apps/mobile/src/components/listitems/footer/index.js
diff --git a/apps/mobile/src/components/listitems/headers/header.js b/apps/mobile/src/components/listitems/headers/header.js
new file mode 100644
index 000000000..dcfdcdbad
--- /dev/null
+++ b/apps/mobile/src/components/listitems/headers/header.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../../provider';
+import { useMessageStore } from '../../../provider/stores';
+import { COLORS_NOTE } from '../../../utils/color-scheme';
+import { Announcement } from '../../Announcements/announcement';
+import { Card } from '../../list/card';
+
+export const Header = React.memo(
+  ({ type, messageCard = true, color, shouldShow = false, noAnnouncement }) => {
+    const [state] = useTracked();
+    const { colors } = state;
+    const announcements = useMessageStore(state => state.announcements);
+
+    return (
+      <>
+        {announcements.length !== 0 && !noAnnouncement ? (
+          <Announcement color={color || colors.accent} />
+        ) : type === 'search' ? null : !shouldShow ? (
+          <View
+            style={{
+              marginBottom: 5,
+              padding: 0,
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}
+          >
+            {messageCard ? (
+              <Card color={COLORS_NOTE[color?.toLowerCase()] || colors.accent} />
+            ) : null}
+          </View>
+        ) : null}
+      </>
+    );
+  }
+);
+
+Header.displayName = 'Header';
diff --git a/apps/mobile/src/components/SimpleList/notebookheader.js b/apps/mobile/src/components/listitems/headers/notebookheader.js
similarity index 93%
rename from apps/mobile/src/components/SimpleList/notebookheader.js
rename to apps/mobile/src/components/listitems/headers/notebookheader.js
index 3c2ee929a..7a083d2bf 100644
--- a/apps/mobile/src/components/SimpleList/notebookheader.js
+++ b/apps/mobile/src/components/listitems/headers/notebookheader.js
@@ -5,10 +5,10 @@ import { useMenuStore } from '../../provider/stores';
 import { ToastEvent } from '../../services/EventManager';
 import { getTotalNotes } from '../../utils';
 import { db } from '../../utils/database';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const NotebookHeader = ({ notebook, onEditNotebook }) => {
   const [state] = useTracked();
@@ -64,7 +64,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             flexDirection: 'row'
           }}
         >
-          <ActionIcon
+          <IconButton
             name={isPinnedToMenu ? 'link-variant-off' : 'link-variant'}
             onPress={onPinNotebook}
             tooltipText={'Create shortcut in side menu'}
@@ -78,7 +78,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             color={isPinnedToMenu ? colors.accent : colors.icon}
             size={SIZE.lg}
           />
-          <ActionIcon
+          <IconButton
             size={SIZE.lg}
             onPress={onEditNotebook}
             tooltipText="Edit this notebook"
diff --git a/apps/mobile/src/components/listitems/headers/sectionheader.js b/apps/mobile/src/components/listitems/headers/sectionheader.js
new file mode 100644
index 000000000..acba767b9
--- /dev/null
+++ b/apps/mobile/src/components/listitems/headers/sectionheader.js
@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { useTracked } from '../../provider';
+import { useSettingStore } from '../../provider/stores';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  presentSheet
+} from '../../services/EventManager';
+import SettingsService from '../../services/SettingsService';
+import { GROUP } from '../../utils/constants';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { db } from '../../utils/database';
+import { eOpenJumpToDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import Sort from '../Sort';
+import Heading from '../ui/typography/heading';
+
+export const SectionHeader = ({ item, index, type, color, screen }) => {
+  const [state] = useTracked();
+  const { colors } = state;
+  const { fontScale } = useWindowDimensions();
+  const [groupOptions, setGroupOptions] = useState(db.settings?.getGroupOptions(type));
+  let groupBy = Object.keys(GROUP).find(key => GROUP[key] === groupOptions.groupBy);
+  const jumpToRef = useRef();
+  const sortRef = useRef();
+  const compactModeRef = useRef();
+
+  const settings = useSettingStore(state => state.settings);
+  const listMode = type === 'notebooks' ? settings.notebooksListMode : settings.notesListMode;
+
+  groupBy = !groupBy
+    ? 'Default'
+    : groupBy.slice(0, 1).toUpperCase() + groupBy.slice(1, groupBy.length);
+
+  const onUpdate = () => {
+    setGroupOptions({ ...db.settings?.getGroupOptions(type) });
+  };
+
+  useEffect(() => {
+    eSubscribeEvent('groupOptionsUpdate', onUpdate);
+    return () => {
+      eUnSubscribeEvent('groupOptionsUpdate', onUpdate);
+    };
+  }, []);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '95%',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        height: 35 * fontScale,
+        backgroundColor: colors.nav,
+        alignSelf: 'center',
+        borderRadius: 5,
+        marginVertical: 5
+      }}
+    >
+      <TouchableOpacity
+        onPress={() => {
+          eSendEvent(eOpenJumpToDialog, type);
+        }}
+        ref={jumpToRef}
+        activeOpacity={0.9}
+        hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
+        style={{
+          height: '100%',
+          justifyContent: 'center'
+        }}
+      >
+        <Heading
+          color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
+          size={SIZE.sm}
+          style={{
+            minWidth: 60,
+            alignSelf: 'center',
+            textAlignVertical: 'center'
+          }}
+        >
+          {!item.title || item.title === '' ? 'Pinned' : item.title}
+        </Heading>
+      </TouchableOpacity>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center'
+        }}
+      >
+        {index === 0 ? (
+          <>
+            <Button
+              onPress={() => {
+                presentSheet({
+                  component: <Sort screen={screen} type={type} />
+                });
+              }}
+              tooltipText="Change sorting of items in list"
+              fwdRef={sortRef}
+              title={groupBy}
+              icon={groupOptions.sortDirection === 'asc' ? 'sort-ascending' : 'sort-descending'}
+              height={25}
+              style={{
+                borderRadius: 100,
+                paddingHorizontal: 0,
+                backgroundColor: 'transparent',
+                marginRight: type === 'notes' || type === 'home' || type === 'notebooks' ? 10 : 0
+              }}
+              type="gray"
+              iconPosition="right"
+            />
+
+            {type === 'notes' || type === 'notebooks' || type === 'home' ? (
+              <IconButton
+                customStyle={{
+                  width: 25,
+                  height: 25
+                }}
+                tooltipText={
+                  listMode == 'compact' ? 'Switch to normal mode' : 'Switch to compact mode'
+                }
+                fwdRef={compactModeRef}
+                color={colors.icon}
+                name={listMode == 'compact' ? 'view-list' : 'view-list-outline'}
+                onPress={() => {
+                  SettingsService.set(
+                    type !== 'notebooks' ? 'notesListMode' : 'notebooksListMode',
+                    listMode === 'normal' ? 'compact' : 'normal'
+                  );
+                }}
+                size={SIZE.lg - 2}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </View>
+    </View>
+  );
+};
diff --git a/apps/mobile/src/components/listitems/note/index.js b/apps/mobile/src/components/listitems/note/index.js
new file mode 100644
index 000000000..13217facb
--- /dev/null
+++ b/apps/mobile/src/components/listitems/note/index.js
@@ -0,0 +1,303 @@
+import { decode, EntityLevel } from 'entities';
+import React from 'react';
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../../e2e/test.ids';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { COLORS_NOTE } from '../../../utils/color-scheme';
+import { db } from '../../../utils/database';
+import { refreshNotesPage } from '../../../utils/events';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../../ui/icon-button';
+import { Button } from '../../ui/button';
+import { TimeSince } from '../../side-menu/TimeSince';
+import { Properties } from '../../properties';
+import Heading from '../../ui/typography/heading';
+import Paragraph from '../../ui/typography/paragraph';
+
+const navigateToTopic = topic => {
+  let routeName = 'NotesPage';
+  let params = { ...topic, menu: false, get: 'topics' };
+  let headerState = {
+    heading: topic.title,
+    id: topic.id,
+    type: topic.type
+  };
+  eSendEvent(refreshNotesPage, params);
+  Navigation.navigate(routeName, params, headerState);
+};
+
+function navigateToTag(item) {
+  let _tag = db.tags.tag(item.id);
+  if (!_tag) return;
+  let params = {
+    ..._tag,
+    type: 'tag',
+    get: 'tagged'
+  };
+
+  eSendEvent(refreshNotesPage, params);
+  Navigation.navigate('NotesPage', params, {
+    heading: '#' + _tag.title,
+    id: _tag.id,
+    type: _tag.type
+  });
+}
+
+const showActionSheet = item => {
+  Properties.present(item);
+};
+
+const NoteItem = ({ item, isTrash, tags, dateBy = 'dateCreated', noOpen = false }) => {
+  const [state] = useTracked();
+  const { colors } = state;
+  const settings = useSettingStore(state => state.settings);
+  const compactMode = settings.notesListMode === 'compact';
+  const attachmentCount = db.attachments?.ofNote(item.id, 'all')?.length || 0;
+
+  function getNotebook() {
+    if (isTrash || !item.notebooks || item.notebooks.length < 1) return [];
+    let item_notebook = item.notebooks?.slice(0, 1)[0];
+    let notebook = db.notebooks.notebook(item_notebook.id);
+
+    if (!notebook) return [];
+    let topic = notebook.topics.topic(item_notebook.topics[0])?._topic;
+
+    if (!topic) return [];
+
+    notebook = notebook.data;
+
+    return [
+      {
+        title: `${notebook?.title} › ${topic?.title}`,
+        notebook: notebook,
+        topic: topic
+      }
+    ];
+  }
+
+  return (
+    <>
+      <View
+        style={{
+          flexGrow: 1,
+          flexShrink: 1
+        }}
+      >
+        {!compactMode ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              zIndex: 10,
+              elevation: 10,
+              marginBottom: 2.5
+            }}
+          >
+            {getNotebook().map(_item => (
+              <Button
+                title={_item.title}
+                key={_item}
+                height={20}
+                icon="book-outline"
+                type="grayBg"
+                fontSize={SIZE.xs}
+                iconSize={SIZE.sm}
+                textStyle={{
+                  marginRight: 0
+                }}
+                style={{
+                  borderRadius: 5,
+                  marginRight: 5,
+                  borderWidth: 0.5,
+                  borderColor: colors.icon,
+                  paddingHorizontal: 6
+                }}
+                onPress={() => navigateToTopic(_item.topic)}
+              />
+            ))}
+          </View>
+        ) : null}
+
+        <Heading
+          numberOfLines={1}
+          color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+          style={{
+            flexWrap: 'wrap'
+          }}
+          size={SIZE.md}
+        >
+          {item.title}
+        </Heading>
+
+        {item.headline && !compactMode ? (
+          <Paragraph
+            style={{
+              flexWrap: 'wrap'
+            }}
+            numberOfLines={2}
+          >
+            {decode(item.headline, {
+              level: EntityLevel.HTML
+            })}
+          </Paragraph>
+        ) : null}
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            width: '100%',
+            marginTop: 5,
+            height: SIZE.md + 2
+          }}
+        >
+          {!isTrash ? (
+            <>
+              {item.conflicted ? (
+                <Icon
+                  name="alert-circle"
+                  style={{
+                    marginRight: 6
+                  }}
+                  size={SIZE.sm}
+                  color={colors.red}
+                />
+              ) : null}
+              <TimeSince
+                style={{
+                  fontSize: SIZE.xs,
+                  color: colors.icon,
+                  marginRight: 6
+                }}
+                time={item[dateBy]}
+                updateFrequency={Date.now() - item[dateBy] < 60000 ? 2000 : 60000}
+              />
+
+              {attachmentCount > 0 ? (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginRight: 6
+                  }}
+                >
+                  <Icon name="attachment" size={SIZE.md} color={colors.icon} />
+                  <Paragraph color={colors.icon} size={SIZE.xs}>
+                    {attachmentCount}
+                  </Paragraph>
+                </View>
+              ) : null}
+
+              {item.pinned ? (
+                <Icon
+                  testID="icon-pinned"
+                  name="pin-outline"
+                  size={SIZE.sm}
+                  style={{
+                    marginRight: 6
+                  }}
+                  color={COLORS_NOTE[item.color?.toLowerCase()] || colors.accent}
+                />
+              ) : null}
+
+              {item.locked ? (
+                <Icon
+                  name="lock"
+                  size={SIZE.sm}
+                  style={{
+                    marginRight: 6
+                  }}
+                  color={colors.icon}
+                />
+              ) : null}
+
+              {item.favorite ? (
+                <Icon
+                  testID="icon-star"
+                  name="star"
+                  size={SIZE.md}
+                  style={{
+                    marginRight: 6
+                  }}
+                  color="orange"
+                />
+              ) : null}
+
+              {!isTrash && !compactMode && tags
+                ? tags.map(item =>
+                    item.id ? (
+                      <Button
+                        title={'#' + item.alias}
+                        key={item.id}
+                        height={23}
+                        type="gray"
+                        textStyle={{
+                          textDecorationLine: 'underline'
+                        }}
+                        hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
+                        fontSize={SIZE.xs}
+                        style={{
+                          borderRadius: 5,
+                          paddingHorizontal: 6,
+                          marginRight: 4,
+                          zIndex: 10,
+                          maxWidth: tags.length > 1 ? 130 : null
+                        }}
+                        onPress={() => navigateToTag(item)}
+                      />
+                    ) : null
+                  )
+                : null}
+            </>
+          ) : (
+            <>
+              <Paragraph
+                color={colors.icon}
+                size={SIZE.xs}
+                style={{
+                  marginRight: 6
+                }}
+              >
+                Deleted on{' '}
+                {item && item.dateDeleted
+                  ? new Date(item.dateDeleted).toISOString().slice(0, 10)
+                  : null}
+              </Paragraph>
+
+              <Paragraph
+                color={colors.accent}
+                size={SIZE.xs}
+                style={{
+                  marginRight: 6
+                }}
+              >
+                {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+              </Paragraph>
+            </>
+          )}
+        </View>
+      </View>
+      <IconButton
+        testID={notesnook.listitem.menu}
+        color={colors.pri}
+        name="dots-horizontal"
+        size={SIZE.xl}
+        onPress={() => !noOpen && showActionSheet(item, isTrash)}
+        customStyle={{
+          justifyContent: 'center',
+          height: 35,
+          width: 35,
+          borderRadius: 100,
+          alignItems: 'center'
+        }}
+      />
+    </>
+  );
+};
+
+export default NoteItem;
diff --git a/apps/mobile/src/components/NoteItem/wrapper.js b/apps/mobile/src/components/listitems/note/wrapper.js
similarity index 83%
rename from apps/mobile/src/components/NoteItem/wrapper.js
rename to apps/mobile/src/components/listitems/note/wrapper.js
index 7e4b925da..ed7eb9301 100644
--- a/apps/mobile/src/components/NoteItem/wrapper.js
+++ b/apps/mobile/src/components/listitems/note/wrapper.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import NoteItem from '.';
-import { notesnook } from '../../../e2e/test.ids';
-import { useEditorStore, useSelectionStore, useTrashStore } from '../../provider/stores';
-import { DDS } from '../../services/DeviceDetection';
-import { eSendEvent, openVault, ToastEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { history } from '../../utils';
-import { db } from '../../utils/database';
-import { eOnLoadNote, eShowMergeDialog } from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
-import { presentDialog } from '../Dialog/functions';
-import SelectionWrapper from '../SelectionWrapper';
+import { notesnook } from '../../../../e2e/test.ids';
+import { useEditorStore, useSelectionStore, useTrashStore } from '../../../provider/stores';
+import { DDS } from '../../../services/DeviceDetection';
+import { eSendEvent, openVault, ToastEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { history } from '../../../utils';
+import { db } from '../../../utils/database';
+import { eOnLoadNote, eShowMergeDialog } from '../../../utils/events';
+import { tabBarRef } from '../../../utils/global-refs';
+import { presentDialog } from '../../dialog/functions';
+import SelectionWrapper from '../selection-wrapper';
 
 export const NoteWrapper = React.memo(
   ({ item, index, tags, dateBy }) => {
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/listitems/notebook/index.js
similarity index 88%
rename from apps/mobile/src/components/NotebookItem/index.js
rename to apps/mobile/src/components/listitems/notebook/index.js
index 6df0d1692..fbc3c872b 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/listitems/notebook/index.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { notesnook } from '../../../e2e/test.ids';
-import { useTracked } from '../../provider';
-import { useSettingStore } from '../../provider/stores';
-import { eSendEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { getTotalNotes, history } from '../../utils';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Properties } from '../Properties';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { notesnook } from '../../../../e2e/test.ids';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { getTotalNotes, history } from '../../../utils';
+import { refreshNotesPage } from '../../../utils/events';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../../ui/icon-button';
+import { Button } from '../../ui/button';
+import { Properties } from '../../properties';
+import Heading from '../../ui/typography/heading';
+import Paragraph from '../../ui/typography/paragraph';
 
 export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateBy }) => {
   const [state] = useTracked();
@@ -186,7 +186,7 @@ export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateB
           ) : null}
         </View>
       </View>
-      <ActionIcon
+      <IconButton
         color={colors.heading}
         name="dots-horizontal"
         testID={notesnook.ids.notebook.menu}
diff --git a/apps/mobile/src/components/NotebookItem/wrapper.js b/apps/mobile/src/components/listitems/notebook/wrapper.js
similarity index 83%
rename from apps/mobile/src/components/NotebookItem/wrapper.js
rename to apps/mobile/src/components/listitems/notebook/wrapper.js
index db9bb4fd6..d9a4fe2f3 100644
--- a/apps/mobile/src/components/NotebookItem/wrapper.js
+++ b/apps/mobile/src/components/listitems/notebook/wrapper.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { NotebookItem } from '.';
-import { useSelectionStore } from '../../provider/stores';
-import { eSendEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { history } from '../../utils';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/Events';
-import SelectionWrapper from '../SelectionWrapper';
+import { useSelectionStore } from '../../../provider/stores';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { history } from '../../../utils';
+import { eOnNewTopicAdded, refreshNotesPage } from '../../../utils/events';
+import SelectionWrapper from '../selection-wrapper';
 
 export const NotebookWrapper = React.memo(
   ({ item, index, dateBy }) => {
diff --git a/apps/mobile/src/components/SelectionWrapper/actionstrip.js b/apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js
similarity index 93%
rename from apps/mobile/src/components/SelectionWrapper/actionstrip.js
rename to apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js
index 541e7e5c4..41d237c6e 100644
--- a/apps/mobile/src/components/SelectionWrapper/actionstrip.js
+++ b/apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js
@@ -2,21 +2,21 @@ import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import Animated, { useValue } from 'react-native-reanimated';
-import { useTracked } from '../../provider';
+import { useTracked } from '../../../provider';
 import {
   useMenuStore,
   useNotebookStore,
   useSelectionStore,
   useTrashStore
-} from '../../provider/stores';
-import { openVault, ToastEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { dWidth, getElevation, toTXT } from '../../utils';
-import { db } from '../../utils/database';
-import { deleteItems } from '../../utils/functions';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { presentDialog } from '../Dialog/functions';
+} from '../../../provider/stores';
+import { openVault, ToastEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { dWidth, getElevation, toTXT } from '../../../utils';
+import { db } from '../../../utils/database';
+import { deleteItems } from '../../../utils/functions';
+import { IconButton } from '../../ui/icon-button';
+import { Button } from '../../ui/button';
+import { presentDialog } from '../../dialog/functions';
 
 export const ActionStrip = ({ note, setActionStrip }) => {
   const [state, dispatch] = useTracked();
@@ -279,7 +279,7 @@ export const ActionStrip = ({ note, setActionStrip }) => {
               marginLeft: 15
             }}
           >
-            <ActionIcon
+            <IconButton
               color={item.color || colors.heading}
               onPress={item.onPress}
               tooltipText={item.title}
diff --git a/apps/mobile/src/components/SelectionWrapper/backfill.js b/apps/mobile/src/components/listitems/selectionwrapper/backfill.js
similarity index 80%
rename from apps/mobile/src/components/SelectionWrapper/backfill.js
rename to apps/mobile/src/components/listitems/selectionwrapper/backfill.js
index 1340cb2b3..2302221cf 100644
--- a/apps/mobile/src/components/SelectionWrapper/backfill.js
+++ b/apps/mobile/src/components/listitems/selectionwrapper/backfill.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useTracked } from '../../provider';
-import { useEditorStore } from '../../provider/stores';
-import { hexToRGBA } from '../../utils/ColorUtils';
+import { useTracked } from '../../../provider';
+import { useEditorStore } from '../../../provider/stores';
+import { hexToRGBA } from '../../../utils/color-scheme/utils';
 
 export const Filler = ({ item, background }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/listitems/selectionwrapper/index.js
similarity index 87%
rename from apps/mobile/src/components/SelectionWrapper/index.js
rename to apps/mobile/src/components/listitems/selectionwrapper/index.js
index e3b7c5f51..340d35a90 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/listitems/selectionwrapper/index.js
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { useTracked } from '../../provider';
-import { useSettingStore } from '../../provider/stores';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { history } from '../../utils';
-import { PressableButton } from '../PressableButton';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../../services/EventManager';
+import { history } from '../../../utils';
+import { PressableButton } from '../../ui/pressable';
 import { ActionStrip } from './action-strip';
 import { Filler } from './back-fill';
 import { SelectionIcon } from './selection';
diff --git a/apps/mobile/src/components/SelectionWrapper/selection.js b/apps/mobile/src/components/listitems/selectionwrapper/selection.js
similarity index 89%
rename from apps/mobile/src/components/SelectionWrapper/selection.js
rename to apps/mobile/src/components/listitems/selectionwrapper/selection.js
index de51a1ffc..0f0572fa9 100644
--- a/apps/mobile/src/components/SelectionWrapper/selection.js
+++ b/apps/mobile/src/components/listitems/selectionwrapper/selection.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { Actions } from '../../provider/Actions';
-import { useSelectionStore } from '../../provider/stores';
-import { SIZE } from '../../utils/SizeUtils';
+import { useTracked } from '../../../provider';
+import { Actions } from '../../../provider/Actions';
+import { useSelectionStore } from '../../../provider/stores';
+import { SIZE } from '../../../utils/size';
 
 export const SelectionIcon = ({ setActionStrip, item, compactMode }) => {
   const [state, dispatch] = useTracked();
diff --git a/apps/mobile/src/components/TagItem/index.js b/apps/mobile/src/components/listitems/tag/index.js
similarity index 79%
rename from apps/mobile/src/components/TagItem/index.js
rename to apps/mobile/src/components/listitems/tag/index.js
index f8eafb12e..84ad3a2db 100644
--- a/apps/mobile/src/components/TagItem/index.js
+++ b/apps/mobile/src/components/listitems/tag/index.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
-import { notesnook } from '../../../e2e/test.ids';
-import { PressableButton } from '../../components/PressableButton';
-import { useTracked } from '../../provider';
-import { eSendEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Properties } from '../Properties';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { notesnook } from '../../../../e2e/test.ids';
+import { PressableButton } from '../../ui/pressable';
+import { useTracked } from '../../../provider';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { db } from '../../../utils/database';
+import { refreshNotesPage } from '../../../utils/events';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../../ui/icon-button';
+import { Properties } from '../../properties';
+import Heading from '../../ui/typography/heading';
+import Paragraph from '../../ui/typography/paragraph';
 
 const TagItem = React.memo(
   ({ item, index }) => {
@@ -80,7 +80,7 @@ const TagItem = React.memo(
           </Paragraph>
         </View>
 
-        <ActionIcon
+        <IconButton
           color={colors.heading}
           name="dots-horizontal"
           size={SIZE.xl}
diff --git a/apps/mobile/src/components/Premium/compactfeatures.js b/apps/mobile/src/components/premium/compactfeatures.js
similarity index 100%
rename from apps/mobile/src/components/Premium/compactfeatures.js
rename to apps/mobile/src/components/premium/compactfeatures.js
diff --git a/apps/mobile/src/components/Premium/component.js b/apps/mobile/src/components/premium/component.js
similarity index 89%
rename from apps/mobile/src/components/Premium/component.js
rename to apps/mobile/src/components/premium/component.js
index f409727fe..69f691525 100644
--- a/apps/mobile/src/components/Premium/component.js
+++ b/apps/mobile/src/components/premium/component.js
@@ -13,20 +13,20 @@ import {
   eCloseProgressDialog,
   eOpenLoginDialog,
   eOpenResultDialog
-} from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { ActionIcon } from '../ActionIcon';
-import { AuthMode } from '../Auth';
-import { Button } from '../Button';
-import GeneralSheet from '../GeneralSheet';
-import { SvgToPngView } from '../ListPlaceholders';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { Walkthrough } from '../Walkthrough';
+} from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import umami from '../../utils/analytics';
+import { IconButton } from '../ui/icon-button';
+import { AuthMode } from '../auth';
+import { Button } from '../ui/button';
+import SheetProvider from '../sheet-provider';
+import { SvgView } from '../ui/svg';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { Walkthrough } from '../walkthroughs';
 import { features } from './features';
 import { Group } from './group';
 import { PricingPlans } from './pricing-plans';
@@ -77,8 +77,8 @@ export const Component = ({ close, promo, getRef }) => {
         maxHeight: '100%'
       }}
     >
-      <GeneralSheet context="pricing_plans" />
-      <ActionIcon
+      <SheetProvider context="pricing_plans" />
+      <IconButton
         onPress={() => {
           close();
         }}
@@ -111,7 +111,7 @@ export const Component = ({ close, promo, getRef }) => {
             justifyContent: 'center'
           }}
         >
-          <SvgToPngView width={350} height={350} src={LAUNCH_ROCKET(colors.accent)} />
+          <SvgView width={350} height={350} src={LAUNCH_ROCKET(colors.accent)} />
         </View>
 
         <Heading
diff --git a/apps/mobile/src/components/Premium/expiring.js b/apps/mobile/src/components/premium/expiring.js
similarity index 92%
rename from apps/mobile/src/components/Premium/expiring.js
rename to apps/mobile/src/components/premium/expiring.js
index 10670401f..387ef152f 100644
--- a/apps/mobile/src/components/Premium/expiring.js
+++ b/apps/mobile/src/components/premium/expiring.js
@@ -3,15 +3,15 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
-import { eOpenPremiumDialog, eOpenResultDialog, eOpenTrialEndingDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogContainer from '../Dialog/dialog-container';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eOpenPremiumDialog, eOpenResultDialog, eOpenTrialEndingDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import DialogContainer from '../dialog/dialog-container';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { CompactFeatures } from './compact-features';
 import { Offer } from './offer';
 
diff --git a/apps/mobile/src/components/Premium/feature.js b/apps/mobile/src/components/premium/feature.js
similarity index 94%
rename from apps/mobile/src/components/Premium/feature.js
rename to apps/mobile/src/components/premium/feature.js
index bc0612b0e..b027440ed 100644
--- a/apps/mobile/src/components/Premium/feature.js
+++ b/apps/mobile/src/components/premium/feature.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Paragraph from '../ui/typography/paragraph';
 import { ProTag } from './pro-tag';
 
 export const FeatureBlock = ({ vertical, highlight, content, icon, pro, proTagBg }) => {
diff --git a/apps/mobile/src/components/Premium/features.js b/apps/mobile/src/components/premium/features.js
similarity index 100%
rename from apps/mobile/src/components/Premium/features.js
rename to apps/mobile/src/components/premium/features.js
diff --git a/apps/mobile/src/components/Premium/group.js b/apps/mobile/src/components/premium/group.js
similarity index 91%
rename from apps/mobile/src/components/Premium/group.js
rename to apps/mobile/src/components/premium/group.js
index ca2d6012f..880b1a5b0 100644
--- a/apps/mobile/src/components/Premium/group.js
+++ b/apps/mobile/src/components/premium/group.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { FeatureBlock } from './feature';
 import { ProTag } from './pro-tag';
 
diff --git a/apps/mobile/src/components/Premium/index.js b/apps/mobile/src/components/premium/index.js
similarity index 95%
rename from apps/mobile/src/components/Premium/index.js
rename to apps/mobile/src/components/premium/index.js
index 7fba66ac3..f123af249 100644
--- a/apps/mobile/src/components/Premium/index.js
+++ b/apps/mobile/src/components/premium/index.js
@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eClosePremiumDialog, eOpenPremiumDialog } from '../../utils/Events';
-import BaseDialog from '../Dialog/base-dialog';
+import { eClosePremiumDialog, eOpenPremiumDialog } from '../../utils/events';
+import BaseDialog from '../dialog/base-dialog';
 import { Component } from './component';
 
 class PremiumDialog extends React.Component {
diff --git a/apps/mobile/src/components/Premium/offer.js b/apps/mobile/src/components/premium/offer.js
similarity index 85%
rename from apps/mobile/src/components/Premium/offer.js
rename to apps/mobile/src/components/premium/offer.js
index b8f2d274c..61bbb85f8 100644
--- a/apps/mobile/src/components/Premium/offer.js
+++ b/apps/mobile/src/components/premium/offer.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Offer = ({ off = '30', text = 'on yearly plan, offer ends soon', padding = 0 }) => {
   const [state, dispatch] = useTracked();
diff --git a/apps/mobile/src/components/Premium/premiumtoast.js b/apps/mobile/src/components/premium/premiumtoast.js
similarity index 93%
rename from apps/mobile/src/components/Premium/premiumtoast.js
rename to apps/mobile/src/components/premium/premiumtoast.js
index e542857e5..727641a69 100644
--- a/apps/mobile/src/components/Premium/premiumtoast.js
+++ b/apps/mobile/src/components/premium/premiumtoast.js
@@ -5,14 +5,14 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { dWidth, editing, getElevation } from '../../utils';
-import { eCloseActionSheet, eOpenPremiumDialog, eShowGetPremium } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { eCloseActionSheet, eOpenPremiumDialog, eShowGetPremium } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { EditorWebView } from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const translatePrem = new Animated.Value(-dWidth);
 export const opacityPrem = new Animated.Value(0);
diff --git a/apps/mobile/src/components/Premium/pricingitem.js b/apps/mobile/src/components/premium/pricingitem.js
similarity index 86%
rename from apps/mobile/src/components/Premium/pricingitem.js
rename to apps/mobile/src/components/premium/pricingitem.js
index df47fdc94..b9a42ebbf 100644
--- a/apps/mobile/src/components/Premium/pricingitem.js
+++ b/apps/mobile/src/components/premium/pricingitem.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { getElevation } from '../../utils';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const PricingItem = ({ product, onPress, compact }) => {
   const [state, dispatch] = useTracked();
diff --git a/apps/mobile/src/components/Premium/pricingplans.js b/apps/mobile/src/components/premium/pricingplans.js
similarity index 97%
rename from apps/mobile/src/components/Premium/pricingplans.js
rename to apps/mobile/src/components/premium/pricingplans.js
index f997dce99..207f2529f 100644
--- a/apps/mobile/src/components/Premium/pricingplans.js
+++ b/apps/mobile/src/components/premium/pricingplans.js
@@ -11,18 +11,18 @@ import {
   eCloseProgressDialog,
   eCloseSimpleDialog,
   eOpenLoginDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import BaseDialog from '../Dialog/base-dialog';
-import { presentDialog } from '../Dialog/functions';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { Walkthrough } from '../Walkthrough';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import umami from '../../utils/analytics';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import BaseDialog from '../dialog/base-dialog';
+import { presentDialog } from '../dialog/functions';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { Walkthrough } from '../walkthroughs';
 import { PricingItem } from './pricing-item';
 
 const promoCyclesMonthly = {
diff --git a/apps/mobile/src/components/Premium/protag.js b/apps/mobile/src/components/premium/protag.js
similarity index 94%
rename from apps/mobile/src/components/Premium/protag.js
rename to apps/mobile/src/components/premium/protag.js
index 259c75377..9d277eb7f 100644
--- a/apps/mobile/src/components/Premium/protag.js
+++ b/apps/mobile/src/components/premium/protag.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import Paragraph from '../Typography/Paragraph';
+import Paragraph from '../ui/typography/paragraph';
 
 export const ProTag = ({ width, size, background }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/Properties/colortags.js b/apps/mobile/src/components/properties/colortags.js
similarity index 90%
rename from apps/mobile/src/components/Properties/colortags.js
rename to apps/mobile/src/components/properties/colortags.js
index 3e8d2ad15..4a2a09752 100644
--- a/apps/mobile/src/components/Properties/colortags.js
+++ b/apps/mobile/src/components/properties/colortags.js
@@ -7,12 +7,11 @@ import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { dWidth } from '../../utils';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
+import { refreshNotesPage } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
 
 export const ColorTags = ({ item, close }) => {
   const [note, setNote] = useState(item);
diff --git a/apps/mobile/src/components/Properties/datemeta.js b/apps/mobile/src/components/properties/datemeta.js
similarity index 89%
rename from apps/mobile/src/components/Properties/datemeta.js
rename to apps/mobile/src/components/properties/datemeta.js
index f3650e94d..da0e4067f 100644
--- a/apps/mobile/src/components/Properties/datemeta.js
+++ b/apps/mobile/src/components/properties/datemeta.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import { timeConverter } from '../../utils/TimeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { timeConverter } from '../../utils/time';
+import Paragraph from '../ui/typography/paragraph';
 
 export const DateMeta = ({ item }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/Properties/devmode.js b/apps/mobile/src/components/properties/devmode.js
similarity index 94%
rename from apps/mobile/src/components/Properties/devmode.js
rename to apps/mobile/src/components/properties/devmode.js
index 121b6d57a..74a11f3f9 100644
--- a/apps/mobile/src/components/Properties/devmode.js
+++ b/apps/mobile/src/components/properties/devmode.js
@@ -4,8 +4,8 @@ import { View } from 'react-native';
 import { useSettingStore } from '../../provider/stores';
 import { ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
 
 export const DevMode = ({ item }) => {
   const settings = useSettingStore(state => state.settings);
diff --git a/apps/mobile/src/components/Properties/index.js b/apps/mobile/src/components/properties/index.js
similarity index 97%
rename from apps/mobile/src/components/Properties/index.js
rename to apps/mobile/src/components/properties/index.js
index bfd2a78a8..75ed079de 100644
--- a/apps/mobile/src/components/Properties/index.js
+++ b/apps/mobile/src/components/properties/index.js
@@ -4,9 +4,9 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { presentSheet } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { ColorTags } from './color-tags';
 import { DateMeta } from './date-meta';
 import { DevMode } from './dev-mode';
diff --git a/apps/mobile/src/components/Properties/items.js b/apps/mobile/src/components/properties/items.js
similarity index 93%
rename from apps/mobile/src/components/Properties/items.js
rename to apps/mobile/src/components/properties/items.js
index 5d52c62c2..cbffd4d61 100644
--- a/apps/mobile/src/components/Properties/items.js
+++ b/apps/mobile/src/components/properties/items.js
@@ -5,11 +5,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import { PressableButton } from '../PressableButton';
-import Paragraph from '../Typography/Paragraph';
-import { useActions } from './use-actions';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { PressableButton } from '../ui/pressable';
+import Paragraph from '../ui/typography/paragraph';
+import { useActions } from '../../utils/hooks/use-actions';
 
 export const Items = ({ item, buttons, close }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/Properties/notebooks.js b/apps/mobile/src/components/properties/notebooks.js
similarity index 95%
rename from apps/mobile/src/components/Properties/notebooks.js
rename to apps/mobile/src/components/properties/notebooks.js
index 54615deef..d7d3fb97f 100644
--- a/apps/mobile/src/components/Properties/notebooks.js
+++ b/apps/mobile/src/components/properties/notebooks.js
@@ -5,11 +5,11 @@ import { useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
+import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
 
 export default function Notebooks({ note, close }) {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/Properties/synced.js b/apps/mobile/src/components/properties/synced.js
similarity index 89%
rename from apps/mobile/src/components/Properties/synced.js
rename to apps/mobile/src/components/properties/synced.js
index af51995e3..78dfd2b13 100644
--- a/apps/mobile/src/components/Properties/synced.js
+++ b/apps/mobile/src/components/properties/synced.js
@@ -4,11 +4,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Synced = ({ item, close }) => {
   const [state, dispatch] = useTracked();
diff --git a/apps/mobile/src/components/Properties/tags.js b/apps/mobile/src/components/properties/tags.js
similarity index 91%
rename from apps/mobile/src/components/Properties/tags.js
rename to apps/mobile/src/components/properties/tags.js
index 4f6a941a8..847769f6a 100644
--- a/apps/mobile/src/components/Properties/tags.js
+++ b/apps/mobile/src/components/properties/tags.js
@@ -4,10 +4,10 @@ import { useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eOpenTagsDialog, refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
+import { eOpenTagsDialog, refreshNotesPage } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
 
 export const Tags = ({ item, close }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/Properties/topics.js b/apps/mobile/src/components/properties/topics.js
similarity index 90%
rename from apps/mobile/src/components/Properties/topics.js
rename to apps/mobile/src/components/properties/topics.js
index ce0b5f9a8..ee079ee00 100644
--- a/apps/mobile/src/components/Properties/topics.js
+++ b/apps/mobile/src/components/properties/topics.js
@@ -2,9 +2,9 @@ import React from 'react';
 import { View } from 'react-native';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
+import { refreshNotesPage } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
 
 export const Topics = ({ item, close }) => {
   const open = topic => {
diff --git a/apps/mobile/src/components/SelectionHeader/index.js b/apps/mobile/src/components/selectionheader/index.js
similarity index 93%
rename from apps/mobile/src/components/SelectionHeader/index.js
rename to apps/mobile/src/components/selectionheader/index.js
index 7715eb955..9fa87792a 100644
--- a/apps/mobile/src/components/SelectionHeader/index.js
+++ b/apps/mobile/src/components/selectionheader/index.js
@@ -5,17 +5,16 @@ import { useTracked } from '../../provider';
 import { useSelectionStore } from '../../provider/stores';
 import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import SearchService from '../../services/SearchService';
 import { db } from '../../utils/database';
-import { eOpenMoveNoteDialog, refreshNotesPage } from '../../utils/Events';
+import { eOpenMoveNoteDialog, refreshNotesPage } from '../../utils/events';
 import { deleteItems } from '../../utils/functions';
+import { tabBarRef } from '../../utils/global-refs';
 import layoutmanager from '../../utils/layout-manager';
-import { tabBarRef } from '../../utils/Refs';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { presentDialog } from '../Dialog/functions';
-import Heading from '../Typography/Heading';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { presentDialog } from '../dialog/functions';
+import { IconButton } from '../ui/icon-button';
+import Heading from '../ui/typography/heading';
 
 export const SelectionHeader = React.memo(({ screen, type, extras }) => {
   const [state, dispatch] = useTracked();
@@ -105,7 +104,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
           borderRadius: 100
         }}
       >
-        <ActionIcon
+        <IconButton
           customStyle={{
             justifyContent: 'center',
             alignItems: 'center',
@@ -165,7 +164,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
         screen === 'Notebooks' ||
         screen === 'Notebook' ||
         type === 'topic' ? null : (
-          <ActionIcon
+          <IconButton
             onPress={async () => {
               //setSelectionMode(false);
               await sleep(100);
@@ -181,7 +180,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
         )}
 
         {type === 'topic' ? (
-          <ActionIcon
+          <IconButton
             onPress={async () => {
               if (selectedItemsList.length > 0) {
                 await db.notebooks
@@ -210,7 +209,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
         ) : null}
 
         {screen === 'Favorites' ? (
-          <ActionIcon
+          <IconButton
             onPress={addToFavorite}
             customStyle={{
               marginLeft: 10
@@ -222,7 +221,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
         ) : null}
 
         {screen === 'Trash' ? null : (
-          <ActionIcon
+          <IconButton
             customStyle={{
               marginLeft: 10
             }}
@@ -249,7 +248,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
         )}
 
         {screen === 'Trash' ? (
-          <ActionIcon
+          <IconButton
             customStyle={{
               marginLeft: 10
             }}
diff --git a/apps/mobile/src/components/GeneralSheet/index.js b/apps/mobile/src/components/sheetprovider/index.js
similarity index 94%
rename from apps/mobile/src/components/GeneralSheet/index.js
rename to apps/mobile/src/components/sheetprovider/index.js
index c1c63f976..64d3136f5 100644
--- a/apps/mobile/src/components/GeneralSheet/index.js
+++ b/apps/mobile/src/components/sheetprovider/index.js
@@ -4,18 +4,18 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { editing } from '../../utils';
-import { eCloseProgressDialog, eOpenProgressDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { eCloseProgressDialog, eOpenProgressDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { EditorWebView } from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
 import { reFocusEditor } from '../../views/Editor/tiny/toolbar/constants';
-import { Button } from '../Button';
-import SheetWrapper from '../Sheet';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { Button } from '../ui/button';
+import SheetWrapper from '../ui/sheet';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
-const GeneralSheet = ({ context = 'global' }) => {
+const SheetProvider = ({ context = 'global' }) => {
   const [state] = useTracked();
   const { colors } = state;
   const [visible, setVisible] = useState(false);
@@ -210,4 +210,4 @@ const GeneralSheet = ({ context = 'global' }) => {
   );
 };
 
-export default GeneralSheet;
+export default SheetProvider;
diff --git a/apps/mobile/src/components/sidemenu/colorsection.js b/apps/mobile/src/components/sidemenu/colorsection.js
new file mode 100644
index 000000000..c872fd45d
--- /dev/null
+++ b/apps/mobile/src/components/sidemenu/colorsection.js
@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
+import { useMenuStore, useNoteStore } from '../../provider/stores';
+import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { db } from '../../utils/database';
+import { refreshNotesPage } from '../../utils/events';
+import { normalize, SIZE } from '../../utils/size';
+import { presentDialog } from '../dialog/functions';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+
+export const ColorSection = () => {
+  const colorNotes = useMenuStore(state => state.colorNotes);
+  const loading = useNoteStore(state => state.loading);
+  const setColorNotes = useMenuStore(state => state.setColorNotes);
+
+  useEffect(() => {
+    if (!loading) {
+      setColorNotes();
+    }
+  }, [loading]);
+
+  return colorNotes.map((item, index) => {
+    let alias = db.colors.alias(item.id);
+    return <ColorItem key={item.id} alias={alias} item={item} index={index} />;
+  });
+};
+
+const ColorItem = React.memo(
+  ({ item, index, alias }) => {
+    const [state] = useTracked();
+    const { colors } = state;
+    const setColorNotes = useMenuStore(state => state.setColorNotes);
+    const [headerTextState, setHeaderTextState] = useState(null);
+    alias = db.colors.alias(item.id);
+
+    const onHeaderStateChange = event => {
+      setTimeout(() => {
+        if (event.id === item.id) {
+          setHeaderTextState(event);
+        } else {
+          if (headerTextState !== null) {
+            setHeaderTextState(null);
+          }
+        }
+      }, 300);
+    };
+
+    useEffect(() => {
+      eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+      return () => {
+        eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+      };
+    }, [headerTextState]);
+
+    const onPress = item => {
+      let params = {
+        ...item,
+        type: 'color',
+        menu: true,
+        get: 'colored'
+      };
+
+      eSendEvent(refreshNotesPage, params);
+      Navigation.navigate('NotesPage', params, {
+        heading: alias.slice(0, 1).toUpperCase() + alias.slice(1),
+        id: item.id,
+        type: 'color'
+      });
+      Navigation.closeDrawer();
+    };
+
+    const onLongPress = () => {
+      presentDialog({
+        title: 'Rename color',
+        input: true,
+        inputPlaceholder: 'Enter name for this color',
+        defaultValue: alias,
+        paragraph: 'You are renaming the color ' + item.title,
+        positivePress: async value => {
+          if (!value || value.trim().length === 0) return;
+          await db.colors.rename(item.id, value);
+          setColorNotes();
+          console.log('color updated');
+        },
+        positiveText: 'Rename'
+      });
+    };
+
+    return (
+      <PressableButton
+        customColor={headerTextState?.id === item.id ? 'rgba(0,0,0,0.04)' : 'transparent'}
+        onLongPress={onLongPress}
+        customSelectedColor={COLORS_NOTE[item.title.toLowerCase()]}
+        customAlpha={!colors.night ? -0.02 : 0.02}
+        customOpacity={0.12}
+        onPress={() => onPress(item)}
+        customStyle={{
+          width: '100%',
+          alignSelf: 'center',
+          borderRadius: 5,
+          flexDirection: 'row',
+          paddingHorizontal: 8,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          height: normalize(50),
+          marginBottom: 5
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center'
+          }}
+        >
+          <View
+            style={{
+              width: 30,
+              justifyContent: 'center',
+              alignItems: 'flex-start'
+            }}
+          >
+            <View
+              style={{
+                width: SIZE.lg - 2,
+                height: SIZE.lg - 2,
+                backgroundColor: COLORS_NOTE[item.title.toLowerCase()],
+                borderRadius: 100,
+                justifyContent: 'center',
+                marginRight: 10
+              }}
+            />
+          </View>
+          {headerTextState?.id === item.id ? (
+            <Heading color={colors.heading} size={SIZE.md}>
+              {alias.slice(0, 1).toUpperCase() + alias.slice(1)}
+            </Heading>
+          ) : (
+            <Paragraph color={colors.pri} size={SIZE.md}>
+              {alias.slice(0, 1).toUpperCase() + alias.slice(1)}
+            </Paragraph>
+          )}
+        </View>
+      </PressableButton>
+    );
+  },
+  (prev, next) => {
+    if (prev.item?.dateModified !== next.item?.dateModified) return false;
+    if (prev.alias !== next.alias) return false;
+    if (prev.item?.id !== next.item?.id) return false;
+
+    return true;
+  }
+);
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/sidemenu/index.js
similarity index 86%
rename from apps/mobile/src/components/Menu/index.js
rename to apps/mobile/src/components/sidemenu/index.js
index 89690df26..5c1e9a47b 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/sidemenu/index.js
@@ -15,17 +15,17 @@ import {
   COLOR_SCHEME_LIGHT,
   COLOR_SCHEME_PITCH_BLACK,
   setColorScheme
-} from '../../utils/Colors';
-import { eOpenPremiumDialog } from '../../utils/Events';
-import { MenuItemsList, SUBSCRIPTION_STATUS } from '../../utils/index';
-import { MMKV } from '../../utils/mmkv';
-import umami from '../../utils/umami';
-import { ColorSection } from './ColorSection';
-import { MenuListItem } from './MenuListItem';
-import { TagsSection } from './TagsSection';
-import { UserSection } from './UserSection';
+} from '../../utils/color-scheme';
+import { eOpenPremiumDialog } from '../../utils/events';
+import { MenuItemsList, SUBSCRIPTION_STATUS } from '../../utils/constants';
+import { MMKV } from '../../utils/database/mmkv';
+import umami from '../../utils/analytics';
+import { ColorSection } from './color-section';
+import { MenuItem } from './menu-item';
+import { TagsSection } from './pinned-section';
+import { UserStatus } from './user-status';
 
-export const Menu = React.memo(
+export const SideMenu = React.memo(
   () => {
     const [state, dispatch] = useTracked();
     const { colors } = state;
@@ -78,7 +78,7 @@ export const Menu = React.memo(
       () => (
         <>
           {MenuItemsList.map((item, index) => (
-            <MenuListItem key={item.name} item={item} testID={item.name} index={index} />
+            <MenuItem key={item.name} item={item} testID={item.name} index={index} />
           ))}
           <ColorSection noTextMode={noTextMode} />
           <TagsSection />
@@ -127,11 +127,11 @@ export const Menu = React.memo(
             {!user ||
             user?.subscription?.type === SUBSCRIPTION_STATUS.TRIAL ||
             user?.subscription?.type === SUBSCRIPTION_STATUS.BASIC ? (
-              <MenuListItem testID={pro.name} key={pro.name} item={pro} index={0} ignore={true} />
+              <MenuItem testID={pro.name} key={pro.name} item={pro} index={0} ignore={true} />
             ) : null}
 
             {BottomItemsList.slice(DDS.isLargeTablet() ? 0 : 1, 3).map((item, index) => (
-              <MenuListItem
+              <MenuItem
                 testID={item.name == 'Night mode' ? notesnook.ids.menu.nightmode : item.name}
                 key={item.name}
                 item={item}
@@ -150,7 +150,7 @@ export const Menu = React.memo(
               paddingHorizontal: 0
             }}
           >
-            <UserSection noTextMode={noTextMode} />
+            <UserStatus noTextMode={noTextMode} />
           </View>
         </View>
       </View>
diff --git a/apps/mobile/src/components/Menu/MenuListItem.js b/apps/mobile/src/components/sidemenu/menuitem.js
similarity index 92%
rename from apps/mobile/src/components/Menu/MenuListItem.js
rename to apps/mobile/src/components/sidemenu/menuitem.js
index 5470dff0d..78f2b8919 100644
--- a/apps/mobile/src/components/Menu/MenuListItem.js
+++ b/apps/mobile/src/components/sidemenu/menuitem.js
@@ -5,13 +5,13 @@ import ToggleSwitch from 'toggle-switch-react-native';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { normalize, SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
-export const MenuListItem = React.memo(
+export const MenuItem = React.memo(
   ({ item, index, testID, rightBtn }) => {
     const [state] = useTracked();
     const { colors } = state;
diff --git a/apps/mobile/src/components/Menu/TagsSection.js b/apps/mobile/src/components/sidemenu/pinnedsection.js
similarity index 94%
rename from apps/mobile/src/components/Menu/TagsSection.js
rename to apps/mobile/src/components/sidemenu/pinnedsection.js
index 0494a5a0c..7da4934fa 100644
--- a/apps/mobile/src/components/Menu/TagsSection.js
+++ b/apps/mobile/src/components/sidemenu/pinnedsection.js
@@ -6,16 +6,16 @@ import { useMenuStore, useNoteStore } from '../../provider/stores';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/Events';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import { Notice } from '../Notice';
-import { PressableButton } from '../PressableButton';
-import { Properties } from '../Properties';
-import Seperator from '../Seperator';
-import SheetWrapper from '../Sheet';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/events';
+import { normalize, SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { Notice } from '../ui/notice';
+import { PressableButton } from '../ui/pressable';
+import { Properties } from '../properties';
+import Seperator from '../ui/seperator';
+import SheetWrapper from '../ui/sheet';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const TagsSection = () => {
   const menuPins = useMenuStore(state => state.menuPins);
diff --git a/apps/mobile/src/components/Menu/UserSection.js b/apps/mobile/src/components/sidemenu/userstatus.js
similarity index 91%
rename from apps/mobile/src/components/Menu/UserSection.js
rename to apps/mobile/src/components/sidemenu/userstatus.js
index 2e44e5465..c78e90914 100644
--- a/apps/mobile/src/components/Menu/UserSection.js
+++ b/apps/mobile/src/components/sidemenu/userstatus.js
@@ -6,14 +6,14 @@ import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { eSendEvent } from '../../services/EventManager';
 import Sync from '../../services/Sync';
-import { eOpenLoginDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eOpenLoginDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { TimeSince } from './TimeSince';
 
-export const UserSection = () => {
+export const UserStatus = () => {
   const [state] = useTracked();
   const { colors } = state;
   const user = useUserStore(state => state.user);
diff --git a/apps/mobile/src/components/Sort/index.js b/apps/mobile/src/components/sort/index.js
similarity index 95%
rename from apps/mobile/src/components/Sort/index.js
rename to apps/mobile/src/components/sort/index.js
index f2f4b4053..3100ab2b7 100644
--- a/apps/mobile/src/components/Sort/index.js
+++ b/apps/mobile/src/components/sort/index.js
@@ -3,14 +3,14 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { GROUP, SORT } from '../../utils';
+import { GROUP, SORT } from '../../utils/constants';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
+import { refreshNotesPage } from '../../utils/events';
 import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
 
 const Sort = ({ type, screen }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/CustomTabs/index.js b/apps/mobile/src/components/tabs/index.js
similarity index 99%
rename from apps/mobile/src/components/CustomTabs/index.js
rename to apps/mobile/src/components/tabs/index.js
index 00f9fd95c..ac3c7e918 100644
--- a/apps/mobile/src/components/CustomTabs/index.js
+++ b/apps/mobile/src/components/tabs/index.js
@@ -5,7 +5,7 @@ import { FlatList, TextInput, View } from 'react-native';
 import { DDS } from '../../services/DeviceDetection';
 import { editing } from '../../utils';
 
-export default class CustomTabs extends Component {
+export default class Tabs extends Component {
   constructor(props) {
     super(props);
     this.listRef = createRef();
@@ -280,6 +280,6 @@ export default class CustomTabs extends Component {
   }
 }
 
-CustomTabs.defaultProps = {
+Tabs.defaultProps = {
   onDrawerStateChange: () => {}
 };
diff --git a/apps/mobile/src/components/Tip/index.tsx b/apps/mobile/src/components/tip/index.tsx
similarity index 87%
rename from apps/mobile/src/components/Tip/index.tsx
rename to apps/mobile/src/components/tip/index.tsx
index 847290afe..c5bfb4172 100644
--- a/apps/mobile/src/components/Tip/index.tsx
+++ b/apps/mobile/src/components/tip/index.tsx
@@ -3,12 +3,13 @@ import { Image, TextStyle, View, ViewStyle } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet } from '../../services/EventManager';
 import { TTip } from '../../services/tip-manager';
-import { eCloseProgressDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseProgressDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
+import { defaultState } from '../../provider/DefaultState';
 
 export const Tip = ({
   tip,
@@ -23,7 +24,7 @@ export const Tip = ({
   textStyle?: TextStyle;
   neverShowAgain: boolean;
   noImage?: boolean;
-  color?: string;
+  color?: keyof typeof defaultState['colors'];
 }) => {
   const [state] = useTracked();
   const { colors } = state;
@@ -54,6 +55,7 @@ export const Tip = ({
           icon="information"
           fontSize={SIZE.xs}
           iconSize={SIZE.xs}
+          //@ts-ignore
           style={{
             width: null,
             height: 22,
@@ -78,6 +80,7 @@ export const Tip = ({
               MMKV.setItem('neverShowSheetTips', 'true');
               eSendEvent(eCloseProgressDialog);
             }}
+            //@ts-ignore
             style={{
               width: null,
               height: 25,
@@ -120,7 +123,7 @@ export const Tip = ({
           title={tip.button.title}
           type="accent"
           icon={tip.button.icon}
-          accentText="white"
+          accentText="light"
           accentColor={color}
           style={{
             marginTop: 10
diff --git a/apps/mobile/src/components/Toast/index.js b/apps/mobile/src/components/toast/index.js
similarity index 96%
rename from apps/mobile/src/components/Toast/index.js
rename to apps/mobile/src/components/toast/index.js
index 560551262..712015359 100644
--- a/apps/mobile/src/components/Toast/index.js
+++ b/apps/mobile/src/components/toast/index.js
@@ -8,12 +8,12 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { dHeight, getElevation } from '../../utils';
-import { eHideToast, eShowToast } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eHideToast, eShowToast } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 const { timing } = Animated;
 
 let toastMessages = [];
diff --git a/apps/mobile/src/components/Button/index.js b/apps/mobile/src/components/ui/button/index.tsx
similarity index 62%
rename from apps/mobile/src/components/Button/index.js
rename to apps/mobile/src/components/ui/button/index.tsx
index 8e22ae6a8..d31904bdb 100644
--- a/apps/mobile/src/components/Button/index.js
+++ b/apps/mobile/src/components/ui/button/index.tsx
@@ -1,21 +1,39 @@
 import React from 'react';
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, ColorValue, TextStyle } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { BUTTON_TYPES, showTooltip, TOOLTIP_POSITIONS } from '../../utils';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { useTracked } from '../../../provider';
+import { showTooltip, TOOLTIP_POSITIONS } from '../../../utils';
+import { BUTTON_TYPES } from '../../../utils/constants';
+import { SIZE } from '../../../utils/size';
+import { PressableButton, PressableButtonProps } from '../pressable';
+import Heading from '../typography/heading';
+import Paragraph from '../typography/paragraph';
 
-/**
- *
- * @param {import('../PressableButton').buttonTypes} type
- */
+interface ButtonProps extends PressableButtonProps {
+  height?: number;
+  icon?: string;
+  fontSize?: number;
+  tooltipText?: string;
+  textStyle?: TextStyle;
+  iconPosition?: 'left' | 'right';
+  iconSize?: number;
+  title?: string | null;
+  loading?: boolean;
+  width?: string | number | null;
+  buttonType?: {
+    text?: ColorValue;
+    selected?: ColorValue;
+    color?: ColorValue;
+    opacity?: number;
+    alpha?: number;
+  };
+  bold?: boolean;
+  iconColor?: ColorValue;
+}
 export const Button = ({
   height = 45,
   width = null,
-  onPress = () => {},
+  onPress,
   loading = false,
   title = null,
   icon,
@@ -23,25 +41,25 @@ export const Button = ({
   type = 'transparent',
   iconSize = SIZE.md,
   style = {},
-  testID,
   accentColor = 'accent',
   accentText = 'light',
   onLongPress,
   tooltipText,
   textStyle,
   iconPosition = 'left',
-  hitSlop,
-  buttonType = {},
+  buttonType,
   bold,
   iconColor,
-  fwdRef
-}) => {
+  fwdRef,
+  ...restProps
+}: ButtonProps) => {
   const [state] = useTracked();
   const { colors } = state;
 
-  const textColor = buttonType.text
+  const textColor = buttonType?.text
     ? buttonType.text
-    : colors[
+    : //@ts-ignore
+      colors[
         type === 'accent'
           ? BUTTON_TYPES[type](accentColor, accentText).text
           : BUTTON_TYPES[type].text
@@ -50,8 +68,8 @@ export const Button = ({
 
   return (
     <PressableButton
+      {...restProps}
       fwdRef={fwdRef}
-      hitSlop={hitSlop}
       onPress={onPress}
       onLongPress={event => {
         if (onLongPress) {
@@ -63,14 +81,13 @@ export const Button = ({
         }
       }}
       disabled={loading}
-      testID={testID}
       type={type}
       accentColor={accentColor}
       accentText={accentText}
-      customColor={buttonType.color}
-      customSelectedColor={buttonType.selected}
-      customOpacity={buttonType.opacity}
-      customAlpha={buttonType.alpha}
+      customColor={buttonType?.color}
+      customSelectedColor={buttonType?.selected}
+      customOpacity={buttonType?.opacity}
+      customAlpha={buttonType?.alpha}
       customStyle={{
         height: height,
         width: width || null,
@@ -80,6 +97,7 @@ export const Button = ({
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
+        //@ts-ignore
         ...style
       }}
     >
@@ -90,7 +108,7 @@ export const Button = ({
           style={{
             marginRight: 0
           }}
-          color={iconColor || buttonType.text || textColor}
+          color={iconColor || buttonType?.text || textColor}
           size={iconSize}
         />
       ) : null}
@@ -118,7 +136,7 @@ export const Button = ({
           style={{
             marginLeft: 0
           }}
-          color={iconColor || buttonType.text || textColor}
+          color={iconColor || buttonType?.text || textColor}
           size={iconSize}
         />
       ) : null}
diff --git a/apps/mobile/src/components/ui/iconbutton/index.tsx b/apps/mobile/src/components/ui/iconbutton/index.tsx
new file mode 100644
index 000000000..8ad6c5123
--- /dev/null
+++ b/apps/mobile/src/components/ui/iconbutton/index.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { ColorValue, GestureResponderEvent, ViewStyle } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTracked } from '../../../provider';
+import { showTooltip, TOOLTIP_POSITIONS } from '../../../utils';
+import { hexToRGBA, RGB_Linear_Shade } from '../../../utils/color-scheme/utils';
+import { SIZE } from '../../../utils/size';
+import { PressableButton, PressableButtonProps } from '../pressable';
+
+interface IconButtonProps extends PressableButtonProps {
+  name: string;
+  color?: ColorValue;
+  size: number;
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+  disabled?: boolean;
+  tooltipText?: string;
+  tooltipPosition?: number;
+  iconStyle?: ViewStyle;
+}
+
+export const IconButton = ({
+  onPress,
+  name,
+  color,
+  customStyle,
+  size = SIZE.xxl,
+  iconStyle = {},
+  left = 10,
+  right = 10,
+  top = 30,
+  bottom = 10,
+  onLongPress,
+  tooltipText,
+  type = 'gray',
+  fwdRef,
+  tooltipPosition = TOOLTIP_POSITIONS.TOP,
+  ...restProps
+}: IconButtonProps) => {
+  const [state, dispatch] = useTracked();
+  const { colors } = state;
+
+  const _onLongPress = (event: GestureResponderEvent) => {
+    if (onLongPress) {
+      onLongPress(event);
+      return;
+    }
+    if (tooltipText) {
+      showTooltip(event, tooltipText, tooltipPosition);
+    }
+  };
+
+  return (
+    <PressableButton
+      {...restProps}
+      fwdRef={fwdRef}
+      onPress={onPress}
+      hitSlop={{ top: top, left: left, right: right, bottom: bottom }}
+      onLongPress={_onLongPress}
+      type={type}
+      customStyle={{
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 100,
+        ...customStyle
+      }}
+    >
+      <Icon
+        name={name}
+        style={iconStyle}
+        color={restProps.disabled ? RGB_Linear_Shade(-0.05, hexToRGBA(colors.nav)) : color}
+        size={size}
+      />
+    </PressableButton>
+  );
+};
diff --git a/apps/mobile/src/components/Input/index.js b/apps/mobile/src/components/ui/input/index.tsx
similarity index 69%
rename from apps/mobile/src/components/Input/index.js
rename to apps/mobile/src/components/ui/input/index.tsx
index 1dc1ebe42..dd15b72f0 100644
--- a/apps/mobile/src/components/Input/index.js
+++ b/apps/mobile/src/components/ui/input/index.tsx
@@ -1,28 +1,60 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, TextInput } from 'react-native';
+import React, { RefObject, useState } from 'react';
+import {
+  TouchableOpacity,
+  TextInput,
+  TextInputProps,
+  NativeSyntheticEvent,
+  TextInputSubmitEditingEventData,
+  ColorValue,
+  ViewStyle
+} from 'react-native';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider/index';
+import { useTracked } from '../../../provider/index';
 import {
   ERRORS_LIST,
   validateEmail,
   validatePass,
   validateUsername
-} from '../../services/Validation';
-import { getElevation } from '../../utils';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import Paragraph from '../Typography/Paragraph';
+} from '../../../services/Validation';
+import { getElevation } from '../../../utils';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../icon-button';
+import Paragraph from '../typography/paragraph';
+
+interface InputProps extends TextInputProps {
+  fwdRef: RefObject<any>;
+  validationType: 'password' | 'email' | 'confirmPassword' | 'username';
+  loading: boolean;
+  onSubmit: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void | undefined;
+  onErrorCheck: (error: boolean) => void;
+  errorMessage: string;
+  customColor: ColorValue;
+  customValidator: () => string;
+  marginBottom: number;
+  button: {
+    icon: string;
+    color: ColorValue;
+    onPress: () => void;
+  };
+  buttons: React.ReactNode;
+  onBlurInput?: () => void;
+  onPress?: () => void;
+  height: number;
+  fontSize: number;
+  onFocusInput?: () => void;
+  marginRight: number;
+  buttonLeft: React.ReactNode;
+  inputStyle: TextInputProps['style'];
+  containerStyle: ViewStyle;
+}
 
 const Input = ({
   fwdRef,
   validationType,
   loading,
-  autoCapitalize,
   onChangeText,
   onSubmit,
-  blurOnSubmit,
-  placeholder,
   onErrorCheck,
   errorMessage,
   secureTextEntry,
@@ -30,24 +62,18 @@ const Input = ({
   customValidator,
   marginBottom = 10,
   button,
-  testID,
-  defaultValue,
-  clearTextOnFocus,
   onBlurInput,
   onPress,
   height = 50,
   fontSize = SIZE.md,
-  returnKeyType,
-  returnKeyLabel,
-  autoCompleteType,
   onFocusInput,
   buttons,
   marginRight,
-  autoCorrect = true,
   buttonLeft,
   inputStyle = {},
-  containerStyle = {}
-}) => {
+  containerStyle = {},
+  ...restProps
+}: InputProps) => {
   const [state] = useTracked();
   const colors = state.colors;
   const [error, setError] = useState(false);
@@ -64,21 +90,18 @@ const Input = ({
 
   const color = error ? colors.red : focus ? customColor || colors.accent : colors.nav;
 
-  const validate = value => {
+  const validate = (value: string) => {
     if (!validationType) return;
     if (!value || value?.length === 0) {
       setError(false);
       onErrorCheck(false);
       setErrorList({
-        SHORT_PASS: true,
-        NO_ABC: true,
-        NO_CAPS_ABC: true,
-        NO_NUM: true,
-        SPECIAL: true
+        SHORT_PASS: true
       });
       return;
     }
-    let isError = false;
+    let isError: any = null;
+
     switch (validationType) {
       case 'password':
         isError = validatePass(value);
@@ -111,8 +134,8 @@ const Input = ({
     }
   };
 
-  const onChange = value => {
-    onChangeText(value);
+  const onChange = (value: string) => {
+    onChangeText && onChangeText(value);
     validate(value);
   };
 
@@ -130,7 +153,7 @@ const Input = ({
     }
   };
 
-  const style = {
+  const style: ViewStyle = {
     borderWidth: 1,
     borderRadius: 5,
     borderColor: color,
@@ -144,7 +167,7 @@ const Input = ({
     ...containerStyle
   };
 
-  const textStyle = {
+  const textStyle: TextInputProps['style'] = {
     paddingHorizontal: 0,
     fontSize: fontSize,
     color: onPress && loading ? colors.accent : colors.pri,
@@ -153,6 +176,7 @@ const Input = ({
     flexGrow: 1,
     height: height || 50,
     fontFamily: 'OpenSans-Regular',
+    //@ts-ignore
     ...inputStyle
   };
 
@@ -172,28 +196,20 @@ const Input = ({
           {buttonLeft && buttonLeft}
 
           <TextInput
+            {...restProps}
             ref={fwdRef}
-            testID={testID}
             editable={!loading}
-            defaultValue={defaultValue}
-            autoCapitalize={autoCapitalize}
             onChangeText={onChange}
-            autoCorrect={autoCorrect}
             onBlur={onBlur}
             keyboardType={validationType === 'email' ? 'email-address' : 'default'}
             importantForAutofill="yes"
             importantForAccessibility="yes"
-            returnKeyLabel={returnKeyLabel}
-            returnKeyType={returnKeyType}
             keyboardAppearance={colors.night ? 'dark' : 'light'}
             onFocus={onFocus}
             onSubmitEditing={onSubmit}
-            blurOnSubmit={blurOnSubmit}
             style={textStyle}
             secureTextEntry={secureTextEntry && secureEntry}
-            placeholder={placeholder}
             placeholderTextColor={colors.placeholder}
-            autoCompleteType={autoCompleteType}
           />
 
           <View
@@ -205,7 +221,7 @@ const Input = ({
             }}
           >
             {secureTextEntry && (
-              <ActionIcon
+              <IconButton
                 name="eye"
                 size={20}
                 top={10}
@@ -225,7 +241,7 @@ const Input = ({
             {buttons}
 
             {button && (
-              <ActionIcon
+              <IconButton
                 name={button.icon}
                 size={SIZE.xl}
                 top={10}
@@ -236,7 +252,7 @@ const Input = ({
             )}
 
             {error && (
-              <ActionIcon
+              <IconButton
                 name="alert-circle-outline"
                 top={10}
                 bottom={10}
@@ -286,26 +302,35 @@ const Input = ({
             paddingTop: 5
           }}
         >
-          {Object.keys(errorList).filter(k => errorList[k] === true).length !== 0
-            ? Object.keys(ERRORS_LIST).map(error => (
-                <View
-                  key={ERRORS_LIST[error]}
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center'
-                  }}
-                >
-                  <Icon
-                    name={errorList[error] ? 'close' : 'check'}
-                    color={errorList[error] ? 'red' : 'green'}
-                  />
+          {
+            //@ts-ignore
+            Object.keys(errorList).filter(k => errorList[k] === true).length !== 0
+              ? Object.keys(ERRORS_LIST).map(error => (
+                  <View
+                    //@ts-ignore
+                    key={ERRORS_LIST[error]}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center'
+                    }}
+                  >
+                    <Icon
+                      //@ts-ignore
+                      name={errorList[error] ? 'close' : 'check'}
+                      //@ts-ignore
+                      color={errorList[error] ? 'red' : 'green'}
+                    />
 
-                  <Paragraph style={{ marginLeft: 5 }} size={SIZE.xs}>
-                    {ERRORS_LIST[error]}
-                  </Paragraph>
-                </View>
-              ))
-            : null}
+                    <Paragraph style={{ marginLeft: 5 }} size={SIZE.xs}>
+                      {
+                        //@ts-ignore
+                        ERRORS_LIST[error]
+                      }
+                    </Paragraph>
+                  </View>
+                ))
+              : null
+          }
         </View>
       )}
     </>
diff --git a/apps/mobile/src/components/Notice/index.js b/apps/mobile/src/components/ui/notice/index.js
similarity index 80%
rename from apps/mobile/src/components/Notice/index.js
rename to apps/mobile/src/components/ui/notice/index.js
index ac22594a6..898f5346c 100644
--- a/apps/mobile/src/components/Notice/index.js
+++ b/apps/mobile/src/components/ui/notice/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import Paragraph from '../Typography/Paragraph';
+import { useTracked } from '../../../provider';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../icon-button';
+import Paragraph from '../typography/paragraph';
 
 export const Notice = ({ type, text, size }) => {
   const [state] = useTracked();
@@ -19,7 +19,7 @@ export const Notice = ({ type, text, size }) => {
         borderRadius: isSmall ? 5 : 10
       }}
     >
-      <ActionIcon
+      <IconButton
         size={isSmall ? SIZE.xs + 1 : SIZE.xxl}
         name={type}
         customStyle={{
diff --git a/apps/mobile/src/components/PressableButton/index.js b/apps/mobile/src/components/ui/pressable/index.tsx
similarity index 59%
rename from apps/mobile/src/components/PressableButton/index.js
rename to apps/mobile/src/components/ui/pressable/index.tsx
index de7f07b0d..7969a84a7 100644
--- a/apps/mobile/src/components/PressableButton/index.js
+++ b/apps/mobile/src/components/ui/pressable/index.tsx
@@ -1,23 +1,34 @@
-import React, { useCallback } from 'react';
-import { Pressable } from 'react-native';
-import { useTracked } from '../../provider';
-import { BUTTON_TYPES } from '../../utils';
-import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils';
-import { br } from '../../utils/SizeUtils';
+import React, { RefObject, useCallback } from 'react';
+import {
+  ColorValue,
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  ViewStyle
+} from 'react-native';
+import { useTracked } from '../../../provider';
+import { BUTTON_TYPES } from '../../../utils/constants';
+import { hexToRGBA, RGB_Linear_Shade } from '../../../utils/color-scheme/utils';
+import { br } from '../../../utils/size';
+import { defaultState } from '../../../provider/DefaultState';
 
-/**
- *
- * @typedef {Object} buttonTypes
- * @property {"transparent" | "gray" | "grayBg" | "accent" | "inverted" | "shade" | "grayAccent"} type type of button
- *
- *@param {buttonTypes} type
- *
- */
+export interface PressableButtonProps extends PressableProps {
+  customStyle?: ViewStyle;
+  noborder?: boolean;
+  type?: keyof typeof BUTTON_TYPES;
+  accentColor?: keyof typeof defaultState['colors'];
+  accentText?: keyof typeof defaultState['colors'];
+  customColor?: ColorValue;
+  customSelectedColor?: ColorValue;
+  customAlpha?: number;
+  customOpacity?: number;
+  fwdRef?: RefObject<any>;
+}
 
 export const PressableButton = ({
   children,
   onPress,
-  customStyle,
+  customStyle = {},
   onLongPress,
   hitSlop,
   testID,
@@ -31,12 +42,13 @@ export const PressableButton = ({
   customAlpha,
   customOpacity,
   fwdRef
-}) => {
+}: PressableButtonProps) => {
   const [state] = useTracked();
   const { colors } = state;
 
   const selectedColor =
     customSelectedColor ||
+    //@ts-ignore
     colors[
       type === 'accent'
         ? BUTTON_TYPES[type](accentColor, accentText).selected
@@ -44,6 +56,7 @@ export const PressableButton = ({
     ];
   const primaryColor =
     customColor ||
+    //@ts-ignore
     colors[
       type === 'accent'
         ? BUTTON_TYPES[type](accentColor, accentText).primary
@@ -53,11 +66,12 @@ export const PressableButton = ({
     ? customOpacity
     : type === 'accent'
     ? 1
-    : BUTTON_TYPES[type].opacity;
+    : //@ts-ignore
+      BUTTON_TYPES[type].opacity;
   const alpha = customAlpha ? customAlpha : colors.night ? 0.04 : -0.04;
 
   const getStyle = useCallback(
-    ({ pressed }) => [
+    ({ pressed }: PressableStateCallbackType): ViewStyle | ViewStyle[] => [
       {
         backgroundColor: pressed
           ? RGB_Linear_Shade(alpha, hexToRGBA(selectedColor, opacity || 1))
diff --git a/apps/mobile/src/components/Seperator/index.js b/apps/mobile/src/components/ui/seperator/index.tsx
similarity index 100%
rename from apps/mobile/src/components/Seperator/index.js
rename to apps/mobile/src/components/ui/seperator/index.tsx
diff --git a/apps/mobile/src/components/Sheet/index.js b/apps/mobile/src/components/ui/sheet/index.js
similarity index 89%
rename from apps/mobile/src/components/Sheet/index.js
rename to apps/mobile/src/components/ui/sheet/index.js
index 8f8957f12..e2eb5b77c 100644
--- a/apps/mobile/src/components/Sheet/index.js
+++ b/apps/mobile/src/components/ui/sheet/index.js
@@ -2,12 +2,12 @@ import React from 'react';
 import { Platform, View } from 'react-native';
 import ActionSheet from 'react-native-actions-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTracked } from '../../provider';
-import { useSettingStore } from '../../provider/stores';
-import layoutmanager from '../../utils/layout-manager';
-import { PremiumToast } from '../Premium/premium-toast';
-import { Toast } from '../Toast';
-import { BouncingView } from '../Transitions/bouncing-view';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import layoutmanager from '../../../utils/layout-manager';
+import { PremiumToast } from '../../premium/premium-toast';
+import { Toast } from '../../toast';
+import { BouncingView } from '../transitions/bouncing-view';
 
 const SheetWrapper = ({
   children,
diff --git a/apps/mobile/src/components/ui/svg/index.tsx b/apps/mobile/src/components/ui/svg/index.tsx
new file mode 100644
index 000000000..6b0413e49
--- /dev/null
+++ b/apps/mobile/src/components/ui/svg/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+
+export const SvgView = ({
+  width = 250,
+  height = 250,
+  src
+}: {
+  width: number | string;
+  height: number | number;
+  src: string;
+}) => {
+  return (
+    <View
+      style={{
+        height: width || 250,
+        width: height || 250
+      }}
+    >
+      <SvgXml xml={src} width="100%" height="100%" />
+    </View>
+  );
+};
diff --git a/apps/mobile/src/components/ui/timesince/index.tsx b/apps/mobile/src/components/ui/timesince/index.tsx
new file mode 100644
index 000000000..e871931c0
--- /dev/null
+++ b/apps/mobile/src/components/ui/timesince/index.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { TextProps } from 'react-native';
+import { timeSince } from '../../../utils/time';
+import Paragraph from '../typography/paragraph';
+
+interface TimeSinceProps extends TextProps {
+  updateFrequency: number;
+  time: number;
+}
+
+export const TimeSince = ({ time, style, updateFrequency = 30000 }: TimeSinceProps) => {
+  const [timeAgo, setTimeAgo] = useState<string | null>(null);
+  const interval = useRef<NodeJS.Timer>();
+
+  useEffect(() => {
+    let t = timeSince(time || Date.now());
+    setTimeAgo(t);
+    interval.current = setInterval(() => {
+      t = timeSince(time);
+      setTimeAgo(t);
+    }, updateFrequency);
+    return () => {
+      interval.current && clearInterval(interval.current);
+    };
+  }, [time, updateFrequency]);
+
+  return <Paragraph style={style}>{timeAgo}</Paragraph>;
+};
diff --git a/apps/mobile/src/components/Transitions/bouncingview.js b/apps/mobile/src/components/ui/transitions/bouncingview.js
similarity index 100%
rename from apps/mobile/src/components/Transitions/bouncingview.js
rename to apps/mobile/src/components/ui/transitions/bouncingview.js
diff --git a/apps/mobile/src/components/Transitions/movableview.js b/apps/mobile/src/components/ui/transitions/movableview.js
similarity index 100%
rename from apps/mobile/src/components/Transitions/movableview.js
rename to apps/mobile/src/components/ui/transitions/movableview.js
diff --git a/apps/mobile/src/components/Typography/Heading.js b/apps/mobile/src/components/ui/typography/heading.js
similarity index 90%
rename from apps/mobile/src/components/Typography/Heading.js
rename to apps/mobile/src/components/ui/typography/heading.js
index 43affe410..7f6fcab89 100644
--- a/apps/mobile/src/components/Typography/Heading.js
+++ b/apps/mobile/src/components/ui/typography/heading.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import { Text } from 'react-native';
-import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
+import { useTracked } from '../../../provider';
+import { SIZE } from '../../../utils/size';
 
 /**
  *
diff --git a/apps/mobile/src/components/Typography/Paragraph.js b/apps/mobile/src/components/ui/typography/paragraph.js
similarity index 89%
rename from apps/mobile/src/components/Typography/Paragraph.js
rename to apps/mobile/src/components/ui/typography/paragraph.js
index 9e6a952d2..64ba961f8 100644
--- a/apps/mobile/src/components/Typography/Paragraph.js
+++ b/apps/mobile/src/components/ui/typography/paragraph.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
+import { useTracked } from '../../../provider';
+import { SIZE } from '../../../utils/size';
 
 /**
  *
diff --git a/apps/mobile/src/components/Update/index.js b/apps/mobile/src/components/update/index.js
similarity index 95%
rename from apps/mobile/src/components/Update/index.js
rename to apps/mobile/src/components/update/index.js
index e52b1ed36..b8b6ba5a5 100644
--- a/apps/mobile/src/components/Update/index.js
+++ b/apps/mobile/src/components/update/index.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { Linking, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useTracked } from '../../provider';
-import { STORE_LINK } from '../../utils';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import { SvgToPngView } from '../ListPlaceholders';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { STORE_LINK } from '../../utils/constants';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { SvgView } from '../ui/svg';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const UPDATE_SVG = color =>
   `<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="774" height="669.5" viewBox="0 0 774 669.5" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M938.2145,322.3829C936.73266,207.5841,878.16775,115.25,806.13079,115.25c-43.29082,0-81.71777,33.346-105.81477,84.87331l28.33157,71.08654-39.15446-43.81576c-9.876,29.64743-15.48115,63.49569-15.48115,99.44475a324.20917,324.20917,0,0,0,9.98686,80.80891l75.92761-12.24058-67.9507,37.99628c22.13728,60.69069,62.59851,102.1414,109.23586,104.87608l-8.988,244.5184,27.81449.99338-5.94527-245.75716c66.41162-6.32443,119.60967-91.20375,123.8712-197.42794l-45.89372-25.66252Z" transform="translate(-213 -115.25)" fill="#f0f0f0"/><rect x="157.51532" y="354.40187" width="6.60151" height="49.25266" fill="${color}"/><polygon points="187.815 376.276 182.98 380.779 160.823 356.936 138.658 380.779 133.823 376.276 160.823 347.243 187.815 376.276" fill="${color}"/><path d="M371.9876,543.6602a52.8121,52.8121,0,1,1,52.8121-52.81209A52.87183,52.87183,0,0,1,371.9876,543.6602Zm0-99.02268a46.21059,46.21059,0,1,0,46.21058,46.21059A46.26275,46.26275,0,0,0,371.9876,444.63752Z" transform="translate(-213 -115.25)" fill="${color}"/><rect x="212.75248" y="253.9314" width="3.63974" height="27.15545" fill="#e4e4e4"/><polygon points="229.458 265.992 226.793 268.475 214.576 255.328 202.356 268.475 199.69 265.992 214.576 249.984 229.458 265.992" fill="#e4e4e4"/><path d="M426.56422,409.9859a29.118,29.118,0,1,1,29.118-29.118A29.15089,29.15089,0,0,1,426.56422,409.9859Zm0-54.59616A25.47821,25.47821,0,1,0,452.04243,380.868,25.507,25.507,0,0,0,426.56422,355.38974Z" transform="translate(-213 -115.25)" fill="#e4e4e4"/><rect x="99.52274" y="186.73872" width="3.63974" height="27.15545" fill="#e4e4e4"/><polygon points="116.229 198.799 113.563 201.282 101.346 188.136 89.126 201.282 86.46 198.799 101.346 182.792 116.229 198.799" fill="#e4e4e4"/><path d="M313.33448,342.79321a29.118,29.118,0,1,1,29.118-29.118A29.15088,29.15088,0,0,1,313.33448,342.79321Zm0-54.59615a25.47821,25.47821,0,1,0,25.47821,25.4782A25.507,25.507,0,0,0,313.33448,288.19706Z" transform="translate(-213 -115.25)" fill="#e4e4e4"/><path d="M518.7325,635.91942a8.22484,8.22484,0,0,1,.958-12.302,9.56322,9.56322,0,0,1,1.26081-.83521l-6.99347-30.13439,16.26512,5.84042,4.14749,27.72073a8.21849,8.21849,0,0,1-2.21462,10.58849A10.12952,10.12952,0,0,1,518.7325,635.91942Z" transform="translate(-213 -115.25)" fill="#ffb8b8"/><path d="M516.88531,612.40706l-.08727-.29605c-8.79267-29.805-17.88169-60.6154-28.97824-94.16236l-.0728-.21977.2448-.13088c6.18493-3.30762,15.48114-3.08736,21.62358.51183,5.68293,3.33,8.55569,9.77159,7.0024,15.68347l8.09328,38.67327c3.29039,12.64158,6.69574,25.72668,9.95036,38.62892l.09229.36576-.504.0295c-5.92592.34536-12.04821.70254-16.95322.89973Z" transform="translate(-213 -115.25)" fill="#ccc"/><polygon points="229.16 657.57 217.627 657.57 212.138 616.801 229.16 616.801 229.16 657.57" fill="#ffb8b8"/><path d="M445.10175,783.06559H407.9141v-.43107c0-7.31472,6.49345-13.26551,14.47493-13.26551h22.71272Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><polygon points="337.837 648.851 326.848 652.06 308.113 614.743 324.331 610.006 337.837 648.851" fill="#ffb8b8"/><path d="M521.60173,783.39141l-.14262-.41086c-2.42325-6.96953,1.79234-14.4459,9.39693-16.66692l21.64062-6.31955,4.53736,13.05Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><ellipse cx="279.46347" cy="354.21043" rx="23.10522" ry="21.17504" fill="#ffb8b8"/><path d="M502.83713,465.536c.13132-8.54065-3.76885-16.99907-9.79916-21.25171a16.77762,16.77762,0,0,0-19.87954.322c-5.937,4.44645-9.65428,13.02823-9.33974,21.56167C477.12124,466.20257,490.42379,466.23726,502.83713,465.536Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M448.74454,759.69687l-.46255-.04125c-10.03358-.90255-20.40891-1.83457-30.21419-1.9415l-.5333-.00589.07281-.48411c2.32311-15.42,3.30793-31.45044,4.26037-46.9538.9405-15.308,1.91269-31.13682,4.17769-46.17039.95818-4.0257,1.892-8.00342,2.82264-11.96682,7.70037-32.79837,14.97378-63.77816,29.98728-94.44433l.14194-.28963.34381.03789c14.08679,1.56221,27.62283,6.27241,38.11391,13.26256l.20326.13513-.00988.23027a131.25944,131.25944,0,0,0-.10174,14.17269,44.82523,44.82523,0,0,1,7.48241,42.489c4.13084,12.65215,8.40154,25.73075,12.75907,38.63212,10.5818,26.587,21.53153,54.10056,32.75594,81.99045l.1842.45717-.51791.11114c-8.07587,1.73775-16.40668,3.52938-24.62518,4.22482l-.31028.0261-.14745-.25174a587.30717,587.30717,0,0,1-50.88262-112.12662c-2.80473,7.83882-6.84508,14.91443-10.75934,21.76819a157.11556,157.11556,0,0,0-9.86087,19.31354c-1.73239,13.0365-2.192,27.16078-2.63591,40.81947-.42007,12.91442-.81671,25.11236-2.19312,36.582Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M484.57528,444.67592c10.01507-1.97751,21.093-.09617,28.95819,6.09651s11.85919,16.9058,8.62805,26.09364-14.20114,15.65236-24.12,13.27969c2.84131-7.33881-.35623-16.34918-7.302-20.57639C482.50242,464.55626,480.23475,452.58775,484.57528,444.67592Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M496.73471,571.62025l-.36633-.15281c-12.77629-5.34207-25.30408-9.441-37.04181-13.18089l-.35989-.07114-.00092-.95644.23358.07451c.04915-.09935.1045-.21217.16008-.32456.16031-.325.26963-.54642.36264-.69292l-.00252-.00126c.97862-1.82742,1.75651-3.59337,2.50868-5.30123.77628-1.76259,1.5776-3.58243,2.61295-5.50793a15.68833,15.68833,0,0,1-4.02289-17.95719c2.593-5.63211,9.20424-10.01859,16.15083-10.74644,2.54543-6.42185,8.21712-19.91552,8.21712-19.91552s11.92674-.30015,16.72316-.85793l.08062-.00926.07923.016c10.4711,2.10273,19.213,11.1834,21.25846,22.08265,1.72665,9.199-.89525,19.721-7.38227,29.62807A128.7532,128.7532,0,0,1,504.93,561.61682c-2.92186,3.34837-5.68157,6.51067-7.97367,9.69571Z" transform="translate(-213 -115.25)" fill="#ccc"/><path d="M519.3919,459.10521v0Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M519.861,457.22412c-7.01076-.95907-12.51527-7.52688-11.71835-13.982s7.76344-11.72977,14.83079-11.22907,13.06654,6.694,12.77147,13.18459S528.81221,458.44864,519.861,457.22412Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M518.76646,453.03852c-7.01067-.95906-12.51516-7.52688-11.71821-13.98194.54524-4.41578,3.9788-8.27657,8.35539-10.11667-5.65378,1.13408-10.51956,5.64916-11.17757,10.97881-.79695,6.45506,4.70754,13.02288,11.71821,13.98195a14.465,14.465,0,0,0,7.6875-.98538A14.866,14.866,0,0,1,518.76646,453.03852Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M382.77632,566.82181a9.99626,9.99626,0,0,1,12.97554-3.271,9.61149,9.61149,0,0,1,1.27935.81118l28.67233-16.08336-.58936,16.00057-27.13738,12.82a10.15042,10.15042,0,0,1-11.63139,1.61428A8.34216,8.34216,0,0,1,382.77632,566.82181Z" transform="translate(-213 -115.25)" fill="#ffb8b8"/><path d="M406.35053,557.3917l.2755-.17406c27.73394-17.52829,56.40359-35.64765,87.2197-56.41349l.20185-.13613.21621.16792c5.46363,4.24233,8.33439,12.34854,6.67808,18.85539-1.5324,6.02009-7.20243,10.64869-13.80215,11.27624L450.049,550.84631c-11.90943,7.05521-24.23685,14.35751-36.42636,21.46865l-.34555.20162-.19828-.42571c-2.32974-5.0055-4.73707-10.17674-6.57422-14.34943Z" transform="translate(-213 -115.25)" fill="#ccc"/><path d="M986,784.75H214a1,1,0,0,1,0-2H986a1,1,0,0,1,0,2Z" transform="translate(-213 -115.25)" fill="#cacaca"/></svg>`;
@@ -47,7 +47,7 @@ export const Update = ({ version, fwdRef }) => {
           <Paragraph>v{version.version} has been released</Paragraph>
         </View>
 
-        <SvgToPngView src={UPDATE_SVG(colors.accent)} width={100} height={100} />
+        <SvgView src={UPDATE_SVG(colors.accent)} width={100} height={100} />
       </View>
 
       <Seperator />
diff --git a/apps/mobile/src/components/Walkthrough/index.tsx b/apps/mobile/src/components/walkthroughs/index.tsx
similarity index 91%
rename from apps/mobile/src/components/Walkthrough/index.tsx
rename to apps/mobile/src/components/walkthroughs/index.tsx
index 1fecae7dc..bd9111df8 100644
--- a/apps/mobile/src/components/Walkthrough/index.tsx
+++ b/apps/mobile/src/components/walkthroughs/index.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import { LayoutAnimation, View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet } from '../../services/EventManager';
-import { eCloseProgressDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseProgressDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import walkthroughs, { TStep } from './walkthroughs';
 
 export const Walkthrough = ({ steps, canSkip = true }: { steps: TStep[]; canSkip: boolean }) => {
diff --git a/apps/mobile/src/components/Walkthrough/walkthroughs.tsx b/apps/mobile/src/components/walkthroughs/walkthroughs.tsx
similarity index 92%
rename from apps/mobile/src/components/Walkthrough/walkthroughs.tsx
rename to apps/mobile/src/components/walkthroughs/walkthroughs.tsx
index 00fbc8133..1d99481d9 100644
--- a/apps/mobile/src/components/Walkthrough/walkthroughs.tsx
+++ b/apps/mobile/src/components/walkthroughs/walkthroughs.tsx
@@ -5,16 +5,16 @@ import { COMMUNITY_SVG, LAUNCH_ROCKET, SUPPORT_SVG, WELCOME_SVG } from '../../as
 import { TrackedState, useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eOpenAddNotebookDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import useRotator from '../../utils/use-rotator';
+import { eOpenAddNotebookDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import useRotator from '../../utils/hooks/use-rotator';
 import { AccentColorPicker } from '../../views/Settings/appearance';
-import { Button } from '../Button';
-import { SvgToPngView } from '../ListPlaceholders';
-import { PinItem } from '../Menu/TagsSection';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { Button } from '../ui/button';
+import { SvgView } from '../ui/svg';
+import { PinItem } from '../side-menu/pinned-section';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export type TStep = {
   text?: string;
@@ -283,7 +283,7 @@ const trialstarted: { id: string; steps: TStep[] } = {
     {
       title: 'Your trial is activated',
       text: 'You can use all permium features for free for the next 14 days',
-      walkthroughItem: colors => <SvgToPngView src={LAUNCH_ROCKET(colors.pri)} />,
+      walkthroughItem: colors => <SvgView src={LAUNCH_ROCKET(colors.pri)} />,
       button: {
         type: 'next',
         title: 'Next'
@@ -302,7 +302,7 @@ const trialstarted: { id: string; steps: TStep[] } = {
     {
       title: 'Join the cause',
       text: 'Meet other privacy-minded people and talk to us directly about your concerns, issues and suggestions.',
-      walkthroughItem: colors => <SvgToPngView src={COMMUNITY_SVG(colors.pri)} />,
+      walkthroughItem: colors => <SvgView src={COMMUNITY_SVG(colors.pri)} />,
       button: {
         type: 'done',
         title: 'Continue'
@@ -323,7 +323,7 @@ const emailconfirmed: { id: string; steps: TStep[] } = {
     {
       title: 'Email confirmed',
       text: 'Your email was confirmed successfully. Thank you for choosing end-to-end encrypted note taking.',
-      walkthroughItem: colors => <SvgToPngView src={WELCOME_SVG(colors.pri)} />,
+      walkthroughItem: colors => <SvgView src={WELCOME_SVG(colors.pri)} />,
       button: {
         type: 'done',
         title: 'Continue'
@@ -343,7 +343,7 @@ const Support = () => {
         alignItems: 'center'
       }}
     >
-      <SvgToPngView src={SUPPORT_SVG()} />
+      <SvgView src={SUPPORT_SVG()} />
       <Heading>Get Priority Support</Heading>
       <Paragraph
         style={{
@@ -412,7 +412,7 @@ const prouser: { id: string; steps: TStep[] } = {
     {
       title: 'Welcome to Notesnook Pro',
       text: 'Thank you for reaffirming our idea that privacy comes first',
-      walkthroughItem: colors => <SvgToPngView src={LAUNCH_ROCKET(colors.pri)} />,
+      walkthroughItem: colors => <SvgView src={LAUNCH_ROCKET(colors.pri)} />,
       button: {
         type: 'next',
         title: 'Next'
diff --git a/apps/mobile/src/navigation/NavigatorStack.js b/apps/mobile/src/navigation/NavigatorStack.js
index 38c9d8d15..a105e7ba5 100644
--- a/apps/mobile/src/navigation/NavigatorStack.js
+++ b/apps/mobile/src/navigation/NavigatorStack.js
@@ -1,15 +1,15 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
-import Container from '../components/Container';
+import Container from '../components/container';
 import { useTracked } from '../provider';
 import { useSelectionStore } from '../provider/stores';
 import { eSendEvent } from '../services/EventManager';
 import Navigation from '../services/Navigation';
 import { history } from '../utils';
-import { MMKV } from '../utils/mmkv';
-import { rootNavigatorRef } from '../utils/Refs';
-import { hideAllTooltips } from '../utils/use-tooltip';
+import { hideAllTooltips } from '../utils/hooks/use-tooltip';
+import { MMKV } from '../utils/database/mmkv';
+import { rootNavigatorRef } from '../utils/global-refs';
 import Favorites from '../views/Favorites';
 import Folders from '../views/Folders';
 import Home from '../views/Home';
diff --git a/apps/mobile/src/navigation/RootView.js b/apps/mobile/src/navigation/RootView.js
index 62401e5ac..ed51d458d 100644
--- a/apps/mobile/src/navigation/RootView.js
+++ b/apps/mobile/src/navigation/RootView.js
@@ -5,25 +5,25 @@ import { StatusBar } from 'react-native-bars';
 import Animated, { useValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { notesnook } from '../../e2e/test.ids';
-import CustomTabs from '../components/CustomTabs';
-import { DialogManager } from '../components/DialogManager';
-import { Menu } from '../components/Menu';
-import { Toast } from '../components/Toast';
+import Tabs from '../components/tabs';
+import DialogProvider from '../components/dialog-provider';
+import { SideMenu } from '../components/side-menu';
+import { Toast } from '../components/toast';
 import { useTracked } from '../provider';
 import { useEditorStore, useSettingStore } from '../provider/stores';
 import { DDS } from '../services/DeviceDetection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../services/EventManager';
 import { editing, setWidthHeight } from '../utils';
-import { updateStatusBarColor } from '../utils/Colors';
+import { updateStatusBarColor } from '../utils/color-scheme';
 import {
   eClearEditor,
   eCloseFullscreenEditor,
   eOnLoadNote,
   eOpenFullscreenEditor
-} from '../utils/Events';
-import { editorRef, tabBarRef } from '../utils/Refs';
-import { sleep } from '../utils/TimeUtils';
-import useTooltip, { hideAllTooltips } from '../utils/use-tooltip';
+} from '../utils/events';
+import { hideAllTooltips } from '../utils/hooks/use-tooltip';
+import { editorRef, tabBarRef } from '../utils/global-refs';
+import { sleep } from '../utils/time';
 import { EditorWrapper } from '../views/Editor/EditorWrapper';
 import { checkStatus, EditorWebView, getNote } from '../views/Editor/Functions';
 import tiny from '../views/Editor/tiny/tiny';
@@ -76,7 +76,7 @@ export const RootView = React.memo(
       <>
         <NativeStack />
         <Toast />
-        <DialogManager />
+        <DialogProvider />
       </>
     );
   },
@@ -305,7 +305,7 @@ const NativeStack = React.memo(
           width: fullscreen ? 0 : widths[deviceMode].a
         }}
       >
-        <Menu />
+        <SideMenu />
       </View>,
       <View
         key="2"
@@ -351,7 +351,7 @@ const NativeStack = React.memo(
       >
         <StatusBar animated={true} barStyle={colors.night ? 'light-content' : 'dark-content'} />
         {deviceMode ? (
-          <CustomTabs
+          <Tabs
             ref={tabBarRef}
             dimensions={dimensions}
             widths={widths[deviceMode]}
diff --git a/apps/mobile/src/provider/DefaultState.js b/apps/mobile/src/provider/DefaultState.js
index 68bea76a7..50ad9cacd 100644
--- a/apps/mobile/src/provider/DefaultState.js
+++ b/apps/mobile/src/provider/DefaultState.js
@@ -1,5 +1,5 @@
 import { Appearance } from 'react-native';
-import { COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../utils/Colors';
+import { COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../utils/color-scheme';
 const darkScheme = Appearance.getColorScheme() === 'dark';
 export const defaultState = {
   colors: darkScheme ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT
diff --git a/apps/mobile/src/provider/stores.ts b/apps/mobile/src/provider/stores.ts
index d10d6cf78..783d44978 100644
--- a/apps/mobile/src/provider/stores.ts
+++ b/apps/mobile/src/provider/stores.ts
@@ -1,33 +1,33 @@
-import { LayoutAnimation, Platform, UIManager } from 'react-native';
-import { Dimensions } from 'react-native';
+//@ts-ignore
+import { groupArray } from 'notes-core/utils/grouping';
+import { Dimensions, Platform } from 'react-native';
 import create from 'zustand';
-import PremiumService from '../services/PremiumService';
-import { history, SUBSCRIPTION_STATUS } from '../utils';
 import { APP_VERSION } from '../../version';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../services/EventManager';
+import PremiumService from '../services/PremiumService';
+import { history } from '../utils';
+import { SUBSCRIPTION_STATUS } from '../utils/constants';
 import { db } from '../utils/database';
-import { MMKV } from '../utils/mmkv';
+import { MMKV } from '../utils/database/mmkv';
+import layoutmanager from '../utils/layout-manager';
+import { EditorWebView } from '../views/Editor/Functions';
+import tiny from '../views/Editor/tiny/tiny';
+import { endSearch } from '../views/Editor/tiny/toolbar/commands';
 import {
+  Announcement,
+  EditorStore,
+  FavoriteStore,
   MenuStore,
   MessageStore,
-  NoteStore,
   NotebookStore,
-  TagStore,
-  TrashStore,
+  NoteStore,
   SearchStore,
   SelectionStore,
   SettingStore,
-  EditorStore,
-  FavoriteStore,
-  UserStore,
-  Announcement
+  TagStore,
+  TrashStore,
+  UserStore
 } from './interfaces';
-//@ts-ignore
-import { groupArray } from 'notes-core/utils/grouping';
-import { EditorWebView, post } from '../views/Editor/Functions';
-import tiny from '../views/Editor/tiny/tiny';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../services/EventManager';
-import { endSearch } from '../views/Editor/tiny/toolbar/commands';
-import layoutmanager from '../utils/layout-manager';
 
 export const useNoteStore = create<NoteStore>((set, get) => ({
   notes: [],
diff --git a/apps/mobile/src/services/Backup.js b/apps/mobile/src/services/Backup.js
index 403c6040c..c4ab49d03 100644
--- a/apps/mobile/src/services/Backup.js
+++ b/apps/mobile/src/services/Backup.js
@@ -1,15 +1,15 @@
-const { MMKV } = require('../utils/MMKV');
+const { MMKV } = require('../utils/database/MMKV');
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Platform } from 'react-native';
 import FileViewer from 'react-native-file-viewer';
 import * as ScopedStorage from 'react-native-scoped-storage';
 import Share from 'react-native-share';
-import { presentDialog } from '../components/Dialog/functions';
+import { presentDialog } from '../components/dialog/functions';
 import { db } from '../utils/database';
-import { eCloseProgressDialog } from '../utils/Events';
-import { sanitizeFilename } from '../utils/filename';
-import storage from '../utils/storage';
-import { sleep } from '../utils/TimeUtils';
+import { eCloseProgressDialog } from '../utils/events';
+import { sanitizeFilename } from '../utils/sanitizer';
+import storage from '../utils/database/storage';
+import { sleep } from '../utils/time';
 import { eSendEvent, presentSheet, ToastEvent } from './EventManager';
 import SettingsService from './SettingsService';
 
diff --git a/apps/mobile/src/services/BiometricService.js b/apps/mobile/src/services/BiometricService.js
index e0bd22451..106a38c83 100644
--- a/apps/mobile/src/services/BiometricService.js
+++ b/apps/mobile/src/services/BiometricService.js
@@ -1,9 +1,9 @@
 import FingerprintScanner from 'react-native-fingerprint-scanner';
-import Storage from '../utils/storage';
+import Storage from '../utils/database/storage';
 import { ToastEvent } from './EventManager';
 import * as Keychain from 'react-native-keychain';
 import { Platform } from 'react-native';
-import { MMKV } from '../utils/mmkv';
+import { MMKV } from '../utils/database/mmkv';
 import { useSettingStore } from '../provider/stores';
 
 const CRYPT_CONFIG = Platform.select({
diff --git a/apps/mobile/src/services/EventManager.js b/apps/mobile/src/services/EventManager.js
index 06b200ce7..ab2a24c97 100644
--- a/apps/mobile/src/services/EventManager.js
+++ b/apps/mobile/src/services/EventManager.js
@@ -5,7 +5,7 @@ import {
   eOpenProgressDialog,
   eOpenVaultDialog,
   eShowToast
-} from '../utils/Events';
+} from '../utils/events';
 const eventManager = new EventManager();
 
 export const eSubscribeEvent = (eventName, action) => {
diff --git a/apps/mobile/src/services/Exporter.js b/apps/mobile/src/services/Exporter.js
index 409f44ecb..b0feede8c 100644
--- a/apps/mobile/src/services/Exporter.js
+++ b/apps/mobile/src/services/Exporter.js
@@ -3,11 +3,10 @@ import { Platform } from 'react-native';
 import RNHTMLtoPDF from 'react-native-html-to-pdf-lite';
 import * as ScopedStorage from 'react-native-scoped-storage';
 import RNFetchBlob from 'rn-fetch-blob';
-import showdown from 'showdown';
 import { toTXT } from '../utils';
 import { db } from '../utils/database';
-import { sanitizeFilename } from '../utils/filename';
-import Storage from '../utils/storage';
+import { sanitizeFilename } from '../utils/sanitizer';
+import Storage from '../utils/database/storage';
 
 const defaultStyle = `<style>
 .img_size_one {
diff --git a/apps/mobile/src/services/Message.js b/apps/mobile/src/services/Message.js
index 791892f2b..8289a8a11 100644
--- a/apps/mobile/src/services/Message.js
+++ b/apps/mobile/src/services/Message.js
@@ -1,11 +1,11 @@
 import { useMessageStore } from '../provider/stores';
-import { eOpenLoginDialog, eOpenRateDialog, eOpenRecoveryKeyDialog } from '../utils/Events';
+import { eOpenLoginDialog, eOpenRateDialog, eOpenRecoveryKeyDialog } from '../utils/events';
 import { eSendEvent } from './EventManager';
 import PremiumService from './PremiumService';
 import { verifyUser } from '../views/Settings/functions';
-import { MMKV } from '../utils/mmkv';
+import { MMKV } from '../utils/database/mmkv';
 import { Platform } from 'react-native';
-import umami from '../utils/umami';
+import umami from '../utils/analytics';
 
 const rateAppMessage = {
   visible: true,
diff --git a/apps/mobile/src/services/Navigation.js b/apps/mobile/src/services/Navigation.js
index 0f652301d..0434858db 100755
--- a/apps/mobile/src/services/Navigation.js
+++ b/apps/mobile/src/services/Navigation.js
@@ -6,8 +6,8 @@ import {
   useTagStore,
   useTrashStore
 } from '../provider/stores';
-import { eOnNewTopicAdded, refreshNotesPage } from '../utils/Events';
-import { rootNavigatorRef, tabBarRef } from '../utils/Refs';
+import { eOnNewTopicAdded, refreshNotesPage } from '../utils/events';
+import { rootNavigatorRef, tabBarRef } from '../utils/global-refs';
 import { eSendEvent } from './EventManager';
 import SettingsService from './SettingsService';
 
diff --git a/apps/mobile/src/services/Notifications.ts b/apps/mobile/src/services/Notifications.ts
index 2cfa0dd4d..4a114d028 100644
--- a/apps/mobile/src/services/Notifications.ts
+++ b/apps/mobile/src/services/Notifications.ts
@@ -1,17 +1,16 @@
-import { useNoteStore } from './../provider/stores';
-import PushNotificationIOS from '@react-native-community/push-notification-ios';
 import { Platform } from 'react-native';
 import PushNotification, {
   Importance,
   PushNotificationDeliveredObject
 } from 'react-native-push-notification';
-import { eSendEvent } from './EventManager';
-import { db } from '../utils/database';
-import { DDS } from './DeviceDetection';
-import { tabBarRef } from '../utils/Refs';
-import { eOnLoadNote } from '../utils/Events';
 import { editing } from '../utils';
-import { MMKV } from '../utils/mmkv';
+import { db } from '../utils/database';
+import { MMKV } from '../utils/database/mmkv';
+import { eOnLoadNote } from '../utils/events';
+import { tabBarRef } from '../utils/global-refs';
+import { useNoteStore } from './../provider/stores';
+import { DDS } from './DeviceDetection';
+import { eSendEvent } from './EventManager';
 import SettingsService from './SettingsService';
 
 const NOTIFICATION_TAG = 'notesnook';
@@ -20,7 +19,7 @@ let pinned: PushNotificationDeliveredObject[] = [];
 
 function loadNote(id: string, jump: boolean) {
   if (!id || id === 'notesnook_note_input') return;
-  let note = db.notes.note(id).data;
+  let note = db.notes?.note(id).data;
   if (!DDS.isTab && jump) {
     tabBarRef.current?.goToPage(1);
   }
@@ -82,7 +81,7 @@ function init() {
             id: 256266
           });
           await db.init();
-          await db.notes.add({
+          await db.notes?.add({
             content: {
               type: 'tiny',
               //@ts-ignore
diff --git a/apps/mobile/src/services/PremiumService.js b/apps/mobile/src/services/PremiumService.js
index 11cf46698..1a32ba0f1 100644
--- a/apps/mobile/src/services/PremiumService.js
+++ b/apps/mobile/src/services/PremiumService.js
@@ -2,15 +2,15 @@ import { CHECK_IDS } from 'notes-core/common';
 import React from 'react';
 import { Platform } from 'react-native';
 import * as RNIap from 'react-native-iap';
-import DialogHeader from '../components/Dialog/dialog-header';
-import { CompactFeatures } from '../components/Premium/compact-features';
-import { PricingPlans } from '../components/Premium/pricing-plans';
-import Seperator from '../components/Seperator';
+import DialogHeader from '../components/dialog/dialog-header';
+import { CompactFeatures } from '../components/premium/compact-features';
+import { PricingPlans } from '../components/premium/pricing-plans';
+import Seperator from '../components/ui/seperator';
 import { useUserStore } from '../provider/stores';
-import { itemSkus, SUBSCRIPTION_STATUS } from '../utils';
+import { itemSkus, SUBSCRIPTION_STATUS } from '../utils/constants';
 import { db } from '../utils/database';
-import { eOpenPremiumDialog, eOpenTrialEndingDialog, eShowGetPremium } from '../utils/Events';
-import { MMKV } from '../utils/mmkv';
+import { eOpenPremiumDialog, eOpenTrialEndingDialog, eShowGetPremium } from '../utils/events';
+import { MMKV } from '../utils/database/mmkv';
 import { eSendEvent, presentSheet, ToastEvent } from './EventManager';
 
 let premiumStatus = 0;
diff --git a/apps/mobile/src/services/SettingsService.js b/apps/mobile/src/services/SettingsService.js
index 626092b43..1fd940b5b 100644
--- a/apps/mobile/src/services/SettingsService.js
+++ b/apps/mobile/src/services/SettingsService.js
@@ -1,12 +1,12 @@
 import { Platform } from 'react-native';
 import { enabled } from 'react-native-privacy-snapshot';
-import { updateEvent } from '../components/DialogManager/recievers';
+import { updateEvent } from '../components/dialog-provider/recievers';
 import { Actions } from '../provider/Actions';
 import { useSettingStore } from '../provider/stores';
 import { AndroidModule } from '../utils';
-import { getColorScheme } from '../utils/ColorUtils';
-import { MMKV } from '../utils/mmkv';
-import { scale, updateSize } from '../utils/SizeUtils';
+import { getColorScheme } from '../utils/color-scheme/utils';
+import { MMKV } from '../utils/database/mmkv';
+import { scale, updateSize } from '../utils/size';
 import Notifications from './Notifications';
 
 export const defaultSettings = {
diff --git a/apps/mobile/src/services/Validation.js b/apps/mobile/src/services/Validation.js
index 21ffebee4..b7ab2cd99 100644
--- a/apps/mobile/src/services/Validation.js
+++ b/apps/mobile/src/services/Validation.js
@@ -23,10 +23,6 @@ export function validatePass(password) {
 
   let errors = {
     SHORT_PASS: true
-    //  NO_ABC: true,
-    //  NO_CAPS_ABC: true,
-    //  NO_NUM: true,
-    // SPECIAL: true,
   };
 
   if (password.length >= 8) {
diff --git a/apps/mobile/src/services/tipmanager.ts b/apps/mobile/src/services/tipmanager.ts
index 9d46b7665..b01243171 100644
--- a/apps/mobile/src/services/tipmanager.ts
+++ b/apps/mobile/src/services/tipmanager.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { MMKV } from '../utils/mmkv';
+import { MMKV } from '../utils/database/mmkv';
 
 //@ts-ignore
 Array.prototype.sample = function () {
diff --git a/apps/mobile/src/utils/Animations.js b/apps/mobile/src/utils/Animations.js
deleted file mode 100644
index 54d594d1b..000000000
--- a/apps/mobile/src/utils/Animations.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Dimensions } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
-import { editing } from './index';
-
-const { Value, timing } = Animated;
-
-export const EditorPosition = new Value(0);
-export const EditorScale = new Value(1);
-export const EditorOpacity = new Value(0);
-export const EditorTranslateY = new Value(Dimensions.get('window').height * 2);
-
-export const anim1 = new Animated.Value(-Dimensions.get('window').height);
-export let animInitialValue = -Dimensions.get('window').height;
-export const opacityAnimSearch = new Animated.Value(1);
-export const setAnimValue = value => (animInitialValue = value);
-
-export let currentPage = 'main';
-export function searchViewAnimation(translate, opacity, next, duration = 150) {
-  currentPage = next;
-  timing(anim1, {
-    toValue: translate,
-    duration: duration,
-    easing: Easing.inOut(Easing.ease)
-  }).start();
-  timing(opacityAnimSearch, {
-    toValue: opacity,
-    duration: duration,
-    easing: Easing.in(Easing.ease)
-  }).start();
-}
-
-export function openEditorAnimation() {
-  EditorTranslateY.setValue(Dimensions.get('window').height * 0.75);
-  EditorOpacity.setValue(0);
-
-  editing.currentlyEditing = true;
-
-  timing(EditorTranslateY, {
-    duration: 200,
-    toValue: 0,
-    easing: Easing.out(Easing.ease)
-  }).start();
-  timing(EditorOpacity, {
-    duration: 150,
-    toValue: 1,
-    easing: Easing.out(Easing.ease)
-  }).start();
-}
-
-export function exitEditorAnimation() {
-  EditorOpacity.setValue(1);
-  EditorTranslateY.setValue(0);
-  editing.currentlyEditing = false;
-
-  timing(EditorOpacity, {
-    duration: 150,
-    toValue: 0,
-    easing: Easing.inOut(Easing.ease)
-  }).start();
-  timing(EditorTranslateY, {
-    duration: 200,
-    toValue: Dimensions.get('window').height * 2,
-    easing: Easing.inOut(Easing.ease)
-  }).start();
-}
-
-export const AppScale = new Animated.Value(0.95);
-export const AppBorders = new Animated.Value(10);
-export const ContainerScale = new Animated.Value(0.95);
-export const EditorScalee = new Animated.Value(1);
-export const DrawerScale = new Animated.Value(1);
-
-export function changeContainerScale(op, scale, duration = 500, callback) {
-  timing(op, {
-    duration: duration,
-    easing: Easing.out(Easing.ease),
-    toValue: scale
-  }).start(callback);
-}
-
-export function changeAppScale(scale, duration = 500, callback) {
-  if (scale === 1) {
-    timing(AppBorders, {
-      duration: duration,
-      easing: Easing.out(Easing.ease),
-      toValue: 0
-    }).start();
-  } else {
-    timing(AppBorders, {
-      duration: duration,
-      easing: Easing.out(Easing.ease),
-      toValue: 10
-    }).start();
-  }
-
-  timing(AppScale, {
-    duration: duration,
-    easing: Easing.out(Easing.ease),
-    toValue: scale
-  }).start(callback);
-}
diff --git a/apps/mobile/src/utils/Refs.js b/apps/mobile/src/utils/Refs.js
deleted file mode 100644
index 30e7a4e3e..000000000
--- a/apps/mobile/src/utils/Refs.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createRef } from 'react';
-
-export const sideMenuRef = createRef();
-export const inputRef = createRef();
-export const sideMenuOverlayRef = createRef();
-export const rootNavigatorRef = createRef();
-export const tabBarRef = createRef();
-export const editorRef = createRef();
diff --git a/apps/mobile/src/utils/Storage.js b/apps/mobile/src/utils/Storage.js
deleted file mode 100644
index dd24607d5..000000000
--- a/apps/mobile/src/utils/Storage.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import { Platform } from 'react-native';
-import 'react-native-get-random-values';
-import * as Keychain from 'react-native-keychain';
-import { generateSecureRandom } from 'react-native-securerandom';
-import Sodium from 'react-native-sodium';
-import { MMKV } from './mmkv';
-
-let RNFetchBlob;
-async function read(key) {
-  if (!key) return null;
-  let data = await MMKV.getItem(key);
-
-  if (!data) return null;
-  try {
-    return JSON.parse(data);
-  } catch (e) {
-    return data;
-  }
-}
-
-async function write(key, data) {
-  return await MMKV.setItem(key, typeof data === 'string' ? data : JSON.stringify(data));
-}
-
-async function readMulti(keys) {
-  if (keys.length <= 0) {
-    return [];
-  } else {
-    let data = await MMKV.getMultipleItemsAsync(keys.slice());
-
-    return data.map(([key, value]) => {
-      let obj;
-      try {
-        obj = JSON.parse(value);
-      } catch (e) {
-        obj = value;
-      }
-
-      return [key, obj];
-    });
-  }
-}
-
-async function remove(key) {
-  return await MMKV.removeItem(key);
-}
-
-async function clear() {
-  return await MMKV.clearStore();
-}
-
-async function encrypt(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === '' && !password.key) return undefined;
-
-  let message = {
-    type: 'plain',
-    data: data
-  };
-  let result = await Sodium.encrypt(password, message);
-
-  return {
-    ...result,
-    alg: getAlgorithm(7)
-  };
-}
-
-function getAlgorithm(base64Variant) {
-  return `xcha-argon2i13-${base64Variant}`;
-}
-
-async function decrypt(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === '' && !password.key) return undefined;
-  let _data = { ...data };
-  _data.output = 'plain';
-  return await Sodium.decrypt(password, _data);
-}
-
-function parseAlgorithm(alg) {
-  if (!alg) return {};
-  const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split('-');
-  return {
-    encryptionAlgorithm: enc,
-    kdfAlgorithm: kdf,
-    compressionAlgorithm: compressionAlg,
-    isCompress: compressed === '1',
-    base64_variant: base64variant
-  };
-}
-
-let CRYPT_CONFIG = Platform.select({
-  ios: {
-    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY
-  },
-  android: {}
-});
-
-async function deriveCryptoKey(name, data) {
-  try {
-    let credentials = await Sodium.deriveKey(data.password, data.salt);
-    await Keychain.setInternetCredentials('notesnook', name, credentials.key, CRYPT_CONFIG);
-    return credentials.key;
-  } catch (e) {}
-}
-
-async function getCryptoKey(name) {
-  try {
-    if (await Keychain.hasInternetCredentials('notesnook')) {
-      let credentials = await Keychain.getInternetCredentials('notesnook', CRYPT_CONFIG);
-      return credentials.password;
-    } else {
-      return null;
-    }
-  } catch (e) {}
-}
-
-async function removeCryptoKey(name) {
-  try {
-    let result = await Keychain.resetInternetCredentials('notesnook');
-    return result;
-  } catch (e) {}
-}
-
-async function getAllKeys() {
-  return await MMKV.indexer.getKeys();
-}
-
-async function getRandomBytes(length) {
-  return await generateSecureRandom(length);
-}
-
-async function requestPermission() {
-  if (Platform.OS === 'ios') return true;
-
-  return true;
-}
-async function checkAndCreateDir(path) {
-  if (!RNFetchBlob) {
-    RNFetchBlob = require('rn-fetch-blob').default;
-  }
-
-  let dir =
-    Platform.OS === 'ios'
-      ? RNFetchBlob.fs.dirs.DocumentDir + path
-      : RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/' + path;
-
-  try {
-    let exists = await RNFetchBlob.fs.exists(dir);
-    let isDir = await RNFetchBlob.fs.isDir(dir);
-    if (!exists || !isDir) {
-      await RNFetchBlob.fs.mkdir(dir);
-    }
-  } catch (e) {
-    await RNFetchBlob.fs.mkdir(dir);
-  } finally {
-  }
-  return dir;
-}
-
-async function hash(password, email) {
-  let result = await Sodium.hashPassword(password, email);
-  return result;
-}
-
-async function generateCryptoKey(password, salt) {
-  try {
-    let credentials = await Sodium.deriveKey(password, salt || null);
-    return credentials;
-  } catch (e) {
-    console.log('generateCryptoKey: ', e);
-  }
-}
-
-export default {
-  read,
-  write,
-  readMulti,
-  remove,
-  clear,
-  encrypt,
-  decrypt,
-  getAllKeys,
-  getRandomBytes,
-  checkAndCreateDir,
-  requestPermission,
-  deriveCryptoKey,
-  getCryptoKey,
-  removeCryptoKey,
-  hash,
-  generateCryptoKey
-};
diff --git a/apps/mobile/src/utils/ackee.js b/apps/mobile/src/utils/ackee.js
deleted file mode 100644
index a2dbcab26..000000000
--- a/apps/mobile/src/utils/ackee.js
+++ /dev/null
@@ -1,353 +0,0 @@
-import { AppState, Platform } from 'react-native';
-
-const platform = {
-  osName: Platform.OS,
-  osVersion: Platform.Version
-};
-
-const isBrowser = typeof window !== 'undefined';
-
-/**
- * Validates options and sets defaults for undefined properties.
- * @param {?Object} opts
- * @returns {Object} opts - Validated options.
- */
-const validate = function (opts = {}) {
-  // Create new object to avoid changes by reference
-  const _opts = {};
-
-  // Defaults to false
-  _opts.detailed = opts.detailed === true;
-
-  // Defaults to true
-  _opts.ignoreLocalhost = opts.ignoreLocalhost !== false;
-
-  // Defaults to true
-  _opts.ignoreOwnVisits = opts.ignoreOwnVisits !== false;
-
-  return _opts;
-};
-
-/**
- * Determines if a host is a localhost.
- * @param {String} hostname - Hostname that should be tested.
- * @returns {Boolean} isLocalhost
- */
-const isLocalhost = function (hostname) {
-  return __DEV__;
-};
-
-/**
- * Determines if user agent is a bot. Approach is to get most bots, assuming other bots don't run JS.
- * Source: https://stackoverflow.com/questions/20084513/detect-search-crawlers-via-javascript/20084661
- * @param {String} userAgent - User agent that should be tested.
- * @returns {Boolean} isBot
- */
-const isBot = function (userAgent) {
-  return /bot|crawler|spider|crawling/i.test(userAgent);
-};
-
-/**
- * Checks if an id is a fake id. This is the case when Ackee ignores you because of the `ackee_ignore` cookie.
- * @param {String} id - Id that should be tested.
- * @returns {Boolean} isFakeId
- */
-const isFakeId = function (id) {
-  return id === '88888888-8888-8888-8888-888888888888';
-};
-
-/**
- * Checks if the website is in background (e.g. user has minimzed or switched tabs).
- * @returns {boolean}
- */
-const isInBackground = function () {
-  return AppState.currentState === 'background';
-};
-
-/**
- * Get the optional source parameter.
- * @returns {String} source
- */
-const source = function () {
-  return undefined;
-};
-
-/**
- * Gathers all platform-, screen- and user-related information.
- * @param {Boolean} detailed - Include personal data.
- * @returns {Object} attributes - User-related information.
- */
-export const attributes = function (detailed = false) {
-  const defaultData = {
-    siteLocation: 'com.streetwriters.notesnook',
-    siteReferrer: '',
-    source: source(),
-    osName: platform.osName
-  };
-
-  return {
-    ...defaultData
-  };
-};
-
-/**
- * Creates an object with a query and variables property to create a record on the server.
- * @param {String} domainId - Id of the domain.
- * @param {Object} input - Data that should be transferred to the server.
- * @returns {Object} Create record body.
- */
-const createRecordBody = function (domainId, input) {
-  return {
-    query: `
-			mutation createRecord($domainId: ID!, $input: CreateRecordInput!) {
-				createRecord(domainId: $domainId, input: $input) {
-					payload {
-						id
-					}
-				}
-			}
-		`,
-    variables: {
-      domainId,
-      input
-    }
-  };
-};
-
-/**
- * Creates an object with a query and variables property to update a record on the server.
- * @param {String} recordId - Id of the record.
- * @returns {Object} Update record body.
- */
-const updateRecordBody = function (recordId) {
-  return {
-    query: `
-			mutation updateRecord($recordId: ID!) {
-				updateRecord(id: $recordId) {
-					success
-				}
-			}
-		`,
-    variables: {
-      recordId
-    }
-  };
-};
-
-/**
- * Creates an object with a query and variables property to create an action on the server.
- * @param {String} eventId - Id of the event.
- * @param {Object} input - Data that should be transferred to the server.
- * @returns {Object} Create action body.
- */
-const createActionBody = function (eventId, input) {
-  return {
-    query: `
-			mutation createAction($eventId: ID!, $input: CreateActionInput!) {
-				createAction(eventId: $eventId, input: $input) {
-					payload {
-						id
-					}
-				}
-			}
-		`,
-    variables: {
-      eventId,
-      input
-    }
-  };
-};
-
-/**
- * Creates an object with a query and variables property to update an action on the server.
- * @param {String} actionId - Id of the action.
- * @param {Object} input - Data that should be transferred to the server.
- * @returns {Object} Update action body.
- */
-const updateActionBody = function (actionId, input) {
-  return {
-    query: `
-			mutation updateAction($actionId: ID!, $input: UpdateActionInput!) {
-				updateAction(id: $actionId, input: $input) {
-					success
-				}
-			}
-		`,
-    variables: {
-      actionId,
-      input
-    }
-  };
-};
-
-/**
- * Construct URL to the GraphQL endpoint of Ackee.
- * @param {String} server - URL of the Ackee server.
- * @returns {String} endpoint - URL to the GraphQL endpoint of the Ackee server.
- */
-const endpoint = function (server) {
-  const hasTrailingSlash = server.substr(-1) === '/';
-
-  return server + (hasTrailingSlash === true ? '' : '/') + 'api';
-};
-
-/**
- * Sends a request to a specified URL.
- * Won't catch all errors as some are already logged by the browser.
- * In this case the callback won't fire.
- * @param {String} url - URL to the GraphQL endpoint of the Ackee server.
- * @param {Object} body - JSON which will be send to the server.
- * @param {Object} opts - Options.
- * @param {?Function} next - The callback that handles the response. Receives the following properties: json.
- */
-const send = function (url, body, opts, next) {
-  const xhr = new XMLHttpRequest();
-
-  xhr.open('POST', url);
-
-  xhr.onload = () => {
-    if (xhr.status !== 200) {
-      throw new Error('Server returned with an unhandled status');
-    }
-
-    let json = null;
-
-    try {
-      json = JSON.parse(xhr.responseText);
-    } catch (e) {
-      throw new Error('Failed to parse response from server');
-    }
-
-    if (json.errors != null) {
-      throw new Error(json.errors[0].message);
-    }
-
-    if (typeof next === 'function') {
-      return next(json);
-    }
-  };
-
-  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-  xhr.withCredentials = opts.ignoreOwnVisits;
-
-  xhr.send(JSON.stringify(body));
-};
-
-/**
- * Creates a new instance.
- * @param {String} server - URL of the Ackee server.
- * @param {?Object} opts
- * @returns {Object} instance
- */
-export const create = function (server, opts) {
-  opts = validate(opts);
-  const url = endpoint(server);
-  const noop = () => {};
-
-  // Fake instance when Ackee ignores you
-  const fakeInstance = {
-    record: () => ({ stop: noop }),
-    updateRecord: () => ({ stop: noop }),
-    action: noop,
-    updateAction: noop
-  };
-
-  if (opts.ignoreLocalhost === true && isLocalhost() === true) {
-    console.warn('Ackee ignores you because you are on localhost');
-    return fakeInstance;
-  }
-  // Creates a new record on the server and updates the record
-  // very x seconds to track the duration of the visit. Tries to use
-  // the default attributes when there're no custom attributes defined.
-  const _record = (domainId, attrs = attributes(opts.detailed), next) => {
-    // Function to stop updating the record
-    let isStopped = false;
-    const stop = () => {
-      isStopped = true;
-    };
-
-    send(url, createRecordBody(domainId, attrs), opts, json => {
-      const recordId = json.data.createRecord.payload.id;
-
-      if (isFakeId(recordId) === true) {
-        return console.warn('Ackee ignores you because this is your own site');
-      }
-
-      const interval = setInterval(() => {
-        if (isStopped === true) {
-          clearInterval(interval);
-          return;
-        }
-
-        if (isInBackground() === true) return;
-
-        send(url, updateRecordBody(recordId), opts);
-      }, 15000);
-
-      if (typeof next === 'function') {
-        return next(recordId);
-      }
-    });
-
-    return { stop };
-  };
-
-  // Updates a record very x seconds to track the duration of the visit
-  const _updateRecord = recordId => {
-    // Function to stop updating the record
-    let isStopped = false;
-    const stop = () => {
-      isStopped = true;
-    };
-
-    if (isFakeId(recordId) === true) {
-      console.warn('Ackee ignores you because this is your own site');
-      return { stop };
-    }
-
-    const interval = setInterval(() => {
-      if (isStopped === true) {
-        clearInterval(interval);
-        return;
-      }
-
-      if (isInBackground() === true) return;
-
-      send(url, updateRecordBody(recordId), opts);
-    }, 15000);
-
-    return { stop };
-  };
-
-  // Creates a new action on the server
-  const _action = (eventId, attrs, next) => {
-    send(url, createActionBody(eventId, attrs), opts, json => {
-      const actionId = json.data.createAction.payload.id;
-
-      if (isFakeId(actionId) === true) {
-        return console.warn('Ackee ignores you because this is your own site');
-      }
-
-      if (typeof next === 'function') {
-        return next(actionId);
-      }
-    });
-  };
-
-  // Updates an action
-  const _updateAction = (actionId, attrs) => {
-    if (isFakeId(actionId) === true) {
-      return console.warn('Ackee ignores you because this is your own site');
-    }
-
-    send(url, updateActionBody(actionId, attrs), opts);
-  };
-
-  // Return the real instance
-  return {
-    record: _record,
-    updateRecord: _updateRecord,
-    action: _action,
-    updateAction: _updateAction
-  };
-};
diff --git a/apps/mobile/src/utils/umami.js b/apps/mobile/src/utils/analytics/index.js
similarity index 97%
rename from apps/mobile/src/utils/umami.js
rename to apps/mobile/src/utils/analytics/index.js
index ec6be9606..43e8461f5 100644
--- a/apps/mobile/src/utils/umami.js
+++ b/apps/mobile/src/utils/analytics/index.js
@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { MMKV } from './mmkv';
-import { useSettingStore } from '../provider/stores';
+import { MMKV } from '../database/mmkv';
+import { useSettingStore } from '../../provider/stores';
 
 const WEBSITE_ID = `3c6890ce-8410-49d5-8831-15fb2eb28a21`;
 const baseUrl = `https://analytics.streetwriters.co/api/collect`;
diff --git a/apps/mobile/src/utils/Colors.js b/apps/mobile/src/utils/colorscheme/index.js
similarity index 83%
rename from apps/mobile/src/utils/Colors.js
rename to apps/mobile/src/utils/colorscheme/index.js
index 24ca50d08..0f2125831 100644
--- a/apps/mobile/src/utils/Colors.js
+++ b/apps/mobile/src/utils/colorscheme/index.js
@@ -1,8 +1,7 @@
-import { eSendEvent } from '../services/EventManager';
-import { eThemeUpdated } from './Events';
-import { NativeModules, Platform, StatusBar } from 'react-native';
-import { AndroidModule } from '.';
-import { StatusBar as Sbar } from 'react-native-bars';
+import { Platform, StatusBar } from 'react-native';
+import { AndroidModule } from '..';
+import { eSendEvent } from '../../services/EventManager';
+import { eThemeUpdated } from '../events';
 
 export const ACCENT = {
   color: '#008837',
@@ -107,11 +106,6 @@ export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
   COLOR_SCHEME = { ...colors, accent: accent.color, shade: accent.shade };
 
   StatusBar.setBarStyle(COLOR_SCHEME.night ? 'light-content' : 'dark-content', true);
-  // Sbar.pushStackEntry({
-  //   barStyle: COLOR_SCHEME.night ? 'light-content' : 'dark-content',
-  //   animated: true
-  // });
-
   if (Platform.OS === 'android') {
     AndroidModule.setBackgroundColor(COLOR_SCHEME.bg);
     StatusBar.setBackgroundColor('transparent', true);
@@ -131,10 +125,6 @@ export function setAccentColor(color) {
 
 export function updateStatusBarColor() {
   StatusBar.setBarStyle(COLOR_SCHEME.night ? 'light-content' : 'dark-content', true);
-  // Sbar.pushStackEntry({
-  //   barStyle: COLOR_SCHEME.night ? 'light-content' : 'dark-content',
-  //   animated: true
-  // });
   if (Platform.OS === 'android') {
     StatusBar.setBackgroundColor('transparent', true);
     StatusBar.setTranslucent(true, true);
diff --git a/apps/mobile/src/utils/ColorUtils.js b/apps/mobile/src/utils/colorscheme/utils.js
similarity index 80%
rename from apps/mobile/src/utils/ColorUtils.js
rename to apps/mobile/src/utils/colorscheme/utils.js
index 1b8b83b1b..03225feb5 100644
--- a/apps/mobile/src/utils/ColorUtils.js
+++ b/apps/mobile/src/utils/colorscheme/utils.js
@@ -1,6 +1,6 @@
 import { Appearance } from 'react-native';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../services/EventManager';
-import SettingsService from '../services/SettingsService';
+import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import SettingsService from '../../services/SettingsService';
 import {
   ACCENT,
   COLOR_SCHEME,
@@ -9,9 +9,9 @@ import {
   COLOR_SCHEME_PITCH_BLACK,
   setAccentColor,
   setColorScheme
-} from './Colors';
-import { eThemeUpdated } from './Events';
-import { MMKV } from './mmkv';
+} from '.';
+import { eThemeUpdated } from '../events';
+import { MMKV } from '../database/mmkv';
 
 const isValidHex = hex => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
 const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, 'g'));
@@ -72,37 +72,33 @@ export const RGB_Linear_Shade = (p, rgba) => {
 export async function getColorScheme(useSystemTheme) {
   let accentColor = await MMKV.getItem('accentColor');
   let theme = await MMKV.getItem('theme');
+  let isPitchBlack = SettingsService.get().pitchBlack;
+  const darkTheme = isPitchBlack ? COLOR_SCHEME_PITCH_BLACK : COLOR_SCHEME_DARK;
 
   if (!accentColor) {
     await MMKV.setItem('accentColor', ACCENT.color);
-    setAccentColor(ACCENT.color);
+    accentColor = ACCENT.color;
+  }
+
+  if (!theme) {
+    await MMKV.setItem('theme', JSON.stringify({ night: false }));
+    theme = COLOR_SCHEME_LIGHT;
   } else {
-    setAccentColor(accentColor);
+    theme = JSON.parse(theme);
   }
 
   if (useSystemTheme) {
     Appearance.getColorScheme() === 'dark'
-      ? setColorScheme(
-          SettingsService.get().pitchBlack ? COLOR_SCHEME_PITCH_BLACK : COLOR_SCHEME_DARK
-        )
+      ? setColorScheme(darkTheme)
       : setColorScheme(COLOR_SCHEME_LIGHT);
 
     return COLOR_SCHEME;
   }
 
-  if (!theme) {
-    await MMKV.setItem('theme', JSON.stringify({ night: false }));
-    setColorScheme(COLOR_SCHEME_LIGHT);
-  } else {
-    theme = JSON.parse(theme);
-    theme.night
-      ? setColorScheme(
-          SettingsService.get().pitchBlack ? COLOR_SCHEME_PITCH_BLACK : COLOR_SCHEME_DARK
-        )
-      : setColorScheme(COLOR_SCHEME_LIGHT);
-  }
-  eSendEvent(eThemeUpdated);
+  setColorScheme(theme.night ? darkTheme : COLOR_SCHEME_LIGHT);
+  setAccentColor(accentColor);
 
+  eSendEvent(eThemeUpdated);
   return COLOR_SCHEME;
 }
 
diff --git a/apps/mobile/src/utils/constants.js b/apps/mobile/src/utils/constants.js
new file mode 100644
index 000000000..6de39c16e
--- /dev/null
+++ b/apps/mobile/src/utils/constants.js
@@ -0,0 +1,196 @@
+import { Platform } from 'react-native';
+import { eSendEvent } from '../services/EventManager';
+import Navigation from '../services/Navigation';
+import { refreshNotesPage } from './events';
+
+export const STORE_LINK =
+  Platform.OS === 'ios'
+    ? 'https://apps.apple.com/us/app/notesnook/id1544027013'
+    : 'https://play.google.com/store/apps/details?id=com.streetwriters.notesnook';
+
+export const GROUP = {
+  default: 'default',
+  abc: 'abc',
+  year: 'year',
+  week: 'week',
+  month: 'month'
+};
+
+export const SORT = {
+  dateEdited: 'Date edited',
+  dateCreated: 'Date created'
+  //title:"Title",
+};
+
+export const itemSkus = [
+  'com.streetwriters.notesnook.sub.mo',
+  'com.streetwriters.notesnook.sub.yr',
+  'com.streetwriters.notesnook.sub.yr.15',
+  'com.streetwriters.notesnook.sub.mo.15',
+  'com.streetwriters.notesnook.sub.mo.ofr',
+  'com.streetwriters.notesnook.sub.yr.trialoffer',
+  'com.streetwriters.notesnook.sub.mo.trialoffer'
+];
+
+export const SUBSCRIPTION_STATUS = {
+  BASIC: 0,
+  TRIAL: 1,
+  BETA: 2,
+  PREMIUM: 5,
+  PREMIUM_EXPIRED: 6,
+  PREMIUM_CANCELLED: 7
+};
+
+export const SUBSCRIPTION_STATUS_STRINGS = {
+  0: 'Basic',
+  1: 'Trial',
+  2: Platform.OS === 'ios' ? 'Pro' : 'Beta',
+  5: 'Pro',
+  6: 'Expired',
+  7: 'Pro'
+};
+
+export const SUBSCRIPTION_PROVIDER = {
+  0: null,
+  1: {
+    type: 'iOS',
+    title: 'Subscribed on iOS',
+    desc: 'You subscribed to Notesnook Pro on iOS using Apple In App Purchase. You can cancel anytime with your iTunes Account settings.',
+    icon: 'ios'
+  },
+  2: {
+    type: 'Android',
+    title: 'Subscribed on Android',
+    desc: 'You subscribed to Notesnook Pro on Android Phone/Tablet using Google In App Purchase.',
+    icon: 'android'
+  },
+  3: {
+    type: 'Web',
+    title: 'Subscribed on Web',
+    desc: 'You subscribed to Notesnook Pro on the Web/Desktop App.',
+    icon: 'web'
+  }
+};
+
+export const MenuItemsList = [
+  {
+    name: 'Notes',
+    icon: 'home-variant-outline',
+    close: true
+  },
+  {
+    name: 'Notebooks',
+    icon: 'book-outline',
+    close: true
+  },
+  {
+    name: 'Favorites',
+    icon: 'star-outline',
+    close: true
+  },
+  {
+    name: 'Tags',
+    icon: 'pound',
+    close: true
+  },
+  {
+    name: 'Monographs',
+    icon: 'text-box-multiple-outline',
+    close: true,
+    func: () => {
+      let params = {
+        type: 'notes',
+        menu: true,
+        get: 'monographs',
+        title: 'Monographs',
+        id: 'monographs_navigation'
+      };
+
+      eSendEvent(refreshNotesPage, params);
+      Navigation.navigate('NotesPage', params, {
+        heading: 'Monographs',
+        id: 'monographs_navigation',
+        type: 'notes'
+      });
+    }
+  },
+  {
+    name: 'Trash',
+    icon: 'delete-outline',
+    close: true
+  }
+];
+
+export const BUTTON_TYPES = {
+  transparent: {
+    primary: 'transparent',
+    text: 'accent',
+    selected: 'nav'
+  },
+  gray: {
+    primary: 'transparent',
+    text: 'icon',
+    selected: 'transGray'
+  },
+  grayBg: {
+    primary: 'nav',
+    text: 'icon',
+    selected: 'nav'
+  },
+  grayAccent: {
+    primary: 'nav',
+    text: 'accent',
+    selected: 'nav'
+  },
+  accent: (themeColor, text) => ({
+    primary: themeColor,
+    text: text,
+    selected: themeColor
+  }),
+  inverted: {
+    primary: 'bg',
+    text: 'accent',
+    selected: 'bg'
+  },
+  white: {
+    primary: 'transparent',
+    text: 'light',
+    selected: 'transGray'
+  },
+  shade: {
+    primary: 'shade',
+    text: 'accent',
+    selected: 'accent',
+    opacity: 0.12
+  },
+  error: {
+    primary: 'red',
+    text: 'red',
+    selected: 'red',
+    opacity: 0.12
+  },
+  errorShade: {
+    primary: 'transparent',
+    text: 'red',
+    selected: 'red',
+    opacity: 0.12
+  },
+  warn: {
+    primary: 'warningBg',
+    text: 'warningText',
+    selected: 'warningBg',
+    opacity: 0.12
+  }
+};
+
+export const bgTaskOptions = {
+  taskName: 'notesnookSync',
+  taskTitle: 'Notesnook Sync',
+  taskDesc: 'Syncing your notes.',
+  taskIcon: {
+    name: 'ic_stat_name',
+    type: 'drawable'
+  },
+  color: '#ffffff',
+  linkingURI: 'com.streetwriters.notesnook://launch'
+};
diff --git a/apps/mobile/src/utils/MMKV.js b/apps/mobile/src/utils/database/MMKV.js
similarity index 100%
rename from apps/mobile/src/utils/MMKV.js
rename to apps/mobile/src/utils/database/MMKV.js
diff --git a/apps/mobile/src/utils/database/Storage.js b/apps/mobile/src/utils/database/Storage.js
new file mode 100644
index 000000000..37d8c582b
--- /dev/null
+++ b/apps/mobile/src/utils/database/Storage.js
@@ -0,0 +1,103 @@
+import { Platform } from 'react-native';
+import 'react-native-get-random-values';
+import RNFetchBlob from 'rn-fetch-blob';
+import {
+  decrypt,
+  deriveCryptoKey,
+  encrypt,
+  generateCryptoKey,
+  getCryptoKey,
+  getRandomBytes,
+  hash,
+  removeCryptoKey
+} from './encryption';
+import { MMKV } from './mmkv';
+
+async function read(key) {
+  if (!key) return null;
+  let data = await MMKV.getItem(key);
+
+  if (!data) return null;
+  try {
+    return JSON.parse(data);
+  } catch (e) {
+    return data;
+  }
+}
+
+async function write(key, data) {
+  return await MMKV.setItem(key, typeof data === 'string' ? data : JSON.stringify(data));
+}
+
+async function readMulti(keys) {
+  if (keys.length <= 0) {
+    return [];
+  } else {
+    let data = await MMKV.getMultipleItemsAsync(keys.slice());
+
+    return data.map(([key, value]) => {
+      let obj;
+      try {
+        obj = JSON.parse(value);
+      } catch (e) {
+        obj = value;
+      }
+
+      return [key, obj];
+    });
+  }
+}
+
+async function remove(key) {
+  return await MMKV.removeItem(key);
+}
+
+async function clear() {
+  return await MMKV.clearStore();
+}
+
+async function getAllKeys() {
+  return await MMKV.indexer.getKeys();
+}
+
+async function requestPermission() {
+  if (Platform.OS === 'ios') return true;
+  return true;
+}
+async function checkAndCreateDir(path) {
+  let dir =
+    Platform.OS === 'ios'
+      ? RNFetchBlob.fs.dirs.DocumentDir + path
+      : RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/' + path;
+
+  try {
+    let exists = await RNFetchBlob.fs.exists(dir);
+    let isDir = await RNFetchBlob.fs.isDir(dir);
+    if (!exists || !isDir) {
+      await RNFetchBlob.fs.mkdir(dir);
+    }
+  } catch (e) {
+    await RNFetchBlob.fs.mkdir(dir);
+  } finally {
+  }
+  return dir;
+}
+
+export default {
+  read,
+  write,
+  readMulti,
+  remove,
+  clear,
+  encrypt,
+  decrypt,
+  getAllKeys,
+  getRandomBytes,
+  checkAndCreateDir,
+  requestPermission,
+  deriveCryptoKey,
+  getCryptoKey,
+  removeCryptoKey,
+  hash,
+  generateCryptoKey
+};
diff --git a/apps/mobile/src/utils/database/encryption.js b/apps/mobile/src/utils/database/encryption.js
new file mode 100644
index 000000000..9f8e7bf92
--- /dev/null
+++ b/apps/mobile/src/utils/database/encryption.js
@@ -0,0 +1,96 @@
+import { Platform } from 'react-native';
+import 'react-native-get-random-values';
+import * as Keychain from 'react-native-keychain';
+import { generateSecureRandom } from 'react-native-securerandom';
+import Sodium from 'react-native-sodium';
+
+const KEYSTORE_CONFIG = Platform.select({
+  ios: {
+    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY
+  },
+  android: {}
+});
+
+export async function deriveCryptoKey(name, data) {
+  try {
+    let credentials = await Sodium.deriveKey(data.password, data.salt);
+    await Keychain.setInternetCredentials('notesnook', name, credentials.key, KEYSTORE_CONFIG);
+    return credentials.key;
+  } catch (e) {}
+}
+
+export async function getCryptoKey(name) {
+  try {
+    if (await Keychain.hasInternetCredentials('notesnook')) {
+      let credentials = await Keychain.getInternetCredentials('notesnook', KEYSTORE_CONFIG);
+      return credentials.password;
+    } else {
+      return null;
+    }
+  } catch (e) {}
+}
+
+export async function removeCryptoKey(name) {
+  try {
+    let result = await Keychain.resetInternetCredentials('notesnook');
+    return result;
+  } catch (e) {}
+}
+
+export async function getRandomBytes(length) {
+  return await generateSecureRandom(length);
+}
+
+export async function hash(password, email) {
+  let result = await Sodium.hashPassword(password, email);
+  return result;
+}
+
+export async function generateCryptoKey(password, salt) {
+  try {
+    let credentials = await Sodium.deriveKey(password, salt || null);
+    return credentials;
+  } catch (e) {
+    console.log('generateCryptoKey: ', e);
+  }
+}
+
+export function getAlgorithm(base64Variant) {
+  return `xcha-argon2i13-${base64Variant}`;
+}
+
+export async function decrypt(password, data) {
+  if (!password.password && !password.key) return undefined;
+  if (password.password && password.password === '' && !password.key) return undefined;
+  let _data = { ...data };
+  _data.output = 'plain';
+  return await Sodium.decrypt(password, _data);
+}
+
+export function parseAlgorithm(alg) {
+  if (!alg) return {};
+  const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split('-');
+  return {
+    encryptionAlgorithm: enc,
+    kdfAlgorithm: kdf,
+    compressionAlgorithm: compressionAlg,
+    isCompress: compressed === '1',
+    base64_variant: base64variant
+  };
+}
+
+export async function encrypt(password, data) {
+  if (!password.password && !password.key) return undefined;
+  if (password.password && password.password === '' && !password.key) return undefined;
+
+  let message = {
+    type: 'plain',
+    data: data
+  };
+  let result = await Sodium.encrypt(password, message);
+
+  return {
+    ...result,
+    alg: getAlgorithm(7)
+  };
+}
diff --git a/apps/mobile/src/utils/database.js b/apps/mobile/src/utils/database/index.js
similarity index 88%
rename from apps/mobile/src/utils/database.js
rename to apps/mobile/src/utils/database/index.js
index 27c381b09..881403f57 100644
--- a/apps/mobile/src/utils/database.js
+++ b/apps/mobile/src/utils/database/index.js
@@ -1,9 +1,9 @@
-import { Platform } from 'react-native';
-import Storage from './storage';
-import EventSource from './even-source-ios';
-import AndroidEventSource from './event-source';
 import Database from 'notes-core/api/index';
-import filesystem from './filesystem';
+import { Platform } from 'react-native';
+import filesystem from '../filesystem';
+import EventSource from '../sse/even-source-ios';
+import AndroidEventSource from '../sse/event-source';
+import Storage from './storage';
 
 export const db = new Database(
   Storage,
diff --git a/apps/mobile/src/utils/differ.js b/apps/mobile/src/utils/differ.js
deleted file mode 100644
index 44fe15c1a..000000000
--- a/apps/mobile/src/utils/differ.js
+++ /dev/null
@@ -1,811 +0,0 @@
-/*
- * htmldiff.js is a library that compares HTML content. It creates a diff between two
- * HTML documents by combining the two documents and wrapping the differences with
- * <ins> and <del> tags. Here is a high-level overview of how the diff works.
- *
- * 1. Tokenize the before and after HTML with html_to_tokens.
- * 2. Generate a list of operations that convert the before list of tokens to the after
- *    list of tokens with calculate_operations, which does the following:
- *      a. Find all the matching blocks of tokens between the before and after lists of
- *         tokens with find_matching_blocks. This is done by finding the single longest
- *         matching block with find_match, then recursively finding the next longest
- *         matching block that precede and follow the longest matching block with
- *         recursively_find_matching_blocks.
- *      b. Determine insertions, deletions, and replacements from the matching blocks.
- *         This is done in calculate_operations.
- * 3. Render the list of operations by wrapping tokens with <ins> and <del> tags where
- *    appropriate with render_operations.
- *
- * Example usage:
- *
- *   var htmldiff = require('htmldiff.js');
- *
- *   htmldiff('<p>this is some text</p>', '<p>this is some more text</p>')
- *   == '<p>this is some <ins>more </ins>text</p>'
- *
- *   htmldiff('<p>this is some text</p>', '<p>this is some more text</p>', 'diff-class')
- *   == '<p>this is some <ins class="diff-class">more </ins>text</p>'
- */
-(function () {
-  function is_start_of_tag(char) {
-    return char === '<';
-  }
-  const IS_CLOSE_TAG_REGEX = /^\s*<\s*\/[^>]+>\s*$/;
-  function is_close_tag(tag) {
-    return IS_CLOSE_TAG_REGEX.test(tag);
-  }
-
-  const IS_TAG_REGEX = /^\s*<[^>]+>\s*$/;
-  function is_tag(token) {
-    return IS_TAG_REGEX.test(token);
-  }
-
-  function isnt_tag(token) {
-    return !is_tag(token);
-  }
-
-  /*
-   * Checks if the current word is the beginning of an atomic tag. An atomic tag is one whose
-   * child nodes should not be compared - the entire tag should be treated as one token. This
-   * is useful for tags where it does not make sense to insert <ins> and <del> tags.
-   *
-   * @param {string} word The characters of the current token read so far.
-   *
-   * @return {string|null} The name of the atomic tag if the word will be an atomic tag,
-   *    null otherwise
-   */
-  const IS_START_ATOMIC_TAG = /^<(iframe|object|math|svg|script)/;
-  function is_start_of_atomic_tag(word) {
-    var result = IS_START_ATOMIC_TAG.exec(word);
-    if (result) {
-      result = result[1];
-    }
-    return result;
-  }
-
-  /*
-   * Checks if a tag is a void tag.
-   *
-   * @param {string} token The token to check.
-   *
-   * @return {boolean} True if the token is a void tag, false otherwise.
-   */
-  const IS_VOID_TAG_REGEX = /^\s*<[^>]+\/>\s*$/;
-  function is_void_tag(token) {
-    return IS_VOID_TAG_REGEX.test(token);
-  }
-
-  /*
-   * Checks if a token can be wrapped inside a tag.
-   *
-   * @param {string} token The token to check.
-   *
-   * @return {boolean} True if the token can be wrapped inside a tag, false otherwise.
-   */
-  function is_wrappable(token) {
-    return isnt_tag(token) || is_start_of_atomic_tag(token) || is_void_tag(token);
-  }
-
-  /*
-   * A Match stores the information of a matching block. A matching block is a list of
-   * consecutive tokens that appear in both the before and after lists of tokens.
-   *
-   * @param {number} start_in_before The index of the first token in the list of before tokens.
-   * @param {number} start_in_after The index of the first token in the list of after tokens.
-   * @param {number} length The number of consecutive matching tokens in this block.
-   */
-  function Match(start_in_before, start_in_after, length) {
-    this.start_in_before = start_in_before;
-    this.start_in_after = start_in_after;
-    this.length = length;
-    this.end_in_before = this.start_in_before + this.length - 1;
-    this.end_in_after = this.start_in_after + this.length - 1;
-  }
-
-  function return_dual_pane(before, after) {
-    return {
-      before: before,
-      after: after
-    };
-  }
-
-  /*
-   * Merge tokens in component by regex rule.
-   *
-   * @param {find_regex} dictate witch tag we want to merge.
-   * @param {words Array.<string>} input data already  parsed array(html tags) by html_tokens method.
-   * @return {Array.<string>} The list of tokens with merged components requested by component_search_role.
-   */
-  function merge_html_by_class(find_regex, words) {
-    var merged_words_array = [],
-      merged_words_to_string = '',
-      count_open_tags = 0;
-
-    for (var i = 0; i < words.length; i++) {
-      var tag_part = words[i];
-      //merge html tags until parent tag is not closed (also ignore self closed html tags)
-      if (count_open_tags > 0 || find_regex.test(tag_part)) {
-        if (
-          is_start_of_tag(tag_part.slice(0, 1)) &&
-          !is_void_tag(tag_part) &&
-          !is_start_of_atomic_tag(tag_part)
-        ) {
-          count_open_tags += is_close_tag(tag_part) ? -1 : 1;
-        }
-        //combine all html string from html tokens while all condition are true
-        merged_words_to_string += tag_part;
-        //after parent tag is closed push as one html token
-        if (count_open_tags === 0) {
-          merged_words_array.push(merged_words_to_string);
-          merged_words_to_string = '';
-        }
-      } else {
-        //all tags that are not part of components we wont to merge just ignore
-        merged_words_array.push(tag_part);
-      }
-    }
-    return merged_words_array;
-  }
-
-  /*
-   * Tokenizes a string of HTML.
-   *
-   * @param {string} html The string to tokenize.
-   *
-   * @return {Array.<string>} The list of tokens.
-   */
-
-  function html_to_tokens(html, components_search_rule) {
-    let words = [];
-    const range = {
-      start: 0,
-      end: 0,
-      tagOpen: false,
-      whitespaceOpen: false,
-      ampersandOpen: false
-    };
-    for (var i = 0; i < html.length; ++i) {
-      const s = html[i];
-
-      if (s === ' ' || s === '\n' || s === '\r' || s === '\t') {
-        if (range.tagOpen || range.whitespaceOpen) continue;
-
-        //range.end = i;
-        if (range.start !== i) words.push(html.slice(range.start, i));
-
-        range.whitespaceOpen = true;
-        range.start = i;
-      } else if (range.whitespaceOpen) {
-        range.whitespaceOpen = false;
-        // range.end = i;
-        words.push(html.slice(range.start, i));
-        range.start = i;
-      }
-
-      if (s === '<') {
-        range.tagOpen = true;
-
-        if (range.start !== i) {
-          words.push(html.slice(range.start, i));
-        }
-
-        range.start = i;
-      } else if (s === '>') {
-        range.tagOpen = false;
-        words.push(html.slice(range.start, i + 1));
-        range.start = i + 1;
-      } else if (!range.ampersandOpen && s === '&') {
-        range.ampersandOpen = true;
-        if (range.start !== i) words.push(html.slice(range.start, i));
-        range.start = i;
-      } else if (range.ampersandOpen && s === ';') {
-        range.ampersandOpen = false;
-        words.push(html.slice(range.start, i + 1));
-        range.start = i + 1;
-      }
-    }
-    if (range.start !== html.length) {
-      words.push(html.slice(range.start, html.length));
-    }
-
-    return components_search_rule ? merge_html_by_class(components_search_rule, words) : words;
-  }
-
-  /*
-   * Creates a key that should be used to match tokens. This is useful, for example, if we want
-   * to consider two open tag tokens as equal, even if they don't have the same attributes. We
-   * use a key instead of overwriting the token because we may want to render the original string
-   * without losing the attributes.
-   *
-   * @param {string} token The token to create the key for.
-   *
-   * @return {string} The identifying key that should be used to match before and after tokens.
-   */
-  function get_key_for_token(token) {
-    var tag_name = /<([^\s>]+)[\s>]/.exec(token);
-    if (tag_name) {
-      return '<' + tag_name[1].toLowerCase() + '>';
-    }
-    if (token) {
-      return token.replace(/(\s+|&nbsp;|&#160;)/g, ' ');
-    }
-    return token;
-  }
-
-  /*
-   * Finds the matching block with the most consecutive tokens within the given range in the
-   * before and after lists of tokens.
-   *
-   * @param {Array.<string>} before_tokens The before list of tokens.
-   * @param {Array.<string>} after_tokens The after list of tokens.
-   * @param {Object} index_of_before_locations_in_after_tokens The index that is used to search
-   *      for tokens in the after list.
-   * @param {number} start_in_before The beginning of the range in the list of before tokens.
-   * @param {number} end_in_before The end of the range in the list of before tokens.
-   * @param {number} start_in_after The beginning of the range in the list of after tokens.
-   * @param {number} end_in_after The end of the range in the list of after tokens.
-   *
-   * @return {Match} A Match that describes the best matching block in the given range.
-   */
-  function find_match(
-    before_tokens,
-    after_tokens,
-    index_of_before_locations_in_after_tokens,
-    start_in_before,
-    end_in_before,
-    start_in_after,
-    end_in_after
-  ) {
-    var best_match_in_before = start_in_before;
-    var best_match_in_after = start_in_after;
-    var best_match_length = 0;
-    var match_length_at = {};
-    for (
-      var index_in_before = start_in_before;
-      index_in_before < end_in_before;
-      index_in_before++
-    ) {
-      var new_match_length_at = {};
-      var looking_for = get_key_for_token(before_tokens[index_in_before]);
-      var locations_in_after = index_of_before_locations_in_after_tokens[looking_for];
-
-      for (var i = 0; i < locations_in_after.length; i++) {
-        var index_in_after = locations_in_after[i];
-        if (index_in_after < start_in_after) continue;
-        if (index_in_after >= end_in_after) break;
-
-        if (!match_length_at[index_in_after - 1]) {
-          match_length_at[index_in_after - 1] = 0;
-        }
-        var new_match_length = match_length_at[index_in_after - 1] + 1;
-        new_match_length_at[index_in_after] = new_match_length;
-
-        if (new_match_length > best_match_length) {
-          best_match_in_before = index_in_before - new_match_length + 1;
-          best_match_in_after = index_in_after - new_match_length + 1;
-          best_match_length = new_match_length;
-        }
-      }
-      match_length_at = new_match_length_at;
-    }
-    if (best_match_length !== 0) {
-      return new Match(best_match_in_before, best_match_in_after, best_match_length);
-    }
-    return null;
-  }
-
-  /*
-   * Finds all the matching blocks within the given range in the before and after lists of
-   * tokens. This function is called recursively to find the next best matches that precede
-   * and follow the first best match.
-   *
-   * @param {Array.<string>} before_tokens The before list of tokens.
-   * @param {Array.<string>} after_tokens The after list of tokens.
-   * @param {Object} index_of_before_locations_in_after_tokens The index that is used to search
-   *      for tokens in the after list.
-   * @param {number} start_in_before The beginning of the range in the list of before tokens.
-   * @param {number} end_in_before The end of the range in the list of before tokens.
-   * @param {number} start_in_after The beginning of the range in the list of after tokens.
-   * @param {number} end_in_after The end of the range in the list of after tokens.
-   * @param {Array.<Match>} matching_blocks The list of matching blocks found so far.
-   *
-   * @return {Array.<Match>} The list of matching blocks in this range.
-   */
-  function recursively_find_matching_blocks(
-    before_tokens,
-    after_tokens,
-    index_of_before_locations_in_after_tokens,
-    start_in_before,
-    end_in_before,
-    start_in_after,
-    end_in_after,
-    matching_blocks
-  ) {
-    var match = find_match(
-      before_tokens,
-      after_tokens,
-      index_of_before_locations_in_after_tokens,
-      start_in_before,
-      end_in_before,
-      start_in_after,
-      end_in_after
-    );
-    if (match) {
-      if (start_in_before < match.start_in_before && start_in_after < match.start_in_after) {
-        recursively_find_matching_blocks(
-          before_tokens,
-          after_tokens,
-          index_of_before_locations_in_after_tokens,
-          start_in_before,
-          match.start_in_before,
-          start_in_after,
-          match.start_in_after,
-          matching_blocks
-        );
-      }
-      matching_blocks.push(match);
-      if (match.end_in_before <= end_in_before && match.end_in_after <= end_in_after) {
-        recursively_find_matching_blocks(
-          before_tokens,
-          after_tokens,
-          index_of_before_locations_in_after_tokens,
-          match.end_in_before + 1,
-          end_in_before,
-          match.end_in_after + 1,
-          end_in_after,
-          matching_blocks
-        );
-      }
-    }
-    return matching_blocks;
-  }
-
-  /*
-   * Creates an index (A.K.A. hash table) that will be used to match the list of before
-   * tokens with the list of after tokens.
-   *
-   * @param {Object} options An object with the following:
-   *    - {Array.<string>} find_these The list of tokens that will be used to search.
-   *    - {Array.<string>} in_these The list of tokens that will be returned.
-   *
-   * @return {Object} An index that can be used to search for tokens.
-   */
-  function create_index(options) {
-    if (!options.find_these) {
-      throw new Error('params must have find_these key');
-    }
-    if (!options.in_these) {
-      throw new Error('params must have in_these key');
-    }
-    var queries = options.find_these.map(function (token) {
-      return get_key_for_token(token);
-    });
-    var results = options.in_these.map(function (token) {
-      return get_key_for_token(token);
-    });
-    var index = {};
-    for (var i = 0; i < queries.length; i++) {
-      var query = queries[i];
-      index[query] = [];
-      var idx = results.indexOf(query);
-      while (idx !== -1) {
-        index[query].push(idx);
-        idx = results.indexOf(query, idx + 1);
-      }
-    }
-    return index;
-  }
-
-  /*
-   * Finds all the matching blocks in the before and after lists of tokens. This function
-   * is a wrapper for the recursive function recursively_find_matching_blocks.
-   *
-   * @param {Array.<string>} before_tokens The before list of tokens.
-   * @param {Array.<string>} after_tokens The after list of tokens.
-   *
-   * @return {Array.<Match>} The list of matching blocks.
-   */
-  function find_matching_blocks(before_tokens, after_tokens) {
-    var matching_blocks = [];
-    var index_of_before_locations_in_after_tokens = create_index({
-      find_these: before_tokens,
-      in_these: after_tokens
-    });
-    return recursively_find_matching_blocks(
-      before_tokens,
-      after_tokens,
-      index_of_before_locations_in_after_tokens,
-      0,
-      before_tokens.length,
-      0,
-      after_tokens.length,
-      matching_blocks
-    );
-  }
-
-  /*
-   * Gets a list of operations required to transform the before list of tokens into the
-   * after list of tokens. An operation describes whether a particular list of consecutive
-   * tokens are equal, replaced, inserted, or deleted.
-   *
-   * @param {Array.<string>} before_tokens The before list of tokens.
-   * @param {Array.<string>} after_tokens The after list of tokens.
-   *
-   * @return {Array.<Object>} The list of operations to transform the before list of
-   *      tokens into the after list of tokens, where each operation has the following
-   *      keys:
-   *      - {string} action One of {'replace', 'insert', 'delete', 'equal'}.
-   *      - {number} start_in_before The beginning of the range in the list of before tokens.
-   *      - {number} end_in_before The end of the range in the list of before tokens.
-   *      - {number} start_in_after The beginning of the range in the list of after tokens.
-   *      - {number} end_in_after The end of the range in the list of after tokens.
-   */
-  function calculate_operations(before_tokens, after_tokens) {
-    if (!before_tokens) {
-      throw new Error('before_tokens?');
-    }
-    if (!after_tokens) {
-      throw new Error('after_tokens?');
-    }
-
-    var position_in_before = 0;
-    var position_in_after = 0;
-    var operations = [];
-    var action_map = {
-      'false,false': 'replace',
-      'true,false': 'insert',
-      'false,true': 'delete',
-      'true,true': 'none'
-    };
-    var matches = find_matching_blocks(before_tokens, after_tokens);
-    matches.push(new Match(before_tokens.length, after_tokens.length, 0));
-
-    for (var index = 0; index < matches.length; index++) {
-      var match = matches[index];
-      var match_starts_at_current_position_in_before = position_in_before === match.start_in_before;
-      var match_starts_at_current_position_in_after = position_in_after === match.start_in_after;
-      var action_up_to_match_positions =
-        action_map[
-          [
-            match_starts_at_current_position_in_before,
-            match_starts_at_current_position_in_after
-          ].toString()
-        ];
-      if (action_up_to_match_positions !== 'none') {
-        operations.push({
-          action: action_up_to_match_positions,
-          start_in_before: position_in_before,
-          end_in_before:
-            action_up_to_match_positions !== 'insert' ? match.start_in_before - 1 : void 0,
-          start_in_after: position_in_after,
-          end_in_after:
-            action_up_to_match_positions !== 'delete' ? match.start_in_after - 1 : void 0
-        });
-      }
-      if (match.length !== 0) {
-        operations.push({
-          action: 'equal',
-          start_in_before: match.start_in_before,
-          end_in_before: match.end_in_before,
-          start_in_after: match.start_in_after,
-          end_in_after: match.end_in_after
-        });
-      }
-      position_in_before = match.end_in_before + 1;
-      position_in_after = match.end_in_after + 1;
-    }
-
-    var post_processed = [];
-    var last_op = {
-      action: 'none'
-    };
-
-    function is_single_whitespace(op) {
-      if (op.action !== 'equal') {
-        return false;
-      }
-      if (op.end_in_before - op.start_in_before !== 0) {
-        return false;
-      }
-      return /^\s$/.test(before_tokens.slice(op.start_in_before, op.end_in_before + 1));
-    }
-
-    for (var i = 0; i < operations.length; i++) {
-      var op = operations[i];
-
-      if (
-        (is_single_whitespace(op) && last_op.action === 'replace') ||
-        (op.action === 'replace' && last_op.action === 'replace')
-      ) {
-        last_op.end_in_before = op.end_in_before;
-        last_op.end_in_after = op.end_in_after;
-      } else {
-        post_processed.push(op);
-        last_op = op;
-      }
-    }
-    return post_processed;
-  }
-
-  /*
-   * Returns a list of tokens of a particular type starting at a given index.
-   *
-   * @param {number} start The index of first token to test.
-   * @param {Array.<string>} content The list of tokens.
-   * @param {function} predicate A function that returns true if a token is of
-   *      a particular type, false otherwise. It should accept the following
-   *      parameters:
-   *      - {string} The token to test.
-   */
-  function consecutive_where(start, content, predicate) {
-    content = content.slice(start, content.length + 1);
-    var last_matching_index = null;
-
-    for (var index = 0; index < content.length; index++) {
-      var token = content[index];
-      var answer = predicate(token);
-
-      if (answer === true) {
-        last_matching_index = index;
-      }
-      if (answer === false) {
-        break;
-      }
-    }
-
-    if (last_matching_index !== null) {
-      return content.slice(0, last_matching_index + 1);
-    }
-    return [];
-  }
-
-  /*
-   * Wraps and concatenates a list of tokens with a tag. Does not wrap tag tokens,
-   * unless they are wrappable (i.e. void and atomic tags).
-   *
-   * @param {sting} tag The tag name of the wrapper tags.
-   * @param {Array.<string>} content The list of tokens to wrap.
-   * @param {string} class_name (Optional) The class name to include in the wrapper tag.
-   */
-  function wrap(tag, content, class_name) {
-    var rendering = '';
-    var position = 0;
-    var length = content.length;
-
-    while (true) {
-      if (position >= length) break;
-      var non_tags = consecutive_where(position, content, is_wrappable);
-      position += non_tags.length;
-      if (non_tags.length !== 0) {
-        var val = non_tags.join('');
-        if (val.trim()) {
-          rendering += `<span class="diff-${tag} ${class_name || ''}">${val}</span>`;
-        }
-      }
-
-      if (position >= length) break;
-      var tags = consecutive_where(position, content, is_tag);
-      position += tags.length;
-      rendering += tags.join('');
-    }
-    return rendering;
-  }
-
-  /*
-   * op_map.equal/insert/delete/replace are functions that render an operation into
-   * HTML content.
-   *
-   * @param {Object} op The operation that applies to a prticular list of tokens. Has the
-   *      following keys:
-   *      - {string} action One of {'replace', 'insert', 'delete', 'equal'}.
-   *      - {number} start_in_before The beginning of the range in the list of before tokens.
-   *      - {number} end_in_before The end of the range in the list of before tokens.
-   *      - {number} start_in_after The beginning of the range in the list of after tokens.
-   *      - {number} end_in_after The end of the range in the list of after tokens.
-   * @param {Array.<string>} before_tokens The before list of tokens.
-   * @param {Array.<string>} after_tokens The after list of tokens.
-   * @param {string} class_name (Optional) The class name to include in the wrapper tag.
-   *
-   * @return {string} The rendering of that operation.
-   */
-  var op_map = {
-    equal: function (op, before_tokens, after_tokens, class_name) {
-      return after_tokens.slice(op.start_in_after, op.end_in_after + 1).join('');
-    },
-    insert: function (op, before_tokens, after_tokens, class_name) {
-      var val = after_tokens.slice(op.start_in_after, op.end_in_after + 1);
-      return wrap('ins', val, class_name);
-    },
-    delete: function (op, before_tokens, after_tokens, class_name) {
-      var val = before_tokens.slice(op.start_in_before, op.end_in_before + 1);
-      return wrap('del', val, class_name);
-    }
-  };
-
-  op_map.replace = function (op, before_tokens, after_tokens, class_name) {
-    return [
-      op_map['delete'](op, before_tokens, after_tokens, class_name),
-      op_map.insert(op, before_tokens, after_tokens, class_name)
-    ];
-  };
-
-  /*
-   * Renders a list of operations into HTML content. The result is the combined version
-   * of the before and after tokens with the differences wrapped in tags.
-   *
-   * @param {Array.<string>} before_tokens The before list of tokens.
-   * @param {Array.<string>} after_tokens The after list of tokens.
-   * @param {Array.<Object>} operations The list of operations to transform the before
-   *      list of tokens into the after list of tokens, where each operation has the
-   *      following keys:
-   *      - {string} action One of {'replace', 'insert', 'delete', 'equal'}.
-   *      - {number} start_in_before The beginning of the range in the list of before tokens.
-   *      - {number} end_in_before The end of the range in the list of before tokens.
-   *      - {number} start_in_after The beginning of the range in the list of after tokens.
-   *      - {number} end_in_after The end of the range in the list of after tokens.
-   * @param {string} class_name (Optional) The class name to include in the wrapper tag.
-   *
-   * @return {string} The rendering of the list of operations.
-   */
-  function render_operations(before_tokens, after_tokens, operations, class_name) {
-    var rendering = '';
-    for (var i = 0; i < operations.length; i++) {
-      var op = operations[i];
-      const result = op_map[op.action](op, before_tokens, after_tokens, class_name);
-      if (op.action === 'replace') {
-        rendering += result[0] + result[1];
-      } else {
-        rendering += result;
-      }
-    }
-    return rendering;
-  }
-
-  /**
-   * htmldiff thinks that atomic or component objects are equal if their tag names are the same, because of it <div class="slideshow"> === <div class="here"> for example
-   * this function compares them
-   */
-  function render_equal_components(before, after, ops, class_name, components_search_rule) {
-    var i, j, r, attrs;
-    var op;
-    var amount;
-    var before_token, after_token;
-    var before_token_match, after_token_match;
-    for (i = 0; i < ops.length; i++) {
-      op = ops[i];
-      if (op.action === 'equal') {
-        amount = op.end_in_before - op.start_in_before + 1; // +1 since the array is 0 based
-        for (j = 0; j < amount; j++) {
-          before_token = before[op.start_in_before + j];
-          after_token = after[op.start_in_after + j];
-          if (before_token !== after_token) {
-            before_token_match = components_search_rule.exec(before_token);
-            after_token_match = components_search_rule.exec(after_token);
-            if (before_token_match && after_token_match) {
-              if (before_token_match[1].toLowerCase() === after_token_match[1].toLowerCase()) {
-                // compare content of these two same components
-                r = diff(before_token, after_token, class_name);
-                after[op.start_in_after + j] = r;
-              } else {
-                // components are different, wrap before by 'del' and after by 'ins'
-                attrs = class_name ? ' class="' + class_name + '"' : '';
-                r =
-                  '<del' +
-                  attrs +
-                  '>' +
-                  before_token +
-                  '</del>' +
-                  '<ins' +
-                  attrs +
-                  '>' +
-                  after_token +
-                  '</ins>';
-                after[op.start_in_after + j] = r;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /*
-   * Compares two pieces of HTML content and returns the combined content with differences
-   * wrapped in <ins> and <del> tags.
-   *
-   * @param {string} before The HTML content before the changes.
-   * @param {string} after The HTML content after the changes.
-   * @param {string} class_name (Optional) The class attribute to include in <ins> and <del> tags.
-   *
-   * @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.
-   */
-  function diff(before, after, class_name, components_search_rule) {
-    if (before === after) return before;
-    before = html_to_tokens(before, components_search_rule);
-    after = html_to_tokens(after, components_search_rule);
-    var ops = calculate_operations(before, after);
-
-    if (components_search_rule) {
-      render_equal_components(before, after, ops, class_name, components_search_rule);
-    }
-
-    return render_operations(before, after, ops, class_name);
-  }
-
-  function render_operations_dual_pane(before_tokens, after_tokens, operations) {
-    var after_render, before_render, next_block, op, _i, _len;
-    before_render = '';
-    after_render = '';
-    for (_i = 0, _len = operations.length; _i < _len; _i++) {
-      op = operations[_i];
-      next_block = op_map[op.action](op, before_tokens, after_tokens);
-      switch (op.action) {
-        case 'equal':
-          before_render += next_block;
-          after_render += next_block;
-          break;
-        case 'insert':
-          after_render += next_block;
-          break;
-        case 'delete':
-          before_render += next_block;
-          break;
-        case 'replace':
-          before_render += next_block[0];
-          after_render += next_block[1];
-          break;
-        default:
-          continue;
-      }
-    }
-    return return_dual_pane(before_render, after_render);
-  }
-
-  function diff_dual_pane(before, after) {
-    if (!before || !after) return { before, after };
-
-    var ops;
-    if (before === after) {
-      return return_dual_pane(before, after);
-    }
-    before = html_to_tokens(before);
-    after = html_to_tokens(after);
-    ops = calculate_operations(before, after);
-    return render_operations_dual_pane(before, after, ops);
-  }
-
-  diff.html_to_tokens = html_to_tokens;
-  diff.merge_html_by_class = merge_html_by_class;
-  diff.find_matching_blocks = find_matching_blocks;
-  find_matching_blocks.find_match = find_match;
-  find_matching_blocks.create_index = create_index;
-  find_matching_blocks.get_key_for_token = get_key_for_token;
-  diff.calculate_operations = calculate_operations;
-  diff.render_operations = render_operations;
-  diff.diff_dual_pane = diff_dual_pane;
-  diff.clean = function (html) {
-    const tokens = html_to_tokens(html);
-    let isDiffSpanOpen = false;
-    return tokens.reduce((result, token) => {
-      if (token.includes(`span class="diff-`)) {
-        isDiffSpanOpen = true;
-        return result;
-      } else if (isDiffSpanOpen && token.includes('</span>')) {
-        isDiffSpanOpen = false;
-        return result;
-      }
-      return result + token;
-    }, '');
-  };
-
-  if (typeof define === 'function') {
-    // eslint-disable-next-line no-undef
-    define([], function () {
-      return diff;
-    });
-  } else if (typeof module !== 'undefined' && module !== null) {
-    module.exports = diff;
-  } else {
-    this.htmldiff = diff;
-  }
-}.call(this));
diff --git a/apps/mobile/src/utils/Events.js b/apps/mobile/src/utils/events.js
similarity index 100%
rename from apps/mobile/src/utils/Events.js
rename to apps/mobile/src/utils/events.js
diff --git a/apps/mobile/src/utils/filesystem.js b/apps/mobile/src/utils/filesystem.js
deleted file mode 100644
index 71c1a33aa..000000000
--- a/apps/mobile/src/utils/filesystem.js
+++ /dev/null
@@ -1,327 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import * as ScopedStorage from 'react-native-scoped-storage';
-import Sodium from 'react-native-sodium';
-import RNFetchBlob from 'rn-fetch-blob';
-import { ShareComponent } from '../components/ExportDialog/share';
-import { useAttachmentStore } from '../provider/stores';
-import { presentSheet, ToastEvent } from '../services/EventManager';
-import { db } from './database';
-import Storage from './storage';
-
-const cacheDir = RNFetchBlob.fs.dirs.CacheDir;
-
-async function readEncrypted(filename, key, cipherData) {
-  let path = `${cacheDir}/${filename}`;
-  try {
-    let exists = await RNFetchBlob.fs.exists(path);
-    if (!exists) {
-      return false;
-    }
-
-    let output = await Sodium.decryptFile(
-      key,
-      {
-        ...cipherData,
-        hash: filename
-      },
-      true
-    );
-    console.log('output length: ', output?.length);
-    return output;
-  } catch (e) {
-    RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log(e);
-    console.log('error');
-    return false;
-  }
-}
-
-function randId(prefix) {
-  return Math.random()
-    .toString(36)
-    .replace('0.', prefix || '');
-}
-
-async function writeEncrypted(filename, { data, type, key }) {
-  console.log('file input: ', { type, key });
-  let filepath = cacheDir + `/${randId('imagecache_')}`;
-  console.log(filepath);
-  await RNFetchBlob.fs.writeFile(filepath, data, 'base64');
-  let output = await Sodium.encryptFile(key, {
-    uri: Platform.OS === 'ios' ? filepath : `file://` + filepath,
-    type: 'url'
-  });
-  RNFetchBlob.fs.unlink(filepath).catch(console.log);
-
-  console.log('encrypted file output: ', output);
-  return {
-    ...output,
-    alg: `xcha-stream`
-  };
-}
-
-async function uploadFile(filename, data, cancelToken) {
-  if (!data) return false;
-  let { url, headers } = data;
-
-  console.log('uploading file: ', filename, headers);
-  try {
-    let res = await fetch(url, {
-      method: 'PUT',
-      headers
-    });
-    if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
-    const uploadUrl = await res.text();
-    if (!uploadUrl) throw new Error('Unable to resolve upload url');
-
-    let request = RNFetchBlob.config({
-      IOSBackgroundTask: true
-    })
-      .fetch(
-        'PUT',
-        uploadUrl,
-        {
-          'content-type': ''
-        },
-        RNFetchBlob.wrap(`${cacheDir}/${filename}`)
-      )
-      .uploadProgress((sent, total) => {
-        useAttachmentStore.getState().setProgress(sent, total, filename, 0, 'upload');
-        console.log('uploading: ', sent, total);
-      });
-    cancelToken.cancel = request.cancel;
-    let response = await request;
-
-    let status = response.info().status;
-    let text = await response.text();
-    let result = status >= 200 && status < 300 && text.length === 0;
-    useAttachmentStore.getState().remove(filename);
-    if (result) {
-      let attachment = db.attachments.attachment(filename);
-      if (!attachment) return result;
-      if (!attachment.metadata.type.startsWith('image/')) {
-        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
-      }
-    }
-
-    return result;
-  } catch (e) {
-    useAttachmentStore.getState().remove(filename);
-    console.log('upload file: ', e, url, headers);
-    return false;
-  }
-}
-
-function valueFromXml(code, xml) {
-  if (!xml.includes(code)) return `Unknown ${code}`;
-  return xml.slice(xml.indexOf(`<${code}>`) + code.length + 2, xml.indexOf(`</${code}>`));
-}
-
-async function fileCheck(response, totalSize) {
-  if (totalSize < 1000) {
-    let text = await response.text();
-    console.log(text);
-    if (text.startsWith('<?xml')) {
-      let errorJson = {
-        Code: valueFromXml('Code', text),
-        Message: valueFromXml('Message', text)
-      };
-      throw new Error(`${errorJson.Code}: ${errorJson.Message}`);
-    }
-  }
-}
-
-async function downloadFile(filename, data, cancelToken) {
-  if (!data) return false;
-  let { url, headers } = data;
-
-  console.log('downloading file: ', filename, url);
-  let path = `${cacheDir}/${filename}`;
-  try {
-    let exists = await RNFetchBlob.fs.exists(path);
-    if (exists) {
-      console.log(await RNFetchBlob.fs.readFile(path, 'utf8'));
-      console.log('file is downloaded');
-      return true;
-    }
-
-    let res = await fetch(url, {
-      method: 'GET',
-      headers
-    });
-    if (!res.ok) throw new Error(`${res.status}: Unable to resolve download url`);
-    const downloadUrl = await res.text();
-
-    if (!downloadUrl) throw new Error('Unable to resolve download url');
-    let totalSize = 0;
-    let request = RNFetchBlob.config({
-      path: path,
-      IOSBackgroundTask: true
-    })
-      .fetch('GET', downloadUrl, null)
-      .progress((recieved, total) => {
-        useAttachmentStore.getState().setProgress(0, total, filename, recieved, 'download');
-        totalSize = total;
-        console.log('downloading: ', recieved, total);
-      });
-
-    cancelToken.cancel = request.cancel;
-    let response = await request;
-    await fileCheck(response, totalSize);
-    let status = response.info().status;
-    useAttachmentStore.getState().remove(filename);
-    return status >= 200 && status < 300;
-  } catch (e) {
-    ToastEvent.show({
-      heading: 'Error downloading file',
-      message: e.message,
-      type: 'error'
-    });
-
-    useAttachmentStore.getState().remove(filename);
-    RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log('download file error: ', e, url, headers);
-    return false;
-  }
-}
-
-async function deleteFile(filename, data) {
-  if (!data) {
-    if (!filename) return;
-    let delFilePath = cacheDir + `/${filename}`;
-    RNFetchBlob.fs.unlink(delFilePath).catch(console.log);
-    return true;
-  }
-
-  let { url, headers } = data;
-  try {
-    let response = await RNFetchBlob.fetch('DELETE', url, headers);
-    let status = response.info().status;
-    return status >= 200 && status < 300;
-  } catch (e) {
-    console.log('delete file: ', e, url, headers);
-    return false;
-  }
-}
-
-async function exists(filename) {
-  let exists = await RNFetchBlob.fs.exists(`${cacheDir}/${filename}`);
-  return exists;
-}
-
-function cancelable(operation) {
-  const cancelToken = {
-    cancel: () => {}
-  };
-  return (filename, { url, headers }) => {
-    return {
-      execute: () => operation(filename, { url, headers }, cancelToken),
-      cancel: async () => {
-        await cancelToken.cancel();
-        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
-      }
-    };
-  };
-}
-
-async function downloadAttachment(hash, global = true) {
-  let attachment = db.attachments.attachment(hash);
-  if (!attachment) {
-    console.log('attachment not found');
-    return;
-  }
-
-  let folder = {};
-  if (Platform.OS === 'android') {
-    folder = await ScopedStorage.openDocumentTree();
-    if (!folder) return;
-  } else {
-    folder.uri = await Storage.checkAndCreateDir('/downloads/');
-  }
-
-  try {
-    await db.fs.downloadFile(attachment.metadata.hash, attachment.metadata.hash);
-    if (!(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.metadata.hash}`))) return;
-
-    let key = await db.attachments.decryptKey(attachment.key);
-    console.log('attachment key', key);
-    let info = {
-      iv: attachment.iv,
-      salt: attachment.salt,
-      length: attachment.length,
-      alg: attachment.alg,
-      hash: attachment.metadata.hash,
-      hashType: attachment.metadata.hashType,
-      mime: attachment.metadata.type,
-      fileName: attachment.metadata.filename,
-      uri: folder.uri,
-      chunkSize: attachment.chunkSize
-    };
-
-    let fileUri = await Sodium.decryptFile(key, info, false);
-    ToastEvent.show({
-      heading: 'Download successful',
-      message: attachment.metadata.filename + ' downloaded',
-      type: 'success'
-    });
-
-    if (attachment.dateUploaded) {
-      console.log('Deleting attachment after download', attachment.dateUploaded);
-      RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
-        .catch(console.log);
-    }
-
-    if (Platform.OS === 'ios') {
-      fileUri = folder.uri + `/${attachment.metadata.filename}`;
-    }
-    console.log('saved file uri: ', fileUri);
-
-    presentSheet({
-      title: `File downloaded`,
-      paragraph: `${attachment.metadata.filename} saved to ${
-        Platform.OS === 'android' ? 'selected path' : 'File Manager/Notesnook/downloads'
-      }`,
-      icon: 'download',
-      context: global ? null : attachment.metadata.hash,
-      component: <ShareComponent uri={fileUri} name={attachment.metadata.filename} padding={12} />
-    });
-    return fileUri;
-  } catch (e) {
-    console.log('download attachment error: ', e);
-    if (attachment.dateUploaded) {
-      console.log('Deleting attachment on error', attachment.dateUploaded);
-      RNFetchBlob.fs
-        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
-        .catch(console.log);
-    }
-    useAttachmentStore.getState().remove(attachment.metadata.hash);
-  }
-}
-
-async function clearFileStorage() {
-  try {
-    let files = await RNFetchBlob.fs.ls(cacheDir);
-    for (let file of files) {
-      try {
-        await RNFetchBlob.fs.unlink(cacheDir + `/${file}`);
-      } catch (e) {
-        console.log(e);
-      }
-    }
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-export default {
-  readEncrypted,
-  writeEncrypted,
-  uploadFile: cancelable(uploadFile),
-  downloadFile: cancelable(downloadFile),
-  deleteFile,
-  exists,
-  downloadAttachment,
-  clearFileStorage
-};
diff --git a/apps/mobile/src/utils/filesystem/download.js b/apps/mobile/src/utils/filesystem/download.js
new file mode 100644
index 000000000..e9b59519b
--- /dev/null
+++ b/apps/mobile/src/utils/filesystem/download.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import * as ScopedStorage from 'react-native-scoped-storage';
+import Sodium from 'react-native-sodium';
+import RNFetchBlob from 'rn-fetch-blob';
+import { ShareComponent } from '../../components/ExportDialog/share';
+import { useAttachmentStore } from '../../provider/stores';
+import { presentSheet, ToastEvent } from '../../services/EventManager';
+import { db } from '../database';
+import Storage from '../database/storage';
+import { cacheDir, fileCheck } from './utils';
+
+export async function downloadFile(filename, data, cancelToken) {
+  if (!data) return false;
+  let { url, headers } = data;
+
+  console.log('downloading file: ', filename, url);
+  let path = `${cacheDir}/${filename}`;
+  try {
+    let exists = await RNFetchBlob.fs.exists(path);
+    if (exists) {
+      console.log(await RNFetchBlob.fs.readFile(path, 'utf8'));
+      console.log('file is downloaded');
+      return true;
+    }
+
+    let res = await fetch(url, {
+      method: 'GET',
+      headers
+    });
+    if (!res.ok) throw new Error(`${res.status}: Unable to resolve download url`);
+    const downloadUrl = await res.text();
+
+    if (!downloadUrl) throw new Error('Unable to resolve download url');
+    let totalSize = 0;
+    let request = RNFetchBlob.config({
+      path: path,
+      IOSBackgroundTask: true
+    })
+      .fetch('GET', downloadUrl, null)
+      .progress((recieved, total) => {
+        useAttachmentStore.getState().setProgress(0, total, filename, recieved, 'download');
+        totalSize = total;
+        console.log('downloading: ', recieved, total);
+      });
+
+    cancelToken.cancel = request.cancel;
+    let response = await request;
+    await fileCheck(response, totalSize);
+    let status = response.info().status;
+    useAttachmentStore.getState().remove(filename);
+    return status >= 200 && status < 300;
+  } catch (e) {
+    ToastEvent.show({
+      heading: 'Error downloading file',
+      message: e.message,
+      type: 'error'
+    });
+
+    useAttachmentStore.getState().remove(filename);
+    RNFetchBlob.fs.unlink(path).catch(console.log);
+    console.log('download file error: ', e, url, headers);
+    return false;
+  }
+}
+
+export async function downloadAttachment(hash, global = true) {
+  let attachment = db.attachments.attachment(hash);
+  if (!attachment) {
+    console.log('attachment not found');
+    return;
+  }
+
+  let folder = {};
+  if (Platform.OS === 'android') {
+    folder = await ScopedStorage.openDocumentTree();
+    if (!folder) return;
+  } else {
+    folder.uri = await Storage.checkAndCreateDir('/downloads/');
+  }
+
+  try {
+    await db.fs.downloadFile(attachment.metadata.hash, attachment.metadata.hash);
+    if (!(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.metadata.hash}`))) return;
+
+    let key = await db.attachments.decryptKey(attachment.key);
+    console.log('attachment key', key);
+    let info = {
+      iv: attachment.iv,
+      salt: attachment.salt,
+      length: attachment.length,
+      alg: attachment.alg,
+      hash: attachment.metadata.hash,
+      hashType: attachment.metadata.hashType,
+      mime: attachment.metadata.type,
+      fileName: attachment.metadata.filename,
+      uri: folder.uri,
+      chunkSize: attachment.chunkSize
+    };
+
+    let fileUri = await Sodium.decryptFile(key, info, false);
+    ToastEvent.show({
+      heading: 'Download successful',
+      message: attachment.metadata.filename + ' downloaded',
+      type: 'success'
+    });
+
+    if (attachment.dateUploaded) {
+      console.log('Deleting attachment after download', attachment.dateUploaded);
+      RNFetchBlob.fs
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .catch(console.log);
+    }
+
+    if (Platform.OS === 'ios') {
+      fileUri = folder.uri + `/${attachment.metadata.filename}`;
+    }
+    console.log('saved file uri: ', fileUri);
+
+    presentSheet({
+      title: `File downloaded`,
+      paragraph: `${attachment.metadata.filename} saved to ${
+        Platform.OS === 'android' ? 'selected path' : 'File Manager/Notesnook/downloads'
+      }`,
+      icon: 'download',
+      context: global ? null : attachment.metadata.hash,
+      component: <ShareComponent uri={fileUri} name={attachment.metadata.filename} padding={12} />
+    });
+    return fileUri;
+  } catch (e) {
+    console.log('download attachment error: ', e);
+    if (attachment.dateUploaded) {
+      console.log('Deleting attachment on error', attachment.dateUploaded);
+      RNFetchBlob.fs
+        .unlink(RNFetchBlob.fs.dirs.CacheDir + `/${attachment.metadata.hash}`)
+        .catch(console.log);
+    }
+    useAttachmentStore.getState().remove(attachment.metadata.hash);
+  }
+}
diff --git a/apps/mobile/src/utils/filesystem/index.js b/apps/mobile/src/utils/filesystem/index.js
new file mode 100644
index 000000000..4402e7cd9
--- /dev/null
+++ b/apps/mobile/src/utils/filesystem/index.js
@@ -0,0 +1,15 @@
+import { downloadAttachment, downloadFile } from './download';
+import { clearFileStorage, deleteFile, exists, readEncrypted, writeEncrypted } from './io';
+import { uploadFile } from './upload';
+import { cancelable } from './utils';
+
+export default {
+  readEncrypted,
+  writeEncrypted,
+  uploadFile: cancelable(uploadFile),
+  downloadFile: cancelable(downloadFile),
+  deleteFile,
+  exists,
+  downloadAttachment,
+  clearFileStorage
+};
diff --git a/apps/mobile/src/utils/filesystem/io.js b/apps/mobile/src/utils/filesystem/io.js
new file mode 100644
index 000000000..95465f736
--- /dev/null
+++ b/apps/mobile/src/utils/filesystem/io.js
@@ -0,0 +1,87 @@
+import { Platform } from 'react-native';
+import Sodium from 'react-native-sodium';
+import RNFetchBlob from 'rn-fetch-blob';
+import { cacheDir, getRandomId } from './utils';
+
+export async function readEncrypted(filename, key, cipherData) {
+  let path = `${cacheDir}/${filename}`;
+  try {
+    let exists = await RNFetchBlob.fs.exists(path);
+    if (!exists) {
+      return false;
+    }
+
+    let output = await Sodium.decryptFile(
+      key,
+      {
+        ...cipherData,
+        hash: filename
+      },
+      true
+    );
+    console.log('output length: ', output?.length);
+    return output;
+  } catch (e) {
+    RNFetchBlob.fs.unlink(path).catch(console.log);
+    console.log(e);
+    console.log('error');
+    return false;
+  }
+}
+
+export async function writeEncrypted(filename, { data, type, key }) {
+  console.log('file input: ', { type, key });
+  let filepath = cacheDir + `/${getRandomId('imagecache_')}`;
+  console.log(filepath);
+  await RNFetchBlob.fs.writeFile(filepath, data, 'base64');
+  let output = await Sodium.encryptFile(key, {
+    uri: Platform.OS === 'ios' ? filepath : `file://` + filepath,
+    type: 'url'
+  });
+  RNFetchBlob.fs.unlink(filepath).catch(console.log);
+
+  console.log('encrypted file output: ', output);
+  return {
+    ...output,
+    alg: `xcha-stream`
+  };
+}
+
+export async function deleteFile(filename, data) {
+  if (!data) {
+    if (!filename) return;
+    let delFilePath = cacheDir + `/${filename}`;
+    RNFetchBlob.fs.unlink(delFilePath).catch(console.log);
+    return true;
+  }
+
+  let { url, headers } = data;
+  try {
+    let response = await RNFetchBlob.fetch('DELETE', url, headers);
+    let status = response.info().status;
+    return status >= 200 && status < 300;
+  } catch (e) {
+    console.log('delete file: ', e, url, headers);
+    return false;
+  }
+}
+
+export async function clearFileStorage() {
+  try {
+    let files = await RNFetchBlob.fs.ls(cacheDir);
+    for (let file of files) {
+      try {
+        await RNFetchBlob.fs.unlink(cacheDir + `/${file}`);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+export async function exists(filename) {
+  let exists = await RNFetchBlob.fs.exists(`${cacheDir}/${filename}`);
+  return exists;
+}
diff --git a/apps/mobile/src/utils/filesystem/upload.js b/apps/mobile/src/utils/filesystem/upload.js
new file mode 100644
index 000000000..15dfd6582
--- /dev/null
+++ b/apps/mobile/src/utils/filesystem/upload.js
@@ -0,0 +1,56 @@
+import RNFetchBlob from 'rn-fetch-blob';
+import { useAttachmentStore } from '../../provider/stores';
+import { db } from '../database';
+import { cacheDir } from './utils';
+
+export async function uploadFile(filename, data, cancelToken) {
+  if (!data) return false;
+  let { url, headers } = data;
+
+  console.log('uploading file: ', filename, headers);
+  try {
+    let res = await fetch(url, {
+      method: 'PUT',
+      headers
+    });
+    if (!res.ok) throw new Error(`${res.status}: Unable to resolve upload url`);
+    const uploadUrl = await res.text();
+    if (!uploadUrl) throw new Error('Unable to resolve upload url');
+
+    let request = RNFetchBlob.config({
+      IOSBackgroundTask: true
+    })
+      .fetch(
+        'PUT',
+        uploadUrl,
+        {
+          'content-type': ''
+        },
+        RNFetchBlob.wrap(`${cacheDir}/${filename}`)
+      )
+      .uploadProgress((sent, total) => {
+        useAttachmentStore.getState().setProgress(sent, total, filename, 0, 'upload');
+        console.log('uploading: ', sent, total);
+      });
+    cancelToken.cancel = request.cancel;
+    let response = await request;
+
+    let status = response.info().status;
+    let text = await response.text();
+    let result = status >= 200 && status < 300 && text.length === 0;
+    useAttachmentStore.getState().remove(filename);
+    if (result) {
+      let attachment = db.attachments.attachment(filename);
+      if (!attachment) return result;
+      if (!attachment.metadata.type.startsWith('image/')) {
+        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
+      }
+    }
+
+    return result;
+  } catch (e) {
+    useAttachmentStore.getState().remove(filename);
+    console.log('upload file: ', e, url, headers);
+    return false;
+  }
+}
diff --git a/apps/mobile/src/utils/filesystem/utils.js b/apps/mobile/src/utils/filesystem/utils.js
new file mode 100644
index 000000000..926679cc9
--- /dev/null
+++ b/apps/mobile/src/utils/filesystem/utils.js
@@ -0,0 +1,43 @@
+import RNFetchBlob from 'rn-fetch-blob';
+
+export const cacheDir = RNFetchBlob.fs.dirs.CacheDir;
+
+export function getRandomId(prefix) {
+  return Math.random()
+    .toString(36)
+    .replace('0.', prefix || '');
+}
+
+export function extractValueFromXmlTag(code, xml) {
+  if (!xml.includes(code)) return `Unknown ${code}`;
+  return xml.slice(xml.indexOf(`<${code}>`) + code.length + 2, xml.indexOf(`</${code}>`));
+}
+
+export async function fileCheck(response, totalSize) {
+  if (totalSize < 1000) {
+    let text = await response.text();
+    console.log(text);
+    if (text.startsWith('<?xml')) {
+      let errorJson = {
+        Code: extractValueFromXmlTag('Code', text),
+        Message: extractValueFromXmlTag('Message', text)
+      };
+      throw new Error(`${errorJson.Code}: ${errorJson.Message}`);
+    }
+  }
+}
+
+export function cancelable(operation) {
+  const cancelToken = {
+    cancel: () => {}
+  };
+  return (filename, { url, headers }) => {
+    return {
+      execute: () => operation(filename, { url, headers }, cancelToken),
+      cancel: async () => {
+        await cancelToken.cancel();
+        RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
+      }
+    };
+  };
+}
diff --git a/apps/mobile/src/utils/functions.js b/apps/mobile/src/utils/functions.js
index 1ca27a7b1..51065e2ea 100644
--- a/apps/mobile/src/utils/functions.js
+++ b/apps/mobile/src/utils/functions.js
@@ -5,8 +5,7 @@ import { useMenuStore, useSelectionStore } from '../provider/stores';
 import { eSendEvent, ToastEvent } from '../services/EventManager';
 import Navigation from '../services/Navigation';
 import { db } from './database';
-import { eClearEditor } from './Events';
-import layoutmanager from './layout-manager';
+import { eClearEditor } from './events';
 
 export const deleteItems = async item => {
   if (item && db.monographs.isPublished(item.id)) {
@@ -45,7 +44,6 @@ export const deleteItems = async item => {
 
     await db.notes.delete(...ids);
 
-    //layoutmanager.withAnimation(150);
     Navigation.setRoutesToUpdate([Navigation.routeNames.Notes, Navigation.routeNames.NotesPage]);
     eSendEvent(eClearEditor);
   }
diff --git a/apps/mobile/src/utils/globalrefs.ts b/apps/mobile/src/utils/globalrefs.ts
new file mode 100644
index 000000000..dac522ce4
--- /dev/null
+++ b/apps/mobile/src/utils/globalrefs.ts
@@ -0,0 +1,9 @@
+import { createNavigationContainerRef } from '@react-navigation/native';
+import { createRef } from 'react';
+import { TextInput, View } from 'react-native';
+import Tabs from '../components/tabs';
+
+export const inputRef = createRef<TextInput>();
+export const rootNavigatorRef = createNavigationContainerRef();
+export const tabBarRef = createRef<Tabs>();
+export const editorRef = createRef<View>();
diff --git a/apps/mobile/src/utils/hooks/useActions.js b/apps/mobile/src/utils/hooks/useActions.js
new file mode 100644
index 000000000..5d052bf3d
--- /dev/null
+++ b/apps/mobile/src/utils/hooks/useActions.js
@@ -0,0 +1,680 @@
+import Clipboard from '@react-native-clipboard/clipboard';
+import React, { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import Share from 'react-native-share';
+import { notesnook } from '../../../e2e/test.ids';
+import { useTracked } from '../../provider';
+import { Actions } from '../../provider/Actions';
+import {
+  useEditorStore,
+  useMenuStore,
+  useSelectionStore,
+  useTagStore,
+  useUserStore
+} from '../../provider/stores';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  openVault,
+  presentSheet,
+  ToastEvent
+} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
+import Notifications from '../../services/Notifications';
+import SettingsService from '../../services/SettingsService';
+import { editing, toTXT } from '..';
+import {
+  ACCENT,
+  COLOR_SCHEME,
+  COLOR_SCHEME_DARK,
+  COLOR_SCHEME_LIGHT,
+  COLOR_SCHEME_PITCH_BLACK,
+  setColorScheme
+} from '../color-scheme';
+import { db } from '../database';
+import {
+  eOpenAddNotebookDialog,
+  eOpenAddTopicDialog,
+  eOpenAttachmentsDialog,
+  eOpenExportDialog,
+  eOpenLoginDialog,
+  eOpenMoveNoteDialog,
+  eOpenPublishNoteDialog
+} from '../events';
+import { deleteItems } from '../functions';
+import { MMKV } from '../database/mmkv';
+import { sleep } from '../time';
+import { presentDialog } from '../../components/dialog/functions';
+import { MoveNotes } from '../../components/MoveNoteDialog/movenote';
+import NoteHistory from '../../components/NoteHistory';
+import tiny from '../../views/Editor/tiny/tiny.js';
+import { EditorWebView } from '../../views/Editor/Functions';
+
+export const useActions = ({ close = () => {}, item }) => {
+  const [state, dispatch] = useTracked();
+  const { colors } = state;
+  const clearSelection = useSelectionStore(state => state.clearSelection);
+  const setSelectedItem = useSelectionStore(state => state.setSelectedItem);
+  const setMenuPins = useMenuStore(state => state.setMenuPins);
+  const [isPinnedToMenu, setIsPinnedToMenu] = useState(db.settings.isPinned(item.id));
+  console.log(item.readonly, 'readonly');
+  const user = useUserStore(state => state.user);
+  const [notifPinned, setNotifPinned] = useState(null);
+  const alias =
+    item.type === 'tag'
+      ? db.tags.alias(item.id)
+      : item.type === 'color'
+      ? db.colors.alias(item.id)
+      : item.title;
+
+  const isPublished = item.type === 'note' && db.monographs.isPublished(item.id);
+  const noteInTopic =
+    item.type === 'note' &&
+    editing.actionAfterFirstSave.type === 'topic' &&
+    db.notebooks
+      .notebook(editing.actionAfterFirstSave.notebook)
+      .topics.topic(editing.actionAfterFirstSave.id)
+      .has(item.id);
+
+  useEffect(() => {
+    if (item.id === null) return;
+    checkNotifPinned();
+    if (item.type !== 'note') {
+      setIsPinnedToMenu(db.settings.isPinned(item.id));
+    }
+  }, [item]);
+
+  function checkNotifPinned() {
+    let pinned = Notifications.getPinnedNotes();
+    if (!pinned) {
+      setNotifPinned(null);
+      return;
+    }
+
+    let index = pinned.findIndex(notif => notif.tag === item.id);
+    if (index !== -1) {
+      setNotifPinned(pinned[index]);
+    } else {
+      setNotifPinned(null);
+    }
+  }
+
+  const onUpdate = async type => {
+    if (type === 'unpin') {
+      await sleep(1000);
+      await Notifications.get();
+      checkNotifPinned();
+    }
+  };
+
+  useEffect(() => {
+    eSubscribeEvent('onUpdate', onUpdate);
+
+    return () => {
+      eUnSubscribeEvent('onUpdate', onUpdate);
+    };
+  }, [item]);
+
+  function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
+    let newColors = setColorScheme(colors, accent);
+    dispatch({ type: Actions.THEME, colors: newColors });
+  }
+
+  function switchTheme() {
+    if (!colors.night) {
+      MMKV.setStringAsync('theme', JSON.stringify({ night: true }));
+      let nextTheme = SettingsService.get().pitchBlack
+        ? COLOR_SCHEME_PITCH_BLACK
+        : COLOR_SCHEME_DARK;
+      changeColorScheme(nextTheme);
+      return;
+    }
+    MMKV.setStringAsync('theme', JSON.stringify({ night: false }));
+    changeColorScheme(COLOR_SCHEME_LIGHT);
+  }
+
+  function addTo() {
+    close();
+    clearSelection(true);
+    setSelectedItem(item);
+    setTimeout(() => {
+      eSendEvent(eOpenMoveNoteDialog, item);
+    }, 300);
+  }
+
+  async function addToFavorites() {
+    if (!item.id) return;
+    close();
+    await db.notes.note(item.id).favorite();
+    Navigation.setRoutesToUpdate([
+      Navigation.routeNames.NotesPage,
+      Navigation.routeNames.Favorites,
+      Navigation.routeNames.Notes
+    ]);
+  }
+
+  async function pinItem() {
+    if (!item.id) return;
+    close();
+    let type = item.type;
+    if (db[`${type}s`].pinned.length === 3 && !item.pinned) {
+      ToastEvent.show({
+        heading: `Cannot pin more than 3 ${type}s`,
+        type: 'error'
+      });
+      return;
+    }
+    await db[`${type}s`][type](item.id).pin();
+    Navigation.setRoutesToUpdate([Navigation.routeNames.Notebooks, Navigation.routeNames.Notes]);
+  }
+
+  async function pinToNotifications() {
+    if (Platform.OS === 'ios') return;
+    if (notifPinned !== null) {
+      Notifications.remove(item.id, notifPinned.identifier);
+      await sleep(1000);
+      await Notifications.get();
+      checkNotifPinned();
+      return;
+    }
+    if (item.locked) return;
+    Notifications.present({
+      title: item.title,
+      message: item.headline,
+      subtitle: item.headline,
+      bigText: await toTXT(item, true),
+      ongoing: true,
+      actions: ['UNPIN'],
+      tag: item.id
+    });
+    await sleep(1000);
+    await Notifications.get();
+    checkNotifPinned();
+  }
+
+  async function restoreTrashItem() {
+    close();
+    await db.trash.restore(item.id);
+    Navigation.setRoutesToUpdate([
+      Navigation.routeNames.Tags,
+      Navigation.routeNames.Notes,
+      Navigation.routeNames.Notebooks,
+      Navigation.routeNames.NotesPage,
+      Navigation.routeNames.Favorites,
+      Navigation.routeNames.Trash
+    ]);
+    let type = item.type === 'trash' ? item.itemType : item.type;
+    ToastEvent.show({
+      heading: type === 'note' ? 'Note restored from trash' : 'Notebook restored from trash',
+      type: 'success'
+    });
+  }
+
+  async function copyContent() {
+    if (item.locked) {
+      close();
+      await sleep(300);
+      openVault({
+        copyNote: true,
+        novault: true,
+        locked: true,
+        item: item,
+        title: 'Copy note',
+        description: 'Unlock note to copy to clipboard.'
+      });
+    } else {
+      Clipboard.setString(await toTXT(item));
+      ToastEvent.show({
+        heading: 'Note copied to clipboard',
+        type: 'success',
+        context: 'local'
+      });
+    }
+  }
+
+  async function publishNote() {
+    if (!user) {
+      ToastEvent.show({
+        heading: 'Login required',
+        message: 'Login to publish note',
+        context: 'local',
+        func: () => {
+          eSendEvent(eOpenLoginDialog);
+        },
+        actionText: 'Login'
+      });
+      return;
+    }
+
+    if (!user.isEmailConfirmed) {
+      ToastEvent.show({
+        heading: 'Email is not verified',
+        message: 'Please verify your email first.',
+        context: 'local'
+      });
+      return;
+    }
+    if (item.locked) {
+      ToastEvent.show({
+        heading: 'Locked notes cannot be published',
+        type: 'error',
+        context: 'local'
+      });
+      return;
+    }
+    close();
+    await sleep(300);
+    eSendEvent(eOpenPublishNoteDialog, item);
+  }
+
+  async function addToVault() {
+    if (!item.id) return;
+    if (item.locked) {
+      close();
+      await sleep(300);
+      openVault({
+        item: item,
+        novault: true,
+        locked: true,
+        permanant: true,
+        title: 'Unlock note',
+        description: 'Remove note from the vault.'
+      });
+      return;
+    }
+    try {
+      await db.vault.add(item.id);
+      let note = db.notes.note(item.id).data;
+      if (note.locked) {
+        close();
+        Navigation.setRoutesToUpdate([
+          Navigation.routeNames.NotesPage,
+          Navigation.routeNames.Favorites,
+          Navigation.routeNames.Notes
+        ]);
+      }
+    } catch (e) {
+      close();
+      await sleep(300);
+      switch (e.message) {
+        case db.vault.ERRORS.noVault:
+          openVault({
+            item: item,
+            novault: false,
+            title: 'Create vault',
+            description: 'Set a password to create a vault and lock note.'
+          });
+          break;
+        case db.vault.ERRORS.vaultLocked:
+          openVault({
+            item: item,
+            novault: true,
+            locked: true,
+            title: 'Lock note',
+            description: 'Give access to vault to lock this note.'
+          });
+          break;
+      }
+    }
+  }
+
+  async function createMenuShortcut() {
+    close();
+    try {
+      if (isPinnedToMenu) {
+        await db.settings.unpin(item.id);
+        return;
+      } else {
+        if (item.type === 'topic') {
+          await db.settings.pin(item.type, {
+            id: item.id,
+            notebookId: item.notebookId
+          });
+        } else {
+          await db.settings.pin(item.type, { id: item.id });
+        }
+      }
+      setIsPinnedToMenu(db.settings.isPinned(item.id));
+      setMenuPins();
+    } catch (e) {}
+  }
+
+  async function renameTag() {
+    close();
+    await sleep(300);
+    presentDialog({
+      title: 'Rename tag',
+      paragraph: 'Change the title of the tag ' + alias,
+      positivePress: async value => {
+        if (!value || value === '' || value.trimStart().length == 0) return;
+        await db.tags.rename(item.id, db.tags.sanitize(value));
+        useTagStore.getState().setTags();
+        useMenuStore.getState().setMenuPins();
+        Navigation.setRoutesToUpdate([
+          Navigation.routeNames.Notes,
+          Navigation.routeNames.NotesPage,
+          Navigation.routeNames.Tags
+        ]);
+      },
+      input: true,
+      defaultValue: alias,
+      inputPlaceholder: 'Enter title of tag',
+      positiveText: 'Save'
+    });
+  }
+
+  async function shareNote() {
+    if (item.locked) {
+      close();
+      await sleep(300);
+      openVault({
+        item: item,
+        novault: true,
+        locked: true,
+        share: true,
+        title: 'Share note',
+        description: 'Unlock note to share it.'
+      });
+    } else {
+      Share.open({
+        title: 'Share note to',
+        failOnCancel: false,
+        message: await toTXT(item)
+      });
+    }
+  }
+
+  async function deleteItem() {
+    close();
+    if (item.type === 'tag') {
+      await sleep(300);
+      presentDialog({
+        title: 'Delete tag',
+        paragraph: 'This tag will be removed from all notes.',
+        positivePress: async value => {
+          await db.tags.remove(item.id);
+          useTagStore.getState().setTags();
+          Navigation.setRoutesToUpdate([
+            Navigation.routeNames.Notes,
+            Navigation.routeNames.NotesPage,
+            Navigation.routeNames.Tags
+          ]);
+        },
+        positiveText: 'Delete',
+        positiveType: 'errorShade'
+      });
+      return;
+    }
+    if (item.locked) {
+      await sleep(300);
+      openVault({
+        deleteNote: true,
+        novault: true,
+        locked: true,
+        item: item,
+        title: 'Delete note',
+        description: 'Unlock note to delete it.'
+      });
+    } else {
+      try {
+        close();
+        await deleteItems(item);
+      } catch (e) {}
+    }
+  }
+  async function removeNoteFromTopic() {
+    await db.notebooks
+      .notebook(editing.actionAfterFirstSave.notebook)
+      .topics.topic(editing.actionAfterFirstSave.id)
+      .delete(item.id);
+    Navigation.setRoutesToUpdate([
+      Navigation.routeNames.Notebooks,
+      Navigation.routeNames.Notes,
+      Navigation.routeNames.NotesPage,
+      Navigation.routeNames.Notebook
+    ]);
+    close();
+  }
+
+  async function deleteTrashItem() {
+    close();
+    await sleep(300);
+    presentDialog({
+      title: `Permanent delete`,
+      paragraph: `Are you sure you want to delete this ${item.itemType} permanantly from trash?`,
+      positiveText: 'Delete',
+      negativeText: 'Cancel',
+      positivePress: async () => {
+        await db.trash.delete(item.id);
+        Navigation.setRoutesToUpdate([Navigation.routeNames.Trash]);
+        useSelectionStore.getState().setSelectionMode(false);
+        ToastEvent.show({
+          heading: 'Permanantly deleted items',
+          type: 'success',
+          context: 'local'
+        });
+      },
+      positiveType: 'errorShade'
+    });
+  }
+
+  async function openHistory() {
+    close();
+    await sleep(300);
+    presentSheet({
+      component: ref => <NoteHistory ref={ref} note={item} />
+    });
+  }
+
+  async function showAttachments() {
+    close();
+    await sleep(300);
+    eSendEvent(eOpenAttachmentsDialog, item);
+  }
+
+  async function exportNote() {
+    close();
+    await sleep(300);
+    eSendEvent(eOpenExportDialog, [item]);
+  }
+
+  const toggleReadyOnlyMode = async () => {
+    await db.notes.note(item.id).readonly();
+    let current = db.notes.note(item.id).data.readonly;
+    if (useEditorStore.getState().currentEditingNote === item.id) {
+      useEditorStore.getState().setReadonly(current);
+      tiny.call(EditorWebView, tiny.toogleReadMode(current ? 'readonly' : 'design'));
+    }
+    Navigation.setRoutesToUpdate([
+      Navigation.routeNames.NotesPage,
+      Navigation.routeNames.Favorites,
+      Navigation.routeNames.Notes
+    ]);
+    close();
+  };
+
+  const actions = [
+    {
+      name: 'Add to notebook',
+      title: 'Add to notebook',
+      icon: 'book-outline',
+      func: addTo
+    },
+    {
+      name: 'Move notes',
+      title: 'Add notes',
+      icon: 'plus',
+      func: async () => {
+        close();
+        await sleep(300);
+        MoveNotes.present(db.notebooks.notebook(item.notebookId).data, item);
+      }
+    },
+
+    {
+      name: 'Pin',
+      title: item.pinned ? 'Unpin' : 'Pin to top',
+      icon: item.pinned ? 'pin-off-outline' : 'pin-outline',
+      func: pinItem,
+      close: false,
+      check: true,
+      on: item.pinned,
+      nopremium: true,
+      id: notesnook.ids.dialogs.actionsheet.pin
+    },
+    {
+      name: 'Favorite',
+      title: !item.favorite ? 'Favorite' : 'Unfavorite',
+      icon: item.favorite ? 'star-off' : 'star-outline',
+      func: addToFavorites,
+      close: false,
+      check: true,
+      on: item.favorite,
+      nopremium: true,
+      id: notesnook.ids.dialogs.actionsheet.favorite,
+      color: 'orange'
+    },
+    {
+      name: 'PinToNotif',
+      title: notifPinned !== null ? 'Unpin from Notifications' : 'Pin to Notifications',
+      icon: 'bell',
+      on: notifPinned !== null,
+      func: pinToNotifications
+    },
+
+    {
+      name: 'Edit Notebook',
+      title: 'Edit notebook',
+      icon: 'square-edit-outline',
+      func: async () => {
+        close();
+        await sleep(300);
+        eSendEvent(eOpenAddNotebookDialog, item);
+      }
+    },
+    {
+      name: 'Edit Topic',
+      title: 'Edit topic',
+      icon: 'square-edit-outline',
+      func: async () => {
+        close();
+        await sleep(300);
+        eSendEvent(eOpenAddTopicDialog, {
+          notebookId: item.notebookId,
+          toEdit: item
+        });
+      }
+    },
+    {
+      name: 'Copy',
+      title: 'Copy',
+      icon: 'content-copy',
+      func: copyContent
+    },
+    {
+      name: 'Restore',
+      title: 'Restore ' + item.itemType,
+      icon: 'delete-restore',
+      func: restoreTrashItem
+    },
+
+    {
+      name: 'Publish',
+      title: isPublished ? 'Published' : 'Publish',
+      icon: 'cloud-upload-outline',
+      on: isPublished,
+      func: publishNote
+    },
+    {
+      name: 'Vault',
+      title: item.locked ? 'Remove from vault' : 'Add to vault',
+      icon: item.locked ? 'shield-off-outline' : 'shield-outline',
+      func: addToVault,
+      on: item.locked
+    },
+
+    {
+      name: 'Add Shortcut',
+      title: isPinnedToMenu ? 'Remove Shortcut' : 'Add Shortcut',
+      icon: isPinnedToMenu ? 'link-variant-remove' : 'link-variant',
+      func: createMenuShortcut,
+      close: false,
+      check: true,
+      on: isPinnedToMenu,
+      nopremium: true,
+      id: notesnook.ids.dialogs.actionsheet.pinMenu
+    },
+    {
+      name: 'Rename Tag',
+      title: 'Rename tag',
+      icon: 'square-edit-outline',
+      func: renameTag
+    },
+    {
+      name: 'Share',
+      title: 'Share',
+      icon: 'share-variant',
+      func: shareNote
+    },
+    {
+      name: 'Attachments',
+      title: 'Attachments',
+      icon: 'attachment',
+      func: showAttachments
+    },
+    {
+      name: 'Export',
+      title: 'Export',
+      icon: 'export',
+      func: exportNote
+    },
+    {
+      name: 'RemoveTopic',
+      title: 'Remove from topic',
+      hidden: !noteInTopic,
+      icon: 'minus-circle-outline',
+      func: removeNoteFromTopic
+    },
+    {
+      name: 'Delete',
+      title:
+        item.type !== 'notebook' && item.type !== 'note' ? 'Delete ' + item.type : 'Move to trash',
+      icon: 'delete-outline',
+      type: 'error',
+      func: deleteItem
+    },
+    {
+      name: 'PermDelete',
+      title: 'Delete ' + item.itemType,
+      icon: 'delete',
+      func: deleteTrashItem
+    },
+    {
+      name: 'ReadOnly',
+      title: 'Read only',
+      icon: 'pencil-lock',
+      func: toggleReadyOnlyMode,
+      on: item.readonly
+    },
+    {
+      name: 'History',
+      title: 'History',
+      icon: 'history',
+      func: openHistory
+    },
+    {
+      name: 'Dark Mode',
+      title: 'Dark mode',
+      icon: 'theme-light-dark',
+      func: switchTheme,
+      switch: true,
+      on: colors.night ? true : false,
+      close: false,
+      nopremium: true,
+      id: notesnook.ids.dialogs.actionsheet.night
+    }
+  ];
+
+  return actions;
+};
diff --git a/apps/mobile/src/utils/useAppEvents.js b/apps/mobile/src/utils/hooks/useAppEvents.js
similarity index 93%
rename from apps/mobile/src/utils/useAppEvents.js
rename to apps/mobile/src/utils/hooks/useAppEvents.js
index c0a37610d..b300f89c3 100644
--- a/apps/mobile/src/utils/useAppEvents.js
+++ b/apps/mobile/src/utils/hooks/useAppEvents.js
@@ -1,21 +1,18 @@
 import NetInfo from '@react-native-community/netinfo';
 import { EV, EVENTS } from 'notes-core/common';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   Appearance,
   AppState,
   Linking,
   NativeEventEmitter,
   NativeModules,
-  Platform,
-  View
+  Platform
 } from 'react-native';
-import RNExitApp from 'react-native-exit-app';
 import * as RNIap from 'react-native-iap';
 import { enabled } from 'react-native-privacy-snapshot';
-import { doInBackground, editing } from '.';
-import { ProFeatures } from '../components/ResultDialog/pro-features';
-import { Walkthrough } from '../components/Walkthrough';
+import { doInBackground, editing } from '..';
+import { Walkthrough } from '../../components/walkthroughs';
 import {
   clearAllStores,
   initialize,
@@ -23,39 +20,38 @@ import {
   useNoteStore,
   useSettingStore,
   useUserStore
-} from '../provider/stores';
-import Backup from '../services/Backup';
-import BiometricService from '../services/BiometricService';
+} from '../../provider/stores';
+import Backup from '../../services/Backup';
+import BiometricService from '../../services/BiometricService';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
   presentSheet,
   ToastEvent
-} from '../services/EventManager';
+} from '../../services/EventManager';
 import {
   clearMessage,
   setEmailVerifyMessage,
   setLoginMessage,
   setRecoveryKeyMessage
-} from '../services/Message';
-import Navigation from '../services/Navigation';
-import PremiumService from '../services/PremiumService';
-import SettingsService from '../services/SettingsService';
-import Sync from '../services/Sync';
+} from '../../services/Message';
+import PremiumService from '../../services/PremiumService';
+import SettingsService from '../../services/SettingsService';
+import Sync from '../../services/Sync';
 import {
   EditorWebView,
   getNote,
   getWebviewInit,
   updateNoteInEditor
-} from '../views/Editor/Functions';
-import tiny from '../views/Editor/tiny/tiny';
-import { updateStatusBarColor } from './Colors';
-import { db } from './database';
-import { eClearEditor, eCloseProgressDialog, eOpenLoginDialog, refreshNotesPage } from './Events';
-import { MMKV } from './mmkv';
-import Storage from './storage';
-import { sleep } from './TimeUtils';
+} from '../../views/Editor/Functions';
+import tiny from '../../views/Editor/tiny/tiny';
+import { updateStatusBarColor } from '../color-scheme';
+import { db } from '../database';
+import { eClearEditor, eCloseProgressDialog, eOpenLoginDialog, refreshNotesPage } from '../events';
+import { MMKV } from '../database/mmkv';
+import Storage from '../database/storage';
+import { sleep } from '../time';
 
 const SodiumEventEmitter = new NativeEventEmitter(NativeModules.Sodium);
 
diff --git a/apps/mobile/src/views/Editor/useEditorTags.js b/apps/mobile/src/utils/hooks/useEditorTags.ts
similarity index 73%
rename from apps/mobile/src/views/Editor/useEditorTags.js
rename to apps/mobile/src/utils/hooks/useEditorTags.ts
index e263b726d..5cc10922a 100644
--- a/apps/mobile/src/views/Editor/useEditorTags.js
+++ b/apps/mobile/src/utils/hooks/useEditorTags.ts
@@ -1,14 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useEditorStore, useTagStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { db } from '../../utils/database';
-import { EditorWebView } from './Functions';
-import tiny from './tiny/tiny';
+import { db } from '../database';
+import { EditorWebView } from '../../views/Editor/Functions';
+import tiny from '../../views/Editor/tiny/tiny';
 
-export const useEditorTags = () => {
+/**
+ * A hook that injects/removes tags from tags bar in editor
+ */
+const useEditorTags = () => {
   const currentEditingNote = useEditorStore(state => state.currentEditingNote);
   const tags = useTagStore(state => state.tags);
-  const [note, setNote] = useState(null);
+  const [note, setNote] = useState<any>(null);
   const [noteTags, setNoteTags] = useState([]);
 
   async function refreshNote() {
@@ -18,7 +21,7 @@ export const useEditorTags = () => {
       setNoteTags([]);
       return;
     }
-    let note = db.notes.note(current)?.data;
+    let note = db.notes?.note(current)?.data;
     setNote(note ? { ...note } : null);
     getTags(note);
   }
@@ -39,11 +42,11 @@ export const useEditorTags = () => {
     };
   }, [noteTags]);
 
-  function getTags(note) {
+  function getTags(note: any) {
     if (!note || !note.tags) return [];
     let tags = note.tags
-      .map(t => (db.tags.tag(t) ? { ...db.tags.tag(t) } : null))
-      .filter(t => t !== null);
+      .map((t: any) => (db.tags?.tag(t) ? { ...db.tags.tag(t) } : null))
+      .filter((t: any) => t !== null);
     setNoteTags(tags);
   }
 
@@ -58,7 +61,7 @@ export const useEditorTags = () => {
   //   toggleNode(".tag-bar-parent","show");
   //   clearNode(".tag-bar")`;
   // const clearNode = `clearNode(".tag-bar")`;
-  const renderTags = tags => `(function() {
+  const renderTags = (tags: any) => `(function() {
       clearNode(".tag-bar");
       toggleNode(".tag-bar-parent","show")
       let items = ${JSON.stringify(tags)};
@@ -67,3 +70,5 @@ export const useEditorTags = () => {
 
   return [];
 };
+
+export default useEditorTags;
diff --git a/apps/mobile/src/utils/hooks/useIsFloatingKeyboard.ts b/apps/mobile/src/utils/hooks/useIsFloatingKeyboard.ts
new file mode 100644
index 000000000..c429fcdfd
--- /dev/null
+++ b/apps/mobile/src/utils/hooks/useIsFloatingKeyboard.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, KeyboardEvent, useWindowDimensions } from 'react-native';
+
+/**
+ * A hook that detects floating keyboard on iPad
+ * @returns Is keyboard floating or not
+ */
+const useIsFloatingKeyboard = () => {
+  const { width } = useWindowDimensions();
+
+  const [floating, setFloating] = useState<boolean>(false);
+
+  const onKeyboardWillChangeFrame = (event: KeyboardEvent) => {
+    setFloating(event.endCoordinates.width !== width);
+  };
+
+  useEffect(() => {
+    let sub1 = Keyboard.addListener('keyboardWillChangeFrame', onKeyboardWillChangeFrame);
+    return () => {
+      sub1?.remove();
+    };
+  }, [width]);
+
+  return floating;
+};
+
+export default useIsFloatingKeyboard;
diff --git a/apps/mobile/src/utils/useKeyboard.ts b/apps/mobile/src/utils/hooks/useKeyboard.ts
similarity index 97%
rename from apps/mobile/src/utils/useKeyboard.ts
rename to apps/mobile/src/utils/hooks/useKeyboard.ts
index 87a6f36c0..4cdf3bdb3 100644
--- a/apps/mobile/src/utils/useKeyboard.ts
+++ b/apps/mobile/src/utils/hooks/useKeyboard.ts
@@ -12,7 +12,7 @@ const initialValue = {
   end: emptyCoordinates
 };
 
-export function useKeyboard() {
+export default function useKeyboard() {
   const [shown, setShown] = useState(false);
   const [coordinates, setCoordinates] = useState<{
     start: undefined | ScreenRect;
diff --git a/apps/mobile/src/utils/useRotator.ts b/apps/mobile/src/utils/hooks/useRotator.ts
similarity index 81%
rename from apps/mobile/src/utils/useRotator.ts
rename to apps/mobile/src/utils/hooks/useRotator.ts
index ac9b715fa..d793cc3ff 100644
--- a/apps/mobile/src/utils/useRotator.ts
+++ b/apps/mobile/src/utils/hooks/useRotator.ts
@@ -1,5 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 
+/**
+ * A hook that can be used to rotate values in an array.
+ * It will return random item in an array after given interval
+ */
 function useRotator<T>(data: T[], interval = 3000): T | null {
   if (!Array.isArray(data)) return null;
   //@ts-ignore
diff --git a/apps/mobile/src/utils/useTooltip.ts b/apps/mobile/src/utils/hooks/useTooltip.ts
similarity index 82%
rename from apps/mobile/src/utils/useTooltip.ts
rename to apps/mobile/src/utils/hooks/useTooltip.ts
index 9e0e8d6ca..723bda803 100644
--- a/apps/mobile/src/utils/useTooltip.ts
+++ b/apps/mobile/src/utils/hooks/useTooltip.ts
@@ -2,14 +2,17 @@ import { RefObject, useEffect, useRef } from 'react';
 import { Platform } from 'react-native';
 //@ts-ignore
 import RNTooltips from 'react-native-tooltips';
-import { useTracked } from '../provider';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../services/EventManager';
-import { Popup, TipManager } from '../services/tip-manager';
-import { useKeyboard } from './use-keyboard';
+import { useTracked } from '../../provider';
+import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import { Popup } from '../../services/tip-manager';
+import useKeyboard from './use-keyboard';
 
 let currentTargets: number[] = [];
 let timers: NodeJS.Timeout[] = [];
 
+/**
+ * A function to hide all native tooltips
+ */
 export const hideAllTooltips = async () => {
   timers.forEach(t => t && clearTimeout(t));
   for (let target of currentTargets) {
@@ -22,6 +25,10 @@ export const hideAllTooltips = async () => {
   currentTargets = [];
 };
 
+/**
+ * A hook that is used to show/hide tooltips on render
+ * @returns
+ */
 const useTooltip = () => {
   const [state] = useTracked();
   const { colors } = state;
@@ -70,6 +77,9 @@ const useTooltip = () => {
 
 type TTooltipIdentifiers = 'sectionheader' | 'searchreplace' | 'notebookshortcut';
 
+/**
+ * A hook that helps in listening to tooltip show/hide requests and respond.
+ */
 export const useTooltipHandler = (id: TTooltipIdentifiers, callback: () => void) => {
   useEffect(() => {
     if (!id) return;
@@ -81,6 +91,10 @@ export const useTooltipHandler = (id: TTooltipIdentifiers, callback: () => void)
   return null;
 };
 
+/**
+ * A function to present a tooltip from anywhere in the app.
+ * @param id
+ */
 useTooltip.present = (id: TTooltipIdentifiers) => {
   eSendEvent(id);
 };
diff --git a/apps/mobile/src/utils/index.js b/apps/mobile/src/utils/index.js
index d25b0181f..29ad46802 100755
--- a/apps/mobile/src/utils/index.js
+++ b/apps/mobile/src/utils/index.js
@@ -1,72 +1,19 @@
-import { createRef } from 'react';
 import { Dimensions, NativeModules, Platform } from 'react-native';
 import BackgroundService from 'react-native-background-actions';
 import { beginBackgroundTask, endBackgroundTask } from 'react-native-begin-background-task';
 import RNTooltips from 'react-native-tooltips';
-import { useSettingStore } from '../provider/stores';
-import { eSendEvent } from '../services/EventManager';
-import Navigation from '../services/Navigation';
-import * as ackeeTracker from './ackee';
+import { bgTaskOptions } from './constants';
 import { db } from './database';
-import { refreshNotesPage } from './Events';
-import { MMKV } from './mmkv';
-import { tabBarRef } from './Refs';
+import { tabBarRef } from './global-refs';
 
-export const Tracker = ackeeTracker.create('https://sa.streetwriters.co', {
-  ignoreLocalhost: true
-});
+let prevTarget = null;
+let htmlToText;
 
-export const STORE_LINK =
-  Platform.OS === 'ios'
-    ? 'https://apps.apple.com/us/app/notesnook/id1544027013'
-    : 'https://play.google.com/store/apps/details?id=com.streetwriters.notesnook';
-
-const imgNames = [
-  'favorites',
-  'notes',
-  'notebooks',
-  'tags',
-  'trash',
-  'login',
-  'welcome',
-  'vault',
-  'accent',
-  'settings',
-  'backup',
-  'community',
-  'export',
-  'organize',
-  'privacy',
-  'sync',
-  'richtext'
-];
-
-export const updateList = items => {
-  eSendEvent('onListUpdate', items);
-};
-
-export const InteractionManager = {
-  runAfterInteractions: (func, time = 300) => setTimeout(func, time)
-};
-
-export async function setSetting(settings, name, value) {
-  let s = { ...settings };
-  s[name] = value;
-  await MMKV.setStringAsync('appSettings', JSON.stringify(s));
-  useSettingStore.getState().setSettings(s);
-}
-
-export const scrollRef = createRef();
-export const AndroidModule = NativeModules.NNativeModule;
-
-export const getElevation = elevation => {
-  return {
-    elevation,
-    shadowColor: 'black',
-    shadowOffset: { width: 0.3 * elevation, height: 0.5 * elevation },
-    shadowOpacity: 0.2,
-    shadowRadius: 0.7 * elevation
-  };
+export const TOOLTIP_POSITIONS = {
+  LEFT: 1,
+  RIGHT: 2,
+  TOP: 3,
+  BOTTOM: 4
 };
 
 export const sortSettings = {
@@ -77,20 +24,6 @@ export const sortSettings = {
   sortOrder: 'desc'
 };
 
-export const GROUP = {
-  default: 'default',
-  abc: 'abc',
-  year: 'year',
-  week: 'week',
-  month: 'month'
-};
-
-export const SORT = {
-  dateEdited: 'Date edited',
-  dateCreated: 'Date created'
-  //title:"Title",
-};
-
 export const editing = {
   currentlyEditing: false,
   isFullscreen: false,
@@ -114,18 +47,25 @@ export const history = {
   selectionMode: false
 };
 
-export const bgTaskOptions = {
-  taskName: 'notesnookSync',
-  taskTitle: 'Notesnook Sync',
-  taskDesc: 'Syncing your notes.',
-  taskIcon: {
-    name: 'ic_stat_name',
-    type: 'drawable'
-  },
-  color: '#ffffff',
-  linkingURI: 'com.streetwriters.notesnook://launch'
+export const AndroidModule = NativeModules.NNativeModule;
+
+export let dWidth = Dimensions.get('window').width;
+export let dHeight = Dimensions.get('window').height;
+
+export const InteractionManager = {
+  runAfterInteractions: (func, time = 300) => setTimeout(func, time)
 };
 
+export function getElevation(elevation) {
+  return {
+    elevation,
+    shadowColor: 'black',
+    shadowOffset: { width: 0.3 * elevation, height: 0.5 * elevation },
+    shadowOpacity: 0.2,
+    shadowRadius: 0.7 * elevation
+  };
+}
+
 export async function doInBackground(cb) {
   if (Platform.OS === 'ios') {
     let bgTaskId;
@@ -153,9 +93,6 @@ export async function doInBackground(cb) {
   }
 }
 
-export let dWidth = Dimensions.get('window').width;
-export let dHeight = Dimensions.get('window').height;
-
 export function setWidthHeight(size) {
   dWidth = size.width;
   dHeight = size.height;
@@ -171,168 +108,6 @@ export function getTotalNotes(notebook) {
   }, 0);
 }
 
-export const itemSkus = [
-  'com.streetwriters.notesnook.sub.mo',
-  'com.streetwriters.notesnook.sub.yr',
-  'com.streetwriters.notesnook.sub.yr.15',
-  'com.streetwriters.notesnook.sub.mo.15',
-  'com.streetwriters.notesnook.sub.mo.ofr',
-  'com.streetwriters.notesnook.sub.yr.trialoffer',
-  'com.streetwriters.notesnook.sub.mo.trialoffer'
-];
-
-export const MenuItemsList = [
-  {
-    name: 'Notes',
-    icon: 'home-variant-outline',
-    close: true
-  },
-  {
-    name: 'Notebooks',
-    icon: 'book-outline',
-    close: true
-  },
-  {
-    name: 'Favorites',
-    icon: 'star-outline',
-    close: true
-  },
-  {
-    name: 'Tags',
-    icon: 'pound',
-    close: true
-  },
-  {
-    name: 'Monographs',
-    icon: 'text-box-multiple-outline',
-    close: true,
-    func: () => {
-      let params = {
-        type: 'notes',
-        menu: true,
-        get: 'monographs',
-        title: 'Monographs',
-        id: 'monographs_navigation'
-      };
-
-      eSendEvent(refreshNotesPage, params);
-      Navigation.navigate('NotesPage', params, {
-        heading: 'Monographs',
-        id: 'monographs_navigation',
-        type: 'notes'
-      });
-    }
-  },
-  {
-    name: 'Trash',
-    icon: 'delete-outline',
-    close: true
-  }
-];
-
-export const SUBSCRIPTION_STATUS = {
-  BASIC: 0,
-  TRIAL: 1,
-  BETA: 2,
-  PREMIUM: 5,
-  PREMIUM_EXPIRED: 6,
-  PREMIUM_CANCELLED: 7
-};
-
-export const SUBSCRIPTION_STATUS_STRINGS = {
-  0: 'Basic',
-  1: 'Trial',
-  2: Platform.OS === 'ios' ? 'Pro' : 'Beta',
-  5: 'Pro',
-  6: 'Expired',
-  7: 'Pro'
-};
-
-export const SUBSCRIPTION_PROVIDER = {
-  0: null,
-  1: {
-    type: 'iOS',
-    title: 'Subscribed on iOS',
-    desc: 'You subscribed to Notesnook Pro on iOS using Apple In App Purchase. You can cancel anytime with your iTunes Account settings.',
-    icon: 'ios'
-  },
-  2: {
-    type: 'Android',
-    title: 'Subscribed on Android',
-    desc: 'You subscribed to Notesnook Pro on Android Phone/Tablet using Google In App Purchase.',
-    icon: 'android'
-  },
-  3: {
-    type: 'Web',
-    title: 'Subscribed on Web',
-    desc: 'You subscribed to Notesnook Pro on the Web/Desktop App.',
-    icon: 'web'
-  }
-};
-
-export const BUTTON_TYPES = {
-  transparent: {
-    primary: 'transparent',
-    text: 'accent',
-    selected: 'nav'
-  },
-  gray: {
-    primary: 'transparent',
-    text: 'icon',
-    selected: 'transGray'
-  },
-  grayBg: {
-    primary: 'nav',
-    text: 'icon',
-    selected: 'nav'
-  },
-  grayAccent: {
-    primary: 'nav',
-    text: 'accent',
-    selected: 'nav'
-  },
-  accent: (themeColor, text) => ({
-    primary: themeColor,
-    text: text,
-    selected: themeColor
-  }),
-  inverted: {
-    primary: 'bg',
-    text: 'accent',
-    selected: 'bg'
-  },
-  white: {
-    primary: 'transparent',
-    text: 'light',
-    selected: 'transGray'
-  },
-  shade: {
-    primary: 'shade',
-    text: 'accent',
-    selected: 'accent',
-    opacity: 0.12
-  },
-  error: {
-    primary: 'red',
-    text: 'red',
-    selected: 'red',
-    opacity: 0.12
-  },
-  errorShade: {
-    primary: 'transparent',
-    text: 'red',
-    selected: 'red',
-    opacity: 0.12
-  },
-  warn: {
-    primary: 'warningBg',
-    text: 'warningText',
-    selected: 'warningBg',
-    opacity: 0.12
-  }
-};
-
-let htmlToText;
 export async function toTXT(note, notitle) {
   let text;
   if (note.locked) {
@@ -350,13 +125,6 @@ export async function toTXT(note, notitle) {
   return text;
 }
 
-export const TOOLTIP_POSITIONS = {
-  LEFT: 1,
-  RIGHT: 2,
-  TOP: 3,
-  BOTTOM: 4
-};
-let prevTarget = null;
 export function showTooltip(event, text, position = 2) {
   if (!event._targetInst?.ref?.current) return;
   prevTarget && RNTooltips.Dismiss(prevTarget);
@@ -373,23 +141,3 @@ export function showTooltip(event, text, position = 2) {
     clickToHide: true
   });
 }
-
-let appIsInitialized = false;
-
-export function setAppIsInitialized(value) {
-  appIsInitialized = value;
-}
-
-export function getAppIsIntialized() {
-  return appIsInitialized;
-}
-
-let intentOnAppLoadProcessed = false;
-
-export function setIntentOnAppLoadProcessed(value) {
-  intentOnAppLoadProcessed = value;
-}
-
-export function getIntentOnAppLoadProcessed() {
-  return intentOnAppLoadProcessed;
-}
diff --git a/apps/mobile/src/utils/layoutmanager.js b/apps/mobile/src/utils/layoutmanager.js
index 00ed9dfd8..b98a41bbe 100644
--- a/apps/mobile/src/utils/layoutmanager.js
+++ b/apps/mobile/src/utils/layoutmanager.js
@@ -1,43 +1,9 @@
-const { LayoutAnimation } = require('react-native');
-
 function withAnimation(duration = 300) {
   return;
-  // try {
-  //   throw new Error('error withAnimation')
-  // } catch(e) {
-  //   console.log(e.stack);
-  // }
-  // console.log('reduce withAnimation: ', SettingsService.get().reduceAnimations);
-  // if (SettingsService.get().reduceAnimations) return;
-  // LayoutAnimation.configureNext(LayoutAnimation.create(duration, 'linear', 'opacity'));
 }
 
 function withSpringAnimation(duration = 300) {
-  // try {
-  //   throw new Error('error withSpringAnimation')
-  // } catch(e) {
-  //   console.log(e.stack);
-  // }
   return;
-  // console.log('reduce withSpringAnimation: ', SettingsService.get().reduceAnimations);
-  // if (SettingsService.get().reduceAnimations) return;
-  // LayoutAnimation.configureNext({
-  //   duration: duration,
-  //   create: {
-  //     type: LayoutAnimation.Types.linear,
-  //     property: LayoutAnimation.Properties.opacity,
-  //     duration: duration / 2
-  //   },
-  //   update: {
-  //     type: LayoutAnimation.Types.spring,
-  //     springDamping: 0.8
-  //   },
-  //   delete: {
-  //     type: LayoutAnimation.Types.easeOut,
-  //     property: LayoutAnimation.Properties.opacity,
-  //     duration: duration / 2
-  //   }
-  // });
 }
 
 export default {
diff --git a/apps/mobile/src/utils/filename.js b/apps/mobile/src/utils/sanitizer/index.js
similarity index 100%
rename from apps/mobile/src/utils/filename.js
rename to apps/mobile/src/utils/sanitizer/index.js
diff --git a/apps/mobile/src/utils/SizeUtils.js b/apps/mobile/src/utils/size/index.js
similarity index 98%
rename from apps/mobile/src/utils/SizeUtils.js
rename to apps/mobile/src/utils/size/index.js
index ca3a23a94..da0f22db5 100644
--- a/apps/mobile/src/utils/SizeUtils.js
+++ b/apps/mobile/src/utils/size/index.js
@@ -1,5 +1,5 @@
 import { Dimensions, PixelRatio, Platform } from 'react-native';
-import { DDS } from '../services/DeviceDetection';
+import { DDS } from '../../services/DeviceDetection';
 
 export const scale = {
   fontScale: 1
diff --git a/apps/mobile/src/utils/EvenSourceIos.js b/apps/mobile/src/utils/sse/EvenSourceIos.js
similarity index 99%
rename from apps/mobile/src/utils/EvenSourceIos.js
rename to apps/mobile/src/utils/sse/EvenSourceIos.js
index 072457c65..37398fe49 100644
--- a/apps/mobile/src/utils/EvenSourceIos.js
+++ b/apps/mobile/src/utils/sse/EvenSourceIos.js
@@ -340,6 +340,8 @@ class EventSource extends (0, _eventTargetShim.default)(...EVENT_SOURCE_EVENTS)
       case 'retry':
         // Set a new reconnect interval value
         // But I don't like this.
+
+        // eslint-disable-next-line no-case-declarations
         const newRetryMs = parseInt(value, 10);
 
         if (!isNaN(newRetryMs)) {
diff --git a/apps/mobile/src/utils/EventSource.js b/apps/mobile/src/utils/sse/EventSource.js
similarity index 100%
rename from apps/mobile/src/utils/EventSource.js
rename to apps/mobile/src/utils/sse/EventSource.js
diff --git a/apps/mobile/src/utils/TimeUtils.js b/apps/mobile/src/utils/time/index.ts
similarity index 87%
rename from apps/mobile/src/utils/TimeUtils.js
rename to apps/mobile/src/utils/time/index.ts
index 7a0645090..48eff4669 100644
--- a/apps/mobile/src/utils/TimeUtils.js
+++ b/apps/mobile/src/utils/time/index.ts
@@ -1,7 +1,8 @@
-export const sleep = duration => new Promise(resolve => setTimeout(() => resolve(), duration));
+export const sleep = (duration: number) =>
+  new Promise(resolve => setTimeout(() => resolve(true), duration));
 
-export function timeSince(date) {
-  let seconds = Math.floor((new Date() - date) / 1000);
+export function timeSince(date: number) {
+  let seconds = Math.floor((Date.now() - date) / 1000);
   let interval = Math.floor(seconds / 31536000);
 
   if (interval > 0.9) {
@@ -33,7 +34,7 @@ export function timeSince(date) {
   return Math.floor(seconds) < 0 ? '0s ago' : Math.floor(seconds) + 's ago';
 }
 
-export const timeConverter = timestamp => {
+export const timeConverter = (timestamp: number) => {
   if (!timestamp) return;
   let d = new Date(timestamp), // Convert the passed timestamp to milliseconds
     yyyy = d.getFullYear(),
diff --git a/apps/mobile/src/utils/useAnnouncement.js b/apps/mobile/src/utils/useAnnouncement.js
deleted file mode 100644
index 7f90f7f24..000000000
--- a/apps/mobile/src/utils/useAnnouncement.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
-import { SUBSCRIPTION_STATUS } from '.';
-import PremiumService from '../services/PremiumService';
-import { db } from './database';
-import { MMKV } from './mmkv';
-
-var CACHED_ANNOUNCEMENT;
-export default function useAnnouncement() {
-  const [announcement, setAnnouncement] = useState(CACHED_ANNOUNCEMENT);
-
-  useEffect(() => {
-    (async function () {
-      try {
-        CACHED_ANNOUNCEMENT = CACHED_ANNOUNCEMENT || (await db.announcement());
-        if (
-          !CACHED_ANNOUNCEMENT ||
-          (await MMKV.getStringAsync('removedAnnouncement')) === CACHED_ANNOUNCEMENT.id ||
-          !shouldShowAnnouncement(CACHED_ANNOUNCEMENT)
-        ) {
-          CACHED_ANNOUNCEMENT = null;
-          return;
-        }
-        setAnnouncement(CACHED_ANNOUNCEMENT);
-      } catch (e) {
-        setAnnouncement(null);
-      }
-    })();
-  }, []);
-
-  const remove = useCallback(async () => {
-    await MMKV.setStringAsync('removedAnnouncement', CACHED_ANNOUNCEMENT.id);
-    CACHED_ANNOUNCEMENT = null;
-    setAnnouncement(null);
-  }, [announcement]);
-  return [announcement, remove];
-}
-
-const allowedPlatforms = ['all', 'mobile', Platform.OS];
-function shouldShowAnnouncement(announcement) {
-  let show = allowedPlatforms.indexOf(announcement.platform) > -1;
-  console.log(show);
-  if (!show) return;
-
-  const subStatus = PremiumService.getUser()?.subscription?.type;
-
-  switch (announcement.userType) {
-    case 'pro':
-      show = PremiumService.get() && subStatus !== SUBSCRIPTION_STATUS.TRIAL;
-      break;
-    case 'trial':
-      show = subStatus === SUBSCRIPTION_STATUS.TRIAL;
-      break;
-    case 'trialExpired':
-      show = subStatus === SUBSCRIPTION_STATUS.BASIC;
-      break;
-    case 'loggedOut':
-      show = !PremiumService.getUser();
-      break;
-    case 'verified':
-      show = PremiumService.getUser()?.isEmailVerified;
-      break;
-    case 'loggedIn':
-      show = !!PremiumService.getUser();
-      break;
-    case 'unverified':
-      show = !PremiumService.getUser()?.isEmailVerified;
-      break;
-    case 'proExpired':
-      show =
-        subStatus === SUBSCRIPTION_STATUS.PREMIUM_EXPIRED ||
-        subStatus === SUBSCRIPTION_STATUS.PREMIUM_CANCELED;
-      break;
-    case 'any':
-    default:
-      break;
-  }
-
-  return show;
-}
diff --git a/apps/mobile/src/utils/useIsFloatingKeyboard.js b/apps/mobile/src/utils/useIsFloatingKeyboard.js
deleted file mode 100644
index 7c24c2861..000000000
--- a/apps/mobile/src/utils/useIsFloatingKeyboard.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Keyboard, Dimensions } from 'react-native';
-
-const useIsFloatingKeyboard = () => {
-  const windowWidth = Dimensions.get('window').width;
-
-  const [floating, setFloating] = useState(false);
-
-  useEffect(() => {
-    const onKeyboardWillChangeFrame = event => {
-      setFloating(event.endCoordinates.width !== windowWidth);
-    };
-
-    let sub1 = Keyboard.addListener('keyboardWillChangeFrame', onKeyboardWillChangeFrame);
-    return () => {
-      sub1?.remove();
-    };
-  }, [windowWidth]);
-
-  return floating;
-};
-
-export default useIsFloatingKeyboard;
diff --git a/apps/mobile/src/views/Editor/EditorHeader.js b/apps/mobile/src/views/Editor/EditorHeader.js
index 775463764..61984baaa 100644
--- a/apps/mobile/src/views/Editor/EditorHeader.js
+++ b/apps/mobile/src/views/Editor/EditorHeader.js
@@ -3,8 +3,8 @@ import React, { useEffect, useRef } from 'react';
 import { BackHandler, InteractionManager, Keyboard, Platform, Vibration, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { notesnook } from '../../../e2e/test.ids';
-import { ActionIcon } from '../../components/ActionIcon';
-import { Properties } from '../../components/Properties';
+import { IconButton } from '../../components/ui/icon-button';
+import { Properties } from '../../components/properties';
 import { useTracked } from '../../provider';
 import { useEditorStore, useSettingStore, useUserStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
@@ -15,7 +15,8 @@ import {
   ToastEvent
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { editing, SUBSCRIPTION_STATUS } from '../../utils';
+import { editing } from '../../utils';
+import { SUBSCRIPTION_STATUS } from '../../utils/constants';
 import { db } from '../../utils/database';
 import {
   eClearEditor,
@@ -25,24 +26,17 @@ import {
   eOpenLoginDialog,
   eOpenPremiumDialog,
   eOpenPublishNoteDialog
-} from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
-import umami from '../../utils/umami';
+} from '../../utils/events';
+import useEditorTags from '../../utils/hooks/useEditorTags';
+import { tabBarRef } from '../../utils/global-refs';
+import umami from '../../utils/analytics';
 import { EditorTitle } from './EditorTitle';
-import {
-  clearEditor,
-  clearTimer,
-  getNote,
-  loadNote,
-  setColors,
-  startClosingSession
-} from './Functions';
+import { clearEditor, getNote, loadNote, setColors, startClosingSession } from './Functions';
 import { ProgressCircle } from './ProgressCircle';
 import tiny, { safeKeyboardDismiss } from './tiny/tiny';
 import { endSearch } from './tiny/toolbar/commands';
 import { toolbarRef } from './tiny/toolbar/constants';
 import picker from './tiny/toolbar/picker';
-import { useEditorTags } from './useEditorTags';
 
 const EditorHeader = () => {
   const [state] = useTracked();
@@ -275,7 +269,7 @@ const EditorHeader = () => {
           }}
         >
           {deviceMode !== 'mobile' && !fullscreen ? null : (
-            <ActionIcon
+            <IconButton
               onLongPress={async () => {
                 await _onBackPress();
                 Navigation.popToTop();
@@ -305,7 +299,7 @@ const EditorHeader = () => {
             {!user ||
             user?.subscription.type === SUBSCRIPTION_STATUS.BASIC ||
             user?.subscription.type === SUBSCRIPTION_STATUS.TRIAL ? (
-              <ActionIcon
+              <IconButton
                 name="crown"
                 color={colors.yellow}
                 customStyle={{
@@ -322,7 +316,7 @@ const EditorHeader = () => {
                 }}
               />
             ) : null}
-            <ActionIcon
+            <IconButton
               name="magnify"
               color={searchReplace ? colors.accent : colors.pri}
               customStyle={{
@@ -343,7 +337,7 @@ const EditorHeader = () => {
             />
 
             {currentlyEditingNote && !readonly && (
-              <ActionIcon
+              <IconButton
                 name="cloud-upload-outline"
                 color={colors.pri}
                 customStyle={{
@@ -355,7 +349,7 @@ const EditorHeader = () => {
             )}
 
             {!readonly && (
-              <ActionIcon
+              <IconButton
                 name="attachment"
                 color={colors.pri}
                 customStyle={{
@@ -367,7 +361,7 @@ const EditorHeader = () => {
             )}
 
             {deviceMode !== 'mobile' && !fullscreen ? (
-              <ActionIcon
+              <IconButton
                 name="fullscreen"
                 color={colors.pri}
                 customStyle={{
@@ -381,7 +375,7 @@ const EditorHeader = () => {
               />
             ) : null}
 
-            <ActionIcon
+            <IconButton
               name="dots-horizontal"
               color={colors.pri}
               customStyle={{
diff --git a/apps/mobile/src/views/Editor/EditorOverlay.js b/apps/mobile/src/views/Editor/EditorOverlay.js
index 710e59add..0d1c25592 100644
--- a/apps/mobile/src/views/Editor/EditorOverlay.js
+++ b/apps/mobile/src/views/Editor/EditorOverlay.js
@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Animated, { Easing, timing, useValue } from 'react-native-reanimated';
-import { Button } from '../../components/Button';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
+import { Button } from '../../components/ui/button';
+import Heading from '../../components/ui/typography/heading';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { editing } from '../../utils';
-import { eOnLoadNote } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep, timeConverter } from '../../utils/TimeUtils';
+import { eOnLoadNote } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep, timeConverter } from '../../utils/time';
 
 let timer = null;
 let timerError = null;
diff --git a/apps/mobile/src/views/Editor/EditorSettings.js b/apps/mobile/src/views/Editor/EditorSettings.js
index 10eefab95..7bd2ae7bd 100644
--- a/apps/mobile/src/views/Editor/EditorSettings.js
+++ b/apps/mobile/src/views/Editor/EditorSettings.js
@@ -2,20 +2,20 @@ import React, { createRef, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import Menu, { MenuItem } from 'react-native-reanimated-material-menu';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import SheetWrapper from '../../components/Sheet';
-import { Button } from '../../components/Button';
-import BaseDialog from '../../components/Dialog/base-dialog';
-import DialogButtons from '../../components/Dialog/dialog-buttons';
-import DialogContainer from '../../components/Dialog/dialog-container';
-import DialogHeader from '../../components/Dialog/dialog-header';
-import Input from '../../components/Input';
-import { PressableButton } from '../../components/PressableButton';
-import Seperator from '../../components/Seperator';
-import Paragraph from '../../components/Typography/Paragraph';
+import SheetWrapper from '../../components/ui/sheet';
+import { Button } from '../../components/ui/button';
+import BaseDialog from '../../components/dialog/base-dialog';
+import DialogButtons from '../../components/dialog/dialog-buttons';
+import DialogContainer from '../../components/dialog/dialog-container';
+import DialogHeader from '../../components/dialog/dialog-header';
+import Input from '../../components/ui/input';
+import { PressableButton } from '../../components/ui/pressable';
+import Seperator from '../../components/ui/seperator';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { EditorWebView, getNote } from './Functions';
 import tiny from './tiny/tiny';
 import ToggleSwitch from 'toggle-switch-react-native';
diff --git a/apps/mobile/src/views/Editor/EditorTitle.js b/apps/mobile/src/views/Editor/EditorTitle.js
index 0768f68ed..6a802f414 100644
--- a/apps/mobile/src/views/Editor/EditorTitle.js
+++ b/apps/mobile/src/views/Editor/EditorTitle.js
@@ -3,8 +3,8 @@ import { TextInput } from 'react-native';
 import Animated, { Easing } from 'react-native-reanimated';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { post, _onMessage } from './Functions';
 
 const opacityVal = new Animated.Value(0);
diff --git a/apps/mobile/src/views/Editor/EditorWrapper.js b/apps/mobile/src/views/Editor/EditorWrapper.js
index 0e208b316..a7ad303ec 100644
--- a/apps/mobile/src/views/Editor/EditorWrapper.js
+++ b/apps/mobile/src/views/Editor/EditorWrapper.js
@@ -9,13 +9,13 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Editor from '.';
-import { PremiumToast } from '../../components/Premium/premium-toast';
+import { PremiumToast } from '../../components/premium/premium-toast';
 import { useTracked } from '../../provider';
 import { useNoteStore, useSettingStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { editing } from '../../utils';
-import { editorRef } from '../../utils/Refs';
-import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
+import { editorRef } from '../../utils/global-refs';
+import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
 import EditorOverlay from './EditorOverlay';
 import { checkStatus, textInput } from './Functions';
 
diff --git a/apps/mobile/src/views/Editor/Functions.js b/apps/mobile/src/views/Editor/Functions.js
index 4b7ee8c9d..17d688b59 100644
--- a/apps/mobile/src/views/Editor/Functions.js
+++ b/apps/mobile/src/views/Editor/Functions.js
@@ -1,6 +1,6 @@
 import { createRef } from 'react';
 import { Platform } from 'react-native';
-import { presentDialog } from '../../components/Dialog/functions';
+import { presentDialog } from '../../components/dialog/functions';
 import { useEditorStore, useMenuStore, useTagStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import {
@@ -13,8 +13,8 @@ import Navigation from '../../services/Navigation';
 import PremiumService from '../../services/PremiumService';
 import { TipManager } from '../../services/tip-manager';
 import { editing } from '../../utils';
-import { COLORS_NOTE, COLOR_SCHEME } from '../../utils/Colors';
-import { hexToRGBA } from '../../utils/ColorUtils';
+import { COLORS_NOTE, COLOR_SCHEME } from '../../utils/color-scheme';
+import { hexToRGBA } from '../../utils/color-scheme/utils';
 import { db } from '../../utils/database';
 import {
   eClearEditor,
@@ -22,14 +22,14 @@ import {
   eOpenTagsDialog,
   eShowGetPremium,
   eShowMergeDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import filesystem from '../../utils/filesystem';
 import { openLinkInBrowser } from '../../utils/functions';
-import { MMKV } from '../../utils/mmkv';
-import { tabBarRef } from '../../utils/Refs';
-import { normalize } from '../../utils/SizeUtils';
-import { sleep, timeConverter } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
+import { MMKV } from '../../utils/database/mmkv';
+import { tabBarRef } from '../../utils/global-refs';
+import { normalize } from '../../utils/size';
+import { sleep, timeConverter } from '../../utils/time';
+import umami from '../../utils/analytics';
 import { TableCellProperties } from './TableCellProperties';
 import { TableRowProperties } from './TableRowProperties';
 import tiny from './tiny/tiny';
diff --git a/apps/mobile/src/views/Editor/HistoryComponent.js b/apps/mobile/src/views/Editor/HistoryComponent.js
index b400b39a0..b5ff81572 100644
--- a/apps/mobile/src/views/Editor/HistoryComponent.js
+++ b/apps/mobile/src/views/Editor/HistoryComponent.js
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, View } from 'react-native';
-import { ActionIcon } from '../../components/ActionIcon';
+import { IconButton } from '../../components/ui/icon-button';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { editing } from '../../utils';
-import { SIZE } from '../../utils/SizeUtils';
-import { useKeyboard } from '../../utils/use-keyboard';
+import { SIZE } from '../../utils/size';
+import useKeyboard from '../../utils/hooks/use-keyboard';
 import { EditorWebView } from './Functions';
 import tiny, { safeKeyboardDismiss } from './tiny/tiny';
 
@@ -39,7 +39,7 @@ const HistoryComponent = () => {
       }}
     >
       {Platform.OS === 'ios' && keyboard.keyboardShown ? (
-        <ActionIcon
+        <IconButton
           name="keyboard-close"
           color={colors.pri}
           size={SIZE.lg}
@@ -54,7 +54,7 @@ const HistoryComponent = () => {
         />
       ) : null}
 
-      <ActionIcon
+      <IconButton
         name="undo-variant"
         disabled={!historyState.undo}
         color={colors.pri}
@@ -68,7 +68,7 @@ const HistoryComponent = () => {
           tiny.call(EditorWebView, tiny.undo);
         }}
       />
-      <ActionIcon
+      <IconButton
         name="redo-variant"
         disabled={!historyState.redo}
         color={colors.pri}
diff --git a/apps/mobile/src/views/Editor/ProgressCircle.js b/apps/mobile/src/views/Editor/ProgressCircle.js
index d814dab68..9032604c8 100644
--- a/apps/mobile/src/views/Editor/ProgressCircle.js
+++ b/apps/mobile/src/views/Editor/ProgressCircle.js
@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
 import { useTracked } from '../../provider';
 import { useAttachmentStore } from '../../provider/stores';
-import { SIZE } from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/size';
 
 export const ProgressCircle = () => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Editor/TableCellProperties.js b/apps/mobile/src/views/Editor/TableCellProperties.js
index 2d5c6c23b..6ee39041a 100644
--- a/apps/mobile/src/views/Editor/TableCellProperties.js
+++ b/apps/mobile/src/views/Editor/TableCellProperties.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
-import { ActionIcon } from '../../components/ActionIcon';
-import { Button } from '../../components/Button';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
+import { IconButton } from '../../components/ui/icon-button';
+import { Button } from '../../components/ui/button';
+import Heading from '../../components/ui/typography/heading';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import {
   eSendEvent,
@@ -13,7 +13,7 @@ import {
   presentSheet
 } from '../../services/EventManager';
 import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/size';
 import { EditorWebView } from './Functions';
 import tiny from './tiny/tiny';
 import ColorItem from './tiny/toolbar/coloritem';
@@ -122,7 +122,7 @@ export const TableCellProperties = ({ data }) => {
             flexDirection: 'row'
           }}
         >
-          <ActionIcon
+          <IconButton
             customStyle={{
               marginRight: 10
             }}
@@ -133,7 +133,7 @@ export const TableCellProperties = ({ data }) => {
             color={colors.accent}
           />
 
-          <ActionIcon
+          <IconButton
             onPress={decreaseWidth}
             type="grayBg"
             name="minus"
diff --git a/apps/mobile/src/views/Editor/TableRowProperties.js b/apps/mobile/src/views/Editor/TableRowProperties.js
index d98bf08fa..4805ef904 100644
--- a/apps/mobile/src/views/Editor/TableRowProperties.js
+++ b/apps/mobile/src/views/Editor/TableRowProperties.js
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
-import { Button } from '../../components/Button';
-import Heading from '../../components/Typography/Heading';
+import { Button } from '../../components/ui/button';
+import Heading from '../../components/ui/typography/heading';
 import { useTracked } from '../../provider';
 import {
   eSendEvent,
@@ -11,7 +11,7 @@ import {
   presentSheet
 } from '../../services/EventManager';
 import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/size';
 import { EditorWebView } from './Functions';
 import tiny from './tiny/tiny';
 import ColorItem from './tiny/toolbar/coloritem';
diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js
index dac2b3cb4..b191c93e6 100755
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -5,10 +5,10 @@ import { notesnook } from '../../../e2e/test.ids';
 import { useEditorStore, useUserStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { getCurrentColors } from '../../utils/Colors';
-import { eOnLoadNote } from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
-import { sleep } from '../../utils/TimeUtils';
+import { getCurrentColors } from '../../utils/color-scheme';
+import { eOnLoadNote } from '../../utils/events';
+import { tabBarRef } from '../../utils/global-refs';
+import { sleep } from '../../utils/time';
 import EditorHeader from './EditorHeader';
 import {
   disableEditing,
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/coloritem.js b/apps/mobile/src/views/Editor/tiny/toolbar/coloritem.js
index b29bd1251..56a75ceb4 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/coloritem.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/coloritem.js
@@ -3,10 +3,10 @@ import { View, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../../../provider';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../../../services/EventManager';
-import { normalize, SIZE } from '../../../../utils/SizeUtils';
+import { normalize, SIZE } from '../../../../utils/size';
 import { formatSelection, properties, rgbToHex } from './constants';
 import { execCommands } from './commands';
-import { MMKV } from '../../../../utils/mmkv';
+import { MMKV } from '../../../../utils/database/mmkv';
 
 const ColorItem = ({ value, format, onCustomPress, checked }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/constants.js b/apps/mobile/src/views/Editor/tiny/toolbar/constants.js
index e8242882e..f9a2585e7 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/constants.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/constants.js
@@ -2,7 +2,7 @@ import { createRef } from 'react';
 import { Platform } from 'react-native';
 import { eSendEvent } from '../../../../services/EventManager';
 import { editing } from '../../../../utils';
-import { sleep } from '../../../../utils/TimeUtils';
+import { sleep } from '../../../../utils/time';
 import { EditorWebView, textInput } from '../../Functions';
 import tiny from '../tiny';
 
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/index.js b/apps/mobile/src/views/Editor/tiny/toolbar/index.js
index 1f994fe62..83d558347 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/index.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/index.js
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { Platform, View, ScrollView } from 'react-native';
-import { ActionIcon } from '../../../../components/ActionIcon';
+import { IconButton } from '../../../../components/ui/icon-button';
 import { useTracked } from '../../../../provider';
 import { useEditorStore } from '../../../../provider/stores';
 import { getElevation } from '../../../../utils';
 import { db } from '../../../../utils/database';
-import { normalize } from '../../../../utils/SizeUtils';
+import { normalize } from '../../../../utils/size';
 import { EditorWebView, getNote, setNoteOnly } from '../../Functions';
 import HistoryComponent from '../../HistoryComponent';
 import tiny from '../tiny';
@@ -49,7 +49,7 @@ const EditorToolbar = React.memo(
           }}
         >
           {readonly ? (
-            <ActionIcon
+            <IconButton
               name="pencil-lock"
               type="grayBg"
               onPress={onPress}
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/item.js b/apps/mobile/src/views/Editor/tiny/toolbar/item.js
index 9b5254b1f..64157e23e 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/item.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/item.js
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { PressableButton } from '../../../../components/PressableButton';
-import Heading from '../../../../components/Typography/Heading';
-import Paragraph from '../../../../components/Typography/Paragraph';
+import { PressableButton } from '../../../../components/ui/pressable';
+import Heading from '../../../../components/ui/typography/heading';
+import Paragraph from '../../../../components/ui/typography/paragraph';
 import { useTracked } from '../../../../provider';
 import { useUserStore } from '../../../../provider/stores';
 import {
@@ -16,9 +16,9 @@ import {
 import PremiumService from '../../../../services/PremiumService';
 import { editing, showTooltip, TOOLTIP_POSITIONS } from '../../../../utils';
 import { db } from '../../../../utils/database';
-import { MMKV } from '../../../../utils/mmkv';
-import { normalize, SIZE } from '../../../../utils/SizeUtils';
-import umami from '../../../../utils/umami';
+import { MMKV } from '../../../../utils/database/mmkv';
+import { normalize, SIZE } from '../../../../utils/size';
+import umami from '../../../../utils/analytics';
 import tiny, { safeKeyboardDismiss } from '../tiny';
 import { execCommands } from './commands';
 import {
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/itempin.js b/apps/mobile/src/views/Editor/tiny/toolbar/itempin.js
index bb8cd4e8f..17bedf940 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/itempin.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/itempin.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Animated, { Easing, timing, useValue } from 'react-native-reanimated';
 import { useTracked } from '../../../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../../../services/EventManager';
-import { sleep } from '../../../../utils/TimeUtils';
+import { sleep } from '../../../../utils/time';
 
 const ToolbarItemPin = ({ format, color }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/linkinput.js b/apps/mobile/src/views/Editor/tiny/toolbar/linkinput.js
index a79f469d3..ea2d53ecc 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/linkinput.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/linkinput.js
@@ -3,12 +3,12 @@ import { View } from 'react-native';
 import isEmail from 'validator/lib/isEmail';
 import isMobilePhone from 'validator/lib/isMobilePhone';
 import isURL from 'validator/lib/isURL';
-import { Button } from '../../../../components/Button';
-import Input from '../../../../components/Input';
+import { Button } from '../../../../components/ui/button';
+import Input from '../../../../components/ui/input';
 import { useTracked } from '../../../../provider';
 import { eSendEvent, ToastEvent } from '../../../../services/EventManager';
 import { editing, itemSkus } from '../../../../utils';
-import { SIZE } from '../../../../utils/SizeUtils';
+import { SIZE } from '../../../../utils/size';
 import { EditorWebView } from '../../Functions';
 import tiny from '../tiny';
 import { execCommands } from './commands';
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js b/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js
index 23b00a35f..244fbe95f 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/linkpreview.js
@@ -2,12 +2,12 @@ import { getLinkPreview } from 'link-preview-js';
 import React, { useEffect, useState } from 'react';
 import { Image, Linking, ScrollView, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { ActionIcon } from '../../../../components/ActionIcon';
-import Heading from '../../../../components/Typography/Heading';
-import Paragraph from '../../../../components/Typography/Paragraph';
+import { IconButton } from '../../../../components/ui/icon-button';
+import Heading from '../../../../components/ui/typography/heading';
+import Paragraph from '../../../../components/ui/typography/paragraph';
 import { useTracked } from '../../../../provider';
 import { openLinkInBrowser } from '../../../../utils/functions';
-import { SIZE } from '../../../../utils/SizeUtils';
+import { SIZE } from '../../../../utils/size';
 import { INPUT_MODE, properties, reFocusEditor } from './constants';
 import isEmail from 'validator/lib/isEmail';
 import isURL from 'validator/lib/isURL';
@@ -178,7 +178,7 @@ const LinkPreview = ({ setMode, value, onSubmit }) => {
           alignItems: 'center'
         }}
       >
-        <ActionIcon
+        <IconButton
           onPress={() => {
             onSubmit('clear');
           }}
@@ -191,7 +191,7 @@ const LinkPreview = ({ setMode, value, onSubmit }) => {
           size={SIZE.xl}
           color={colors.pri}
         />
-        <ActionIcon
+        <IconButton
           onPress={async () => {
             properties.pauseSelectionChange = true;
             setMode(INPUT_MODE.EDITING);
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/listformat.js b/apps/mobile/src/views/Editor/tiny/toolbar/listformat.js
index 1d9c35d6c..aa5e599bf 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/listformat.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/listformat.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
-import Heading from '../../../../components/Typography/Heading';
+import Heading from '../../../../components/ui/typography/heading';
 import { useTracked } from '../../../../provider';
 
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Paragraph from '../../../../components/Typography/Paragraph';
+import Paragraph from '../../../../components/ui/typography/paragraph';
 const ToolbarListFormat = ({ selected, formatValue, format }) => {
   const [state] = useTracked();
   const { colors } = state;
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/picker.js b/apps/mobile/src/views/Editor/tiny/toolbar/picker.js
index 5f4fff653..dc984fc60 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/picker.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/picker.js
@@ -4,13 +4,13 @@ import DocumentPicker from 'react-native-document-picker';
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import Sodium from 'react-native-sodium';
 import RNFetchBlob from 'rn-fetch-blob';
-import { Attachment } from '../../../../components/AttachmentDialog';
+import { AttachmentItem } from '../../../../components/AttachmentDialog/attachment-item';
 import { eSendEvent, presentSheet, ToastEvent } from '../../../../services/EventManager';
 import PremiumService from '../../../../services/PremiumService';
 import { editing } from '../../../../utils';
 import { db } from '../../../../utils/database';
-import { eCloseProgressDialog } from '../../../../utils/Events';
-import { sleep } from '../../../../utils/TimeUtils';
+import { eCloseProgressDialog } from '../../../../utils/events';
+import { sleep } from '../../../../utils/time';
 import { EditorWebView, getNote } from '../../Functions';
 import tiny, { safeKeyboardDismiss } from '../tiny';
 
@@ -28,7 +28,7 @@ const showEncryptionSheet = file => {
           paddingHorizontal: 12
         }}
       >
-        <Attachment
+        <AttachmentItem
           attachment={{
             metadata: {
               filename: file.name
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/searchreplace.js b/apps/mobile/src/views/Editor/tiny/toolbar/searchreplace.js
index 586b8093f..bbc0b78cd 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/searchreplace.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/searchreplace.js
@@ -1,14 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { Button } from '../../../../components/Button';
-import Input from '../../../../components/Input';
+import { Button } from '../../../../components/ui/button';
+import Input from '../../../../components/ui/input';
 import { useTracked } from '../../../../provider';
 import { useEditorStore, useSettingStore } from '../../../../provider/stores';
-import { TipManager } from '../../../../services/tip-manager';
 import { showTooltip, TOOLTIP_POSITIONS } from '../../../../utils';
+import { hideAllTooltips } from '../../../../utils/hooks/use-tooltip';
 import layoutmanager from '../../../../utils/layout-manager';
-import { SIZE } from '../../../../utils/SizeUtils';
-import useTooltip, { hideAllTooltips, useTooltipHandler } from '../../../../utils/use-tooltip';
+import { SIZE } from '../../../../utils/size';
 import { EditorWebView, getNote } from '../../Functions';
 import tiny from '../tiny';
 import { endSearch } from './commands';
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/table.js b/apps/mobile/src/views/Editor/tiny/toolbar/table.js
index 7820276ea..cf9eb14ac 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/table.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/table.js
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { PressableButton } from '../../../../components/PressableButton';
-import Heading from '../../../../components/Typography/Heading';
-import Paragraph from '../../../../components/Typography/Paragraph';
+import { PressableButton } from '../../../../components/ui/pressable';
+import Heading from '../../../../components/ui/typography/heading';
+import Paragraph from '../../../../components/ui/typography/paragraph';
 import { useTracked } from '../../../../provider';
 import { eSendEvent } from '../../../../services/EventManager';
-import { eCloseProgressDialog } from '../../../../utils/Events';
-import { SIZE } from '../../../../utils/SizeUtils';
+import { eCloseProgressDialog } from '../../../../utils/events';
+import { SIZE } from '../../../../utils/size';
 import { execCommands } from './commands';
 import { formatSelection } from './constants';
 
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/tooltip.js b/apps/mobile/src/views/Editor/tiny/toolbar/tooltip.js
index 163531f34..6aec95cd6 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/tooltip.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/tooltip.js
@@ -4,7 +4,7 @@ import { useTracked } from '../../../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../../../services/EventManager';
 import { editing } from '../../../../utils';
 import layoutmanager from '../../../../utils/layout-manager';
-import { normalize } from '../../../../utils/SizeUtils';
+import { normalize } from '../../../../utils/size';
 import { EditorWebView } from '../../Functions';
 import tiny from '../tiny';
 import ColorGroup from './colorgroup';
diff --git a/apps/mobile/src/views/Favorites/index.js b/apps/mobile/src/views/Favorites/index.js
index 5aa64c040..e5898fa4a 100644
--- a/apps/mobile/src/views/Favorites/index.js
+++ b/apps/mobile/src/views/Favorites/index.js
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect } from 'react';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { Header } from '../../components/Header';
-import { Placeholder } from '../../components/ListPlaceholders';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { Header } from '../../components/header';
+import { Placeholder } from '../../components/ui/svg';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
 import { useFavoriteStore, useNoteStore } from '../../provider/stores';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
@@ -81,10 +81,10 @@ export const Favorites = ({ navigation }) => {
   return (
     <>
       <SelectionHeader screen="Favorites" />
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header title="Favorites" isBack={false} screen="Favorites" />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={favorites}
         type="notes"
         refreshCallback={() => {
@@ -102,7 +102,6 @@ export const Favorites = ({ navigation }) => {
           heading: 'Favorites'
         }}
         focused={() => navigation.isFocused()}
-        placeholder={<Placeholder type="favorites" />}
         placeholderText="Notes you favorite appear here"
       />
     </>
diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js
index 4d98c4a5a..5601eb4ea 100644
--- a/apps/mobile/src/views/Folders/index.js
+++ b/apps/mobile/src/views/Folders/index.js
@@ -1,12 +1,11 @@
 import React, { useCallback, useEffect } from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { AddNotebookEvent } from '../../components/DialogManager/recievers';
-import { Header } from '../../components/Header';
-import { MoveNotes } from '../../components/MoveNoteDialog/movenote';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
-import { Walkthrough } from '../../components/Walkthrough';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { FloatingButton } from '../../components/container/floating-button';
+import { AddNotebookEvent } from '../../components/dialog-provider/recievers';
+import { Header } from '../../components/header';
+import List from '../../components/list';
+import SelectionHeader from '../../components/selection-header';
+import { Walkthrough } from '../../components/walkthroughs';
 import { useNotebookStore } from '../../provider/stores';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
@@ -77,10 +76,10 @@ export const Folders = ({ navigation }) => {
   return (
     <>
       <SelectionHeader screen="Notebooks" />
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header title="Notebooks" isBack={false} screen="Notebooks" action={_onPressBottomButton} />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={notebooks}
         type="notebooks"
         screen="Notebooks"
@@ -98,7 +97,7 @@ export const Folders = ({ navigation }) => {
       />
 
       {!notebooks || notebooks.length === 0 ? null : (
-        <ContainerBottomButton title="Create a new notebook" onPress={_onPressBottomButton} />
+        <FloatingButton title="Create a new notebook" onPress={_onPressBottomButton} />
       )}
     </>
   );
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 30ea0b561..82467363d 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -1,23 +1,19 @@
 import React, { useCallback, useEffect } from 'react';
-import { StatusBar } from 'react-native-bars';
-import { ChangePassword } from '../../components/Auth/change-password';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { Header } from '../../components/Header/index';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
+import { FloatingButton } from '../../components/container/floating-button';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { Header } from '../../components/header/index';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
 import { useNoteStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { editing, InteractionManager, scrollRef } from '../../utils';
+import { editing, InteractionManager } from '../../utils';
 import { db } from '../../utils/database';
-import { eOnLoadNote } from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
+import { eOnLoadNote } from '../../utils/events';
+import { tabBarRef } from '../../utils/global-refs';
 import { getNote } from '../Editor/Functions';
-import { Tip } from '../../components/Tip';
-import { TipManager } from '../../services/tip-manager';
 
 export const Home = ({ navigation }) => {
   const notes = useNoteStore(state => state.notes);
@@ -98,13 +94,12 @@ export const Home = ({ navigation }) => {
   return (
     <>
       <SelectionHeader screen="Notes" />
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header title="Notes" isBack={false} screen="Notes" action={_onPressBottomButton} />
-      </ContainerTopSection>
+      </ContainerHeader>
 
-      <SimpleList
+      <List
         listData={notes}
-        scrollRef={scrollRef}
         type="notes"
         isHome={true}
         pinned={true}
@@ -126,7 +121,7 @@ export const Home = ({ navigation }) => {
       />
 
       {!notes || notes.length === 0 ? null : (
-        <ContainerBottomButton title="Create a new note" onPress={_onPressBottomButton} />
+        <FloatingButton title="Create a new note" onPress={_onPressBottomButton} />
       )}
     </>
   );
diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js
index 6d814e5c0..564982301 100644
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -1,17 +1,17 @@
 import { groupArray } from 'notes-core/utils/grouping';
 import React, { useEffect, useRef, useState } from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { Header } from '../../components/Header';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
-import { NotebookHeader } from '../../components/SimpleList/notebook-header';
+import { FloatingButton } from '../../components/container/floating-button';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { Header } from '../../components/header';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
+import { NotebookHeader } from '../../components/list/notebook-header';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
 import { InteractionManager } from '../../utils';
 import { db } from '../../utils/database';
-import { eOnNewTopicAdded, eOpenAddNotebookDialog, eOpenAddTopicDialog } from '../../utils/Events';
+import { eOnNewTopicAdded, eOpenAddNotebookDialog, eOpenAddTopicDialog } from '../../utils/events';
 
 export const Notebook = ({ route, navigation }) => {
   const [topics, setTopics] = useState(
@@ -82,15 +82,15 @@ export const Notebook = ({ route, navigation }) => {
     <>
       <SelectionHeader screen="Notebook" />
 
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header
           title={params.current.title}
           isBack={!params.current.menu}
           screen="Notebook"
           action={_onPressBottomButton}
         />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={topics}
         type="topics"
         refreshCallback={() => {
@@ -124,7 +124,7 @@ export const Notebook = ({ route, navigation }) => {
         }}
       />
 
-      <ContainerBottomButton title="Add new topic" onPress={_onPressBottomButton} />
+      <FloatingButton title="Add new topic" onPress={_onPressBottomButton} />
     </>
   );
 };
diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js
index 4ac3b273a..b067a4829 100644
--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -1,11 +1,11 @@
 import { groupArray } from 'notes-core/utils/grouping';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { Header } from '../../components/Header';
+import { FloatingButton } from '../../components/container/floating-button';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { Header } from '../../components/header';
 import { MoveNotes } from '../../components/MoveNoteDialog/movenote';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
 import { useTracked } from '../../provider';
 import { useNoteStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
@@ -14,9 +14,9 @@ import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
 import { editing, InteractionManager } from '../../utils';
 import { db } from '../../utils/database';
-import { eOnLoadNote, eOpenAddTopicDialog, refreshNotesPage } from '../../utils/Events';
+import { eOnLoadNote, eOpenAddTopicDialog, refreshNotesPage } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { tabBarRef } from '../../utils/Refs';
+import { tabBarRef } from '../../utils/global-refs';
 import { getNote } from '../Editor/Functions';
 
 const getNotes = params => {
@@ -236,7 +236,7 @@ export const Notes = ({ route, navigation }) => {
         }}
         screen="NotesPage"
       />
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header
           title={headerProps.heading}
           isBack={!params.current?.menu}
@@ -247,8 +247,8 @@ export const Notes = ({ route, navigation }) => {
           }
           rightButtons={params.current?.type !== 'topic' ? null : headerRightButtons}
         />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={notes || []}
         type="notes"
         screen="NotesPage"
@@ -262,7 +262,7 @@ export const Notes = ({ route, navigation }) => {
         placeholderData={placeholderData}
       />
       {params.current?.get === 'monographs' ? null : (
-        <ContainerBottomButton
+        <FloatingButton
           title="Create a new note"
           onPress={_onPressBottomButton}
           color={params.current?.type == 'color' ? params.current?.title : null}
diff --git a/apps/mobile/src/views/Search/index.js b/apps/mobile/src/views/Search/index.js
index 278331f92..a74655cea 100644
--- a/apps/mobile/src/views/Search/index.js
+++ b/apps/mobile/src/views/Search/index.js
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect } from 'react';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
+import { ContainerHeader } from '../../components/container/containerheader';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
 import { useSearchStore } from '../../provider/stores';
 import SearchService from '../../services/SearchService';
-import { inputRef } from '../../utils/Refs';
-import { sleep } from '../../utils/TimeUtils';
+import { inputRef } from '../../utils/global-refs';
+import { sleep } from '../../utils/time';
 import { SearchBar } from './search-bar';
 
 export const Search = ({ navigation }) => {
@@ -31,10 +31,10 @@ export const Search = ({ navigation }) => {
   return (
     <>
       <SelectionHeader screen="Search" />
-      <ContainerTopSection>
+      <ContainerHeader>
         <SearchBar />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={searchResults}
         type="search"
         screen="Search"
diff --git a/apps/mobile/src/views/Search/searchbar.js b/apps/mobile/src/views/Search/searchbar.js
index 305515437..118ccb8ac 100644
--- a/apps/mobile/src/views/Search/searchbar.js
+++ b/apps/mobile/src/views/Search/searchbar.js
@@ -2,15 +2,15 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Platform, View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ActionIcon } from '../../components/ActionIcon';
+import { IconButton } from '../../components/ui/icon-button';
 import { useTracked } from '../../provider';
 import { useSearchStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { eScrollEvent } from '../../utils/Events';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { eScrollEvent } from '../../utils/events';
+import { normalize, SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 
 export const SearchBar = () => {
   const [state] = useTracked();
@@ -90,7 +90,7 @@ export const SearchBar = () => {
         borderBottomColor: colors.nav
       }}
     >
-      <ActionIcon
+      <IconButton
         name="arrow-left"
         size={SIZE.xl}
         top={10}
@@ -128,7 +128,7 @@ export const SearchBar = () => {
       />
 
       {value && value.length > 0 ? (
-        <ActionIcon
+        <IconButton
           name="close"
           size={SIZE.md + 2}
           top={20}
diff --git a/apps/mobile/src/views/Settings/appearance.js b/apps/mobile/src/views/Settings/appearance.js
index a3607380f..deedef79b 100644
--- a/apps/mobile/src/views/Settings/appearance.js
+++ b/apps/mobile/src/views/Settings/appearance.js
@@ -4,8 +4,8 @@ import { ScrollView } from 'react-native-gesture-handler';
 import Menu, { MenuItem } from 'react-native-reanimated-material-menu';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import ToggleSwitch from 'toggle-switch-react-native';
-import { PressableButton } from '../../components/PressableButton';
-import Paragraph from '../../components/Typography/Paragraph';
+import { PressableButton } from '../../components/ui/pressable';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { Actions } from '../../provider/Actions';
 import { useSettingStore } from '../../provider/stores';
@@ -13,7 +13,7 @@ import { DDS } from '../../services/DeviceDetection';
 import { ToastEvent } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
 import SettingsService from '../../services/SettingsService';
-import { MenuItemsList } from '../../utils';
+import { MenuItemsList } from '../../utils/constants';
 import {
   ACCENT,
   COLOR_SCHEME,
@@ -21,11 +21,11 @@ import {
   COLOR_SCHEME_LIGHT,
   COLOR_SCHEME_PITCH_BLACK,
   setColorScheme
-} from '../../utils/Colors';
-import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils';
-import { MMKV } from '../../utils/mmkv';
-import { tabBarRef } from '../../utils/Refs';
-import { pv, SIZE } from '../../utils/SizeUtils';
+} from '../../utils/color-scheme';
+import { hexToRGBA, RGB_Linear_Shade } from '../../utils/color-scheme/utils';
+import { MMKV } from '../../utils/database/mmkv';
+import { tabBarRef } from '../../utils/global-refs';
+import { pv, SIZE } from '../../utils/size';
 import { CustomButton } from './button';
 import SectionHeader from './section-header';
 
diff --git a/apps/mobile/src/views/Settings/applock.js b/apps/mobile/src/views/Settings/applock.js
index 73c8d2c58..5b1e268a7 100644
--- a/apps/mobile/src/views/Settings/applock.js
+++ b/apps/mobile/src/views/Settings/applock.js
@@ -2,20 +2,20 @@ import React, { useState } from 'react';
 import { LayoutAnimation, Platform, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import BiometricService from '../../services/BiometricService';
-import { PressableButton } from '../../components/PressableButton';
-import Seperator from '../../components/Seperator';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
+import { PressableButton } from '../../components/ui/pressable';
+import Seperator from '../../components/ui/seperator';
+import Heading from '../../components/ui/typography/heading';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { presentSheet } from '../../services/EventManager';
 import SettingsService from '../../services/SettingsService';
-import { SIZE } from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/size';
 import { db } from '../../utils/database';
-import { WelcomeNotice } from '../../components/SplashScreen/welcome';
-import { Button } from '../../components/Button';
+import { WelcomeNotice } from '../../components/intro/welcome';
+import { Button } from '../../components/ui/button';
 import { getElevation } from '../../utils';
-import umami from '../../utils/umami';
+import umami from '../../utils/analytics';
 
 const AppLock = ({ welcome, s = 0 }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Settings/backuprestore.js b/apps/mobile/src/views/Settings/backuprestore.js
index a721e09b8..871a79454 100644
--- a/apps/mobile/src/views/Settings/backuprestore.js
+++ b/apps/mobile/src/views/Settings/backuprestore.js
@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, TouchableOpacity, View } from 'react-native';
 import ToggleSwitch from 'toggle-switch-react-native';
-import Seperator from '../../components/Seperator';
-import Paragraph from '../../components/Typography/Paragraph';
+import Seperator from '../../components/ui/seperator';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { useSettingStore, useUserStore } from '../../provider/stores';
 import Backup from '../../services/Backup';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
 import SettingsService from '../../services/SettingsService';
-import { eCloseProgressDialog, eOpenLoginDialog, eOpenRestoreDialog } from '../../utils/Events';
+import { eCloseProgressDialog, eOpenLoginDialog, eOpenRestoreDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { CustomButton } from './button';
 import { verifyUser } from './functions';
 import SectionHeader from './section-header';
diff --git a/apps/mobile/src/views/Settings/button.js b/apps/mobile/src/views/Settings/button.js
index 81eab559d..4c5648865 100644
--- a/apps/mobile/src/views/Settings/button.js
+++ b/apps/mobile/src/views/Settings/button.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
-import { PressableButton } from '../../components/PressableButton';
-import Paragraph from '../../components/Typography/Paragraph';
+import { PressableButton } from '../../components/ui/pressable';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/size';
 
 export const CustomButton = ({ title, tagline, customComponent, onPress, color = null }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Settings/functions.js b/apps/mobile/src/views/Settings/functions.js
index 6f1c22e33..3fdd67b76 100644
--- a/apps/mobile/src/views/Settings/functions.js
+++ b/apps/mobile/src/views/Settings/functions.js
@@ -1,7 +1,7 @@
-import { presentDialog } from '../../components/Dialog/functions';
+import { presentDialog } from '../../components/dialog/functions';
 import { ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { sleep } from '../../utils/TimeUtils';
+import { sleep } from '../../utils/time';
 
 export async function verifyUser(context, onsuccess, disableBackdropClosing, onclose, closeText) {
   presentDialog({
diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js
index 57bdc3d42..03ac405b7 100644
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -1,17 +1,18 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Linking, Platform, ScrollView, View } from 'react-native';
 import { APP_VERSION } from '../../../version';
-import { Button as MButton } from '../../components/Button/index';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
+import { Button as MButton } from '../../components/ui/button/index';
+import { ContainerHeader } from '../../components/container/containerheader';
 import { Issue } from '../../components/Github/issue';
-import { Header as TopHeader } from '../../components/Header/index';
-import Seperator from '../../components/Seperator';
-import Paragraph from '../../components/Typography/Paragraph';
+import { Header as TopHeader } from '../../components/header/index';
+import Seperator from '../../components/ui/seperator';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { InteractionManager, STORE_LINK } from '../../utils';
-import { eScrollEvent, eUpdateSearchState } from '../../utils/Events';
+import { InteractionManager } from '../../utils';
+import { STORE_LINK } from '../../utils/constants';
+import { eScrollEvent, eUpdateSearchState } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
 import SettingsAppearanceSection from './appearance';
 import SettingsBackupAndRestore from './backup-restore';
@@ -198,9 +199,9 @@ export const Settings = ({ navigation }) => {
 
   return (
     <>
-      <ContainerTopSection>
+      <ContainerHeader>
         <TopHeader title="Settings" isBack={false} screen="Settings" />
-      </ContainerTopSection>
+      </ContainerHeader>
       <View
         style={{
           height: '100%',
diff --git a/apps/mobile/src/views/Settings/logout.js b/apps/mobile/src/views/Settings/logout.js
index 8146f24aa..5d43d404a 100644
--- a/apps/mobile/src/views/Settings/logout.js
+++ b/apps/mobile/src/views/Settings/logout.js
@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 import AnimatedProgress from 'react-native-reanimated-progress-bar';
-import BaseDialog from '../../components/Dialog/base-dialog';
-import { presentDialog } from '../../components/Dialog/functions';
-import { PressableButton } from '../../components/PressableButton';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
+import BaseDialog from '../../components/dialog/base-dialog';
+import { presentDialog } from '../../components/dialog/functions';
+import { PressableButton } from '../../components/ui/pressable';
+import Heading from '../../components/ui/typography/heading';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import BiometricService from '../../services/BiometricService';
 import { ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { SIZE } from '../../utils/SizeUtils';
-import Storage from '../../utils/storage';
-import { sleep } from '../../utils/TimeUtils';
+import { SIZE } from '../../utils/size';
+import Storage from '../../utils/database/storage';
+import { sleep } from '../../utils/time';
 
 const AccoutLogoutSection = () => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Settings/sectionheader.js b/apps/mobile/src/views/Settings/sectionheader.js
index a02d25e05..b15eaf487 100644
--- a/apps/mobile/src/views/Settings/sectionheader.js
+++ b/apps/mobile/src/views/Settings/sectionheader.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
+import Heading from '../../components/ui/typography/heading';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
+import { SIZE } from '../../utils/size';
 
 const SectionHeader = ({ title, collapsed, setCollapsed }) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/views/Settings/usersection.js b/apps/mobile/src/views/Settings/usersection.js
index e3095038a..49dc297d6 100644
--- a/apps/mobile/src/views/Settings/usersection.js
+++ b/apps/mobile/src/views/Settings/usersection.js
@@ -3,11 +3,11 @@ import React from 'react';
 import { Linking, Platform, View } from 'react-native';
 import * as RNIap from 'react-native-iap';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { ChangePassword } from '../../components/Auth/change-password';
-import { Button } from '../../components/Button';
-import Seperator from '../../components/Seperator';
-import Heading from '../../components/Typography/Heading';
-import Paragraph from '../../components/Typography/Paragraph';
+import { ChangePassword } from '../../components/auth/change-password';
+import { Button } from '../../components/ui/button';
+import Seperator from '../../components/ui/seperator';
+import Heading from '../../components/ui/typography/heading';
+import Paragraph from '../../components/ui/typography/paragraph';
 import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManager';
@@ -17,15 +17,15 @@ import {
   SUBSCRIPTION_PROVIDER,
   SUBSCRIPTION_STATUS,
   SUBSCRIPTION_STATUS_STRINGS
-} from '../../utils';
+} from '../../utils/constants';
 import {
   eCloseProgressDialog,
   eOpenLoginDialog,
   eOpenPremiumDialog,
   eOpenRecoveryKeyDialog
-} from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+} from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { CustomButton } from './button';
 import { verifyUser } from './functions';
 
diff --git a/apps/mobile/src/views/Tags/index.js b/apps/mobile/src/views/Tags/index.js
index 3568af361..e693a91b0 100644
--- a/apps/mobile/src/views/Tags/index.js
+++ b/apps/mobile/src/views/Tags/index.js
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect } from 'react';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { Header } from '../../components/Header';
-import { Placeholder } from '../../components/ListPlaceholders';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { Header } from '../../components/header';
+import { Placeholder } from '../../components/ui/svg';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
 import { useTagStore } from '../../provider/stores';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
@@ -67,10 +67,10 @@ export const Tags = ({ navigation }) => {
   return (
     <>
       <SelectionHeader screen="Tags" />
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header title="Tags" isBack={false} screen="Tags" />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={tags}
         type="tags"
         headerProps={{
@@ -84,7 +84,6 @@ export const Tags = ({ navigation }) => {
           button: null,
           loading: 'Loading your tags.'
         }}
-        placeholder={<Placeholder type="tags" />}
         placeholderText="Tags added to notes appear here"
       />
     </>
diff --git a/apps/mobile/src/views/Trash/index.js b/apps/mobile/src/views/Trash/index.js
index af3798d0a..3d1794890 100644
--- a/apps/mobile/src/views/Trash/index.js
+++ b/apps/mobile/src/views/Trash/index.js
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect } from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import { presentDialog } from '../../components/Dialog/functions';
-import { Header } from '../../components/Header';
-import { Placeholder } from '../../components/ListPlaceholders';
-import SelectionHeader from '../../components/SelectionHeader';
-import SimpleList from '../../components/SimpleList';
+import { FloatingButton } from '../../components/container/floating-button';
+import { ContainerHeader } from '../../components/container/containerheader';
+import { presentDialog } from '../../components/dialog/functions';
+import { Header } from '../../components/header';
+import { Placeholder } from '../../components/ui/svg';
+import SelectionHeader from '../../components/selection-header';
+import List from '../../components/list';
 import { useSelectionStore, useTrashStore } from '../../provider/stores';
 import { ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
@@ -106,10 +106,10 @@ export const Trash = ({ navigation }) => {
   return (
     <>
       <SelectionHeader screen="Trash" />
-      <ContainerTopSection>
+      <ContainerHeader>
         <Header title="Trash" isBack={false} screen="Trash" action={_onPressBottomButton} />
-      </ContainerTopSection>
-      <SimpleList
+      </ContainerHeader>
+      <List
         listData={trash}
         type="trash"
         screen="Trash"
@@ -123,16 +123,11 @@ export const Trash = ({ navigation }) => {
         headerProps={{
           heading: 'Trash'
         }}
-        placeholder={<Placeholder type="trash" />}
         placeholderText="Deleted notes & notebooks appear here."
       />
 
       {trash && trash.length !== 0 ? (
-        <ContainerBottomButton
-          title="Clear all trash"
-          onPress={_onPressBottomButton}
-          shouldShow={true}
-        />
+        <FloatingButton title="Clear all trash" onPress={_onPressBottomButton} shouldShow={true} />
       ) : null}
     </>
   );