From 3375439e3530edfc9da0da48767252edb4c7e240 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Wed, 26 Feb 2025 10:18:41 +0500
Subject: [PATCH] mobile: refactor and fix bugs

---
 apps/mobile/app/app.tsx                       |   6 +-
 .../components/announcements/announcement.js  |   8 +-
 .../app/components/announcements/body.js      |   3 +-
 .../app/components/announcements/cta.js       |   7 +-
 .../app/components/announcements/functions.js |   3 +-
 .../app/components/announcements/list.js      |   5 +-
 .../components/announcements/subheading.js    |   5 +-
 .../app/components/announcements/title.js     |  11 +-
 .../app/components/attachments/actions.tsx    |  24 ++-
 .../attachments/attachment-item.tsx           |   5 +-
 .../app/components/attachments/index.tsx      |  17 +-
 apps/mobile/app/components/auth/auth-modal.js |   5 +-
 .../app/components/auth/change-password.js    |   5 +-
 .../app/components/auth/forgot-password.js    |   7 +-
 apps/mobile/app/components/auth/index.js      |   5 +-
 apps/mobile/app/components/auth/login.js      |  20 +-
 .../app/components/auth/session-expired.js    |   7 +-
 apps/mobile/app/components/auth/signup.js     |  25 +--
 apps/mobile/app/components/auth/two-factor.js |  29 ++-
 .../delay-layout/default-placeholder.tsx      |  15 +-
 .../app/components/delay-layout/index.tsx     |   8 +-
 .../delay-layout/settings-placeholder.tsx     |   5 +-
 .../app/components/dialog/dialog-buttons.js   |  17 +-
 .../app/components/dialog/dialog-header.tsx   |   3 +-
 apps/mobile/app/components/dialog/index.js    |  20 +-
 .../dialogs/applock-password/index.tsx        |   3 +-
 .../dialogs/attach-image-dialog/index.tsx     |  22 +-
 .../components/dialogs/color-picker/index.tsx |  11 +-
 .../dialogs/jump-to-section/index.tsx         |   5 +-
 .../app/components/dialogs/loading/index.tsx  |   3 +-
 .../components/dialogs/pdf-preview/index.js   |   5 +-
 .../app/components/dialogs/progress/index.tsx |   7 +-
 .../app/components/dialogs/result/index.js    |  13 +-
 .../components/dialogs/result/pro-features.js |   3 +-
 .../app/components/dialogs/vault/index.js     |   7 +-
 apps/mobile/app/components/header/index.tsx   |   2 +-
 .../app/components/image-preview/index.tsx    |   3 +-
 apps/mobile/app/components/intro/index.tsx    |   3 +-
 .../app/components/list-items/note/index.tsx  |   4 +-
 .../components/list-items/notebook/index.tsx  |   3 +-
 .../components/list-items/reminder/index.tsx  |  17 +-
 .../list-items/selection-wrapper/index.tsx    |   2 +-
 .../app/components/list-items/tag/index.tsx   |   3 +-
 apps/mobile/app/components/list/empty.tsx     |   6 +-
 apps/mobile/app/components/list/index.tsx     |   9 +-
 .../app/components/merge-conflicts/index.js   |   9 +-
 .../app/components/note-history/index.tsx     |   7 +-
 .../app/components/note-history/preview.js    |   5 +-
 .../components/premium/compact-features.js    |   3 +-
 .../app/components/premium/component.js       |  13 +-
 .../mobile/app/components/premium/expiring.js |  11 +-
 apps/mobile/app/components/premium/feature.js |  11 +-
 apps/mobile/app/components/premium/group.js   |   7 +-
 .../app/components/premium/premium-toast.js   |   3 +-
 .../app/components/premium/pricing-item.tsx   |   3 +-
 .../app/components/premium/pricing-plans.tsx  |  27 +--
 apps/mobile/app/components/premium/pro-tag.js |   3 +-
 .../app/components/properties/color-tags.tsx  |  69 +++----
 .../app/components/properties/date-meta.js    |   8 +-
 .../mobile/app/components/properties/index.js |   8 +-
 .../app/components/properties/notebooks.js    |   9 +-
 apps/mobile/app/components/properties/tags.js |  13 +-
 .../app/components/sheet-provider/index.js    |  13 +-
 .../components/sheets/add-notebook/index.tsx  |   5 +-
 .../components/sheets/change-email/index.tsx  |   5 +-
 .../components/sheets/editor-tabs/index.tsx   |   3 +-
 .../components/sheets/export-notes/index.tsx  |  27 +--
 .../components/sheets/export-notes/share.jsx  |   3 +-
 .../app/components/sheets/github/issue.js     |  11 +-
 .../app/components/sheets/link-note/index.tsx |  17 +-
 .../components/sheets/manage-tags/index.tsx   |   5 +-
 .../app/components/sheets/migrate/index.tsx   |  15 +-
 .../components/sheets/new-feature/index.tsx   |   7 +-
 .../components/sheets/publish-note/index.tsx  |  21 +-
 .../app/components/sheets/rate-app/index.js   |   3 +-
 .../components/sheets/recovery-key/index.jsx  |   7 +-
 .../components/sheets/references/index.tsx    |   7 +-
 .../sheets/relations-list/index.tsx           |   3 +-
 .../sheets/reminder-notify/index.tsx          |  15 +-
 .../app/components/sheets/reminder/index.tsx  |  29 +--
 .../app/components/sheets/toc/index.tsx       |   5 +-
 .../app/components/sheets/update/index.js     |  15 +-
 .../app/components/sheets/user/index.tsx      |   3 +-
 .../mobile/app/components/side-menu/index.tsx |   3 +
 .../app/components/side-menu/menu-item.tsx    |   2 +-
 .../components/side-menu/side-menu-home.tsx   |   2 +-
 .../side-menu/side-menu-list-empty.tsx        |  37 +++-
 .../side-menu/side-menu-notebooks.tsx         |   9 +-
 .../components/side-menu/side-menu-tags.tsx   |  28 ++-
 .../app/components/side-menu/user-status.js   |   3 +-
 apps/mobile/app/components/tip/index.tsx      |  18 +-
 apps/mobile/app/components/toast/index.tsx    |   4 +-
 .../mobile/app/components/ui/button/index.tsx |   6 +-
 .../app/components/ui/icon-button/index.tsx   |  13 +-
 apps/mobile/app/components/ui/input/index.tsx |  22 +-
 .../app/components/ui/reminder-time/index.tsx |   3 +-
 apps/mobile/app/components/ui/tag/index.tsx   |   5 +-
 .../app/components/walkthroughs/index.tsx     |   9 +-
 .../components/walkthroughs/walkthroughs.tsx  |  45 +++--
 apps/mobile/app/hooks/use-app-events.tsx      |   7 +-
 apps/mobile/app/hooks/use-delay-layout.ts     |   8 +-
 .../app/navigation/fluid-panels-view.tsx      |  26 ++-
 .../app/navigation/navigation-stack.tsx       | 191 ++++++++++++++----
 .../app-lock}/index.tsx                       |  34 +++-
 apps/mobile/app/screens/editor/index.tsx      |   5 +-
 apps/mobile/app/screens/editor/loading.tsx    |  21 +-
 .../app/screens/editor/readonly-editor.tsx    |  11 +-
 .../app/screens/editor/tiptap/use-editor.ts   |   2 +-
 apps/mobile/app/screens/editor/wrapper.tsx    |   2 +
 .../app/screens/link-notebooks/index.tsx      |   2 +-
 .../app/screens/move-notebook/index.tsx       |   4 +-
 apps/mobile/app/screens/move-notes/index.tsx  |   2 +
 .../screens/note-preview-configure/index.tsx  |   7 +-
 apps/mobile/app/screens/notebook/index.tsx    |  10 +-
 apps/mobile/app/screens/notes/colored.tsx     |   2 +
 apps/mobile/app/screens/notes/index.tsx       |   2 +-
 apps/mobile/app/screens/notes/monographs.tsx  |   1 +
 apps/mobile/app/screens/notes/tagged.tsx      |   2 +
 apps/mobile/app/screens/search/index.tsx      |   2 +
 apps/mobile/app/screens/search/search-bar.tsx |   6 +-
 apps/mobile/app/screens/settings/2fa.tsx      |  17 +-
 apps/mobile/app/screens/settings/app-lock.js  |  11 +-
 .../settings/attachment-group-progress.tsx    |   7 +-
 .../app/screens/settings/components.tsx       |   3 +-
 apps/mobile/app/screens/settings/debug.tsx    |  12 +-
 .../settings/editor/configure-toolbar.tsx     |  13 +-
 .../app/screens/settings/editor/group.tsx     |   9 +-
 .../screens/settings/editor/tool-sheet.tsx    |   7 +-
 .../app/screens/settings/editor/tool.tsx      |  11 +-
 apps/mobile/app/screens/settings/group.tsx    |   3 +-
 apps/mobile/app/screens/settings/home.tsx     |  11 +-
 apps/mobile/app/screens/settings/licenses.tsx |   3 +-
 .../app/screens/settings/picker/index.tsx     |   8 +-
 .../app/screens/settings/picker/pickers.jsx   |  10 +-
 .../screens/settings/restore-backup/index.tsx |   9 +-
 .../app/screens/settings/section-group.tsx    |   3 +-
 .../app/screens/settings/section-item.tsx     |  16 +-
 .../app/screens/settings/server-config.tsx    |  17 +-
 .../app/screens/settings/settings-data.tsx    |   1 +
 .../app/screens/settings/sound-picker.tsx     |   3 +-
 .../app/screens/settings/subscription.js      |   3 +-
 .../app/screens/settings/theme-selector.tsx   |  68 ++++---
 .../app/screens/settings/title-format.tsx     |   3 +-
 .../app/screens/settings/user-section.js      |   7 +-
 apps/mobile/app/services/background-sync.ts   |   1 +
 apps/mobile/app/services/exporter.ts          |   1 +
 apps/mobile/app/services/settings.ts          |   1 +
 .../app/stores/create-db-collection-store.ts  |   6 +-
 apps/mobile/app/utils/global-refs.ts          |   4 +-
 apps/mobile/app/utils/styles.ts               |   4 +-
 apps/mobile/native/globals.js                 |   7 +-
 151 files changed, 989 insertions(+), 670 deletions(-)
 rename apps/mobile/app/{components/app-lock-overlay => screens/app-lock}/index.tsx (92%)

diff --git a/apps/mobile/app/app.tsx b/apps/mobile/app/app.tsx
index 4fa4e2d71..fd31dabf6 100644
--- a/apps/mobile/app/app.tsx
+++ b/apps/mobile/app/app.tsx
@@ -39,8 +39,9 @@ import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
-import { useThemeStore } from "./stores/use-theme-store";
+import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
+import RNBootSplash from "react-native-bootsplash";
 
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
@@ -50,6 +51,9 @@ if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
 
+RNBootSplash.hide({ fade: true });
+changeSystemBarColors();
+
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
diff --git a/apps/mobile/app/components/announcements/announcement.js b/apps/mobile/app/components/announcements/announcement.js
index 2512ed45f..d498eedbf 100644
--- a/apps/mobile/app/components/announcements/announcement.js
+++ b/apps/mobile/app/components/announcements/announcement.js
@@ -24,6 +24,7 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
@@ -36,9 +37,8 @@ export const Announcement = ({ color }) => {
       style={{
         backgroundColor: colors.primary.background,
         width: "100%",
-        paddingHorizontal: 12,
-        paddingTop: 12,
-        paddingBottom: 12
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <View
@@ -54,7 +54,7 @@ export const Announcement = ({ color }) => {
         <View
           style={{
             width: "100%",
-            marginTop: 12
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           {announcement?.body
diff --git a/apps/mobile/app/components/announcements/body.js b/apps/mobile/app/components/announcements/body.js
index b45eee919..4367baa36 100644
--- a/apps/mobile/app/components/announcements/body.js
+++ b/apps/mobile/app/components/announcements/body.js
@@ -20,12 +20,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Body = ({ text, style = {} }) => {
   return (
     <Paragraph
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style)
       }}
     >
diff --git a/apps/mobile/app/components/announcements/cta.js b/apps/mobile/app/components/announcements/cta.js
index 6c53315a4..ae7038091 100644
--- a/apps/mobile/app/components/announcements/cta.js
+++ b/apps/mobile/app/components/announcements/cta.js
@@ -29,6 +29,7 @@ import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
   const { colors } = useThemeColors();
@@ -61,7 +62,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         flexDirection: inline ? "row" : "column"
       }}
@@ -130,7 +131,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 width={250}
                 style={{
-                  marginBottom: 5,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
                   borderRadius: 100
                 }}
               />
@@ -148,7 +149,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: 5
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 textStyle={{
                   textDecorationLine: "underline"
diff --git a/apps/mobile/app/components/announcements/functions.js b/apps/mobile/app/components/announcements/functions.js
index 16dbd86d9..e5c61d7d3 100644
--- a/apps/mobile/app/components/announcements/functions.js
+++ b/apps/mobile/app/components/announcements/functions.js
@@ -28,6 +28,7 @@ import { List } from "./list";
 import { Photo } from "./photo";
 import { SubHeading } from "./subheading";
 import { Title } from "./title";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export function allowedOnPlatform(platforms) {
   if (!platforms) return true;
@@ -53,7 +54,7 @@ const Features = () => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         alignItems: "center",
         width: "100%"
       }}
diff --git a/apps/mobile/app/components/announcements/list.js b/apps/mobile/app/components/announcements/list.js
index 1326ae28f..07dcce488 100644
--- a/apps/mobile/app/components/announcements/list.js
+++ b/apps/mobile/app/components/announcements/list.js
@@ -22,12 +22,13 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const List = ({ items, listType, style = {} }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingLeft: listType === "ordered" ? 25 : 25,
         ...getStyle(style)
       }}
@@ -36,7 +37,7 @@ export const List = ({ items, listType, style = {} }) => {
         <View
           key={item.text}
           style={{
-            paddingVertical: 6,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
             flexDirection: "row"
           }}
         >
diff --git a/apps/mobile/app/components/announcements/subheading.js b/apps/mobile/app/components/announcements/subheading.js
index 87c7ee635..7c05efb1a 100644
--- a/apps/mobile/app/components/announcements/subheading.js
+++ b/apps/mobile/app/components/announcements/subheading.js
@@ -21,14 +21,15 @@ import React from "react";
 import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
       size={AppFontSize.md + 2}
       style={{
-        marginHorizontal: 12,
-        marginTop: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         ...getStyle(style)
       }}
     >
diff --git a/apps/mobile/app/components/announcements/title.js b/apps/mobile/app/components/announcements/title.js
index 5b019ba13..e40b7c15b 100644
--- a/apps/mobile/app/components/announcements/title.js
+++ b/apps/mobile/app/components/announcements/title.js
@@ -24,6 +24,7 @@ import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
   const announcements = useMessageStore((state) => state.announcements);
@@ -36,13 +37,13 @@ export const Title = ({ text, style = {}, inline }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: inline ? 5 : 0
+        marginBottom: inline ? DefaultAppStyles.GAP_VERTICAL_SMALL : 0
       }}
     >
       <Heading
         style={{
-          marginHorizontal: 12,
-          marginTop: 12,
+          marginHorizontal: DefaultAppStyles.GAP,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
@@ -80,9 +81,9 @@ export const Title = ({ text, style = {}, inline }) => {
   ) : (
     <Heading
       style={{
-        marginHorizontal: 12,
+        marginHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        marginTop: style?.marginTop || 12
+        marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}
     >
       {text}
diff --git a/apps/mobile/app/components/attachments/actions.tsx b/apps/mobile/app/components/attachments/actions.tsx
index 594599c5e..39f6bb26a 100644
--- a/apps/mobile/app/components/attachments/actions.tsx
+++ b/apps/mobile/app/components/attachments/actions.tsx
@@ -58,6 +58,7 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Actions = ({
   attachment,
@@ -226,12 +227,13 @@ const Actions = ({
         style={{
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          marginBottom: notes && notes.length > 0 ? 0 : 12
+          marginBottom:
+            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <Heading
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
           size={AppFontSize.lg}
         >
@@ -241,9 +243,9 @@ const Actions = ({
         <View
           style={{
             flexDirection: "row",
-            marginBottom: 10,
-            paddingHorizontal: 12,
-            marginTop: 6,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
             gap: 10
           }}
         >
@@ -283,14 +285,14 @@ const Actions = ({
           style={{
             borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
-            marginBottom: 12,
-            paddingVertical: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <>
             <Heading
               style={{
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               size={AppFontSize.sm}
             >
@@ -307,10 +309,10 @@ const Actions = ({
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{
-                  paddingVertical: 12,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   alignItems: "flex-start",
 
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 key={item.id}
               >
@@ -347,7 +349,7 @@ const Actions = ({
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {failed ? (
diff --git a/apps/mobile/app/components/attachments/attachment-item.tsx b/apps/mobile/app/components/attachments/attachment-item.tsx
index 6ba399b88..c70d44cc9 100644
--- a/apps/mobile/app/components/attachments/attachment-item.tsx
+++ b/apps/mobile/app/components/attachments/attachment-item.tsx
@@ -32,6 +32,7 @@ import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
 import { strings } from "@notesnook/intl";
 import { Pressable } from "../ui/pressable";
+import { DefaultAppStyles } from "../../utils/styles";
 
 function getFileExtension(filename: string) {
   const ext = /^.+\.([^.]+)$/.exec(filename);
@@ -76,8 +77,8 @@ export const AttachmentItem = ({
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "space-between",
-        padding: 12,
-        paddingVertical: 6,
+        padding: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         minHeight: 45
       }}
     >
diff --git a/apps/mobile/app/components/attachments/index.tsx b/apps/mobile/app/components/attachments/index.tsx
index f20b2fc3a..b50a795c4 100644
--- a/apps/mobile/app/components/attachments/index.tsx
+++ b/apps/mobile/app/components/attachments/index.tsx
@@ -50,6 +50,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const DEFAULT_SORTING: SortOptions = {
   sortBy: "dateEdited",
@@ -357,7 +358,7 @@ export const AttachmentDialog = ({
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
@@ -370,8 +371,6 @@ export const AttachmentDialog = ({
             <IconButton
               name="check-all"
               style={{
-                height: 40,
-                width: 40,
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
@@ -381,10 +380,6 @@ export const AttachmentDialog = ({
 
             <IconButton
               name="download"
-              style={{
-                height: 40,
-                width: 40
-              }}
               color={colors.primary.paragraph}
               onPress={() => {
                 if (!attachments) return;
@@ -409,7 +404,7 @@ export const AttachmentDialog = ({
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: "100%"
         }}
       >
@@ -429,7 +424,7 @@ export const AttachmentDialog = ({
               alignItems: "center",
               width: "100%",
               borderRadius: 10,
-              padding: 10,
+              padding: DefaultAppStyles.GAP_SMALL,
               borderWidth: 1,
               borderColor: colors.primary.border,
               gap: 12,
@@ -495,7 +490,7 @@ export const AttachmentDialog = ({
               backgroundColor: colors.primary.background,
               flexWrap: "wrap",
               flexDirection: "row",
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             contentContainerStyle={{
               alignItems: "center"
@@ -515,7 +510,7 @@ export const AttachmentDialog = ({
                   fontSize={AppFontSize.sm}
                   style={{
                     borderRadius: 100,
-                    paddingHorizontal: 12,
+                    paddingHorizontal: DefaultAppStyles.GAP,
                     height: 40,
                     minWidth: 80
                   }}
diff --git a/apps/mobile/app/components/auth/auth-modal.js b/apps/mobile/app/components/auth/auth-modal.js
index 72edd3a07..3f81926aa 100644
--- a/apps/mobile/app/components/auth/auth-modal.js
+++ b/apps/mobile/app/components/auth/auth-modal.js
@@ -37,6 +37,7 @@ import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const AuthMode = {
   login: 0,
@@ -133,7 +134,7 @@ const AuthModal = () => {
           style={{
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             width: "100%",
             height: 50,
             justifyContent:
@@ -167,7 +168,7 @@ const AuthModal = () => {
                 marginTop: 2
               }}
               style={{
-                paddingHorizontal: 6
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
               }}
             />
           )}
diff --git a/apps/mobile/app/components/auth/change-password.js b/apps/mobile/app/components/auth/change-password.js
index 9ed6857f1..321f22746 100644
--- a/apps/mobile/app/components/auth/change-password.js
+++ b/apps/mobile/app/components/auth/change-password.js
@@ -36,6 +36,7 @@ import { Dialog } from "../dialog";
 import BackupService from "../../services/backup";
 import { sleep } from "../../utils/time";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -103,7 +104,7 @@ export const ChangePassword = () => {
     <View
       style={{
         width: "100%",
-        padding: 12
+        padding: DefaultAppStyles.GAP
       }}
     >
       <Dialog context="change-password-dialog" />
@@ -148,7 +149,7 @@ export const ChangePassword = () => {
 
       <Button
         style={{
-          marginTop: 10,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           width: "100%"
         }}
         loading={loading}
diff --git a/apps/mobile/app/components/auth/forgot-password.js b/apps/mobile/app/components/auth/forgot-password.js
index d0af8fc98..c305c0b01 100644
--- a/apps/mobile/app/components/auth/forgot-password.js
+++ b/apps/mobile/app/components/auth/forgot-password.js
@@ -33,6 +33,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = () => {
   const { colors } = useThemeColors("sheet");
@@ -107,7 +108,7 @@ export const ForgotPassword = () => {
         {sent ? (
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               justifyContent: "center",
               alignItems: "center",
               paddingBottom: 50
@@ -138,7 +139,7 @@ export const ForgotPassword = () => {
               backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
-              padding: 12
+              padding: DefaultAppStyles.GAP
             }}
           >
             <DialogHeader title={strings.accountRecovery()} />
@@ -164,7 +165,7 @@ export const ForgotPassword = () => {
 
             <Button
               style={{
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 width: "100%"
               }}
               loading={loading}
diff --git a/apps/mobile/app/components/auth/index.js b/apps/mobile/app/components/auth/index.js
index de0d23f3e..3bce62c31 100644
--- a/apps/mobile/app/components/auth/index.js
+++ b/apps/mobile/app/components/auth/index.js
@@ -30,6 +30,7 @@ import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
@@ -56,7 +57,7 @@ const Auth = ({ navigation, route }) => {
           style={{
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             width: "100%",
             height: 50,
             justifyContent:
@@ -98,7 +99,7 @@ const Auth = ({ navigation, route }) => {
                 marginTop: 2
               }}
               style={{
-                paddingHorizontal: 6
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL
               }}
             />
           )}
diff --git a/apps/mobile/app/components/auth/login.js b/apps/mobile/app/components/auth/login.js
index ba03e919b..a815d0b90 100644
--- a/apps/mobile/app/components/auth/login.js
+++ b/apps/mobile/app/components/auth/login.js
@@ -38,6 +38,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -102,10 +103,10 @@ export const Login = ({ changeMode }) => {
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             borderBottomWidth: 0.8,
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
             alignSelf: isTablet ? "center" : undefined,
             borderWidth: isTablet ? 1 : null,
@@ -143,7 +144,7 @@ export const Login = ({ changeMode }) => {
           <Heading
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             extraBold
             size={AppFontSize.xxl}
@@ -163,7 +164,7 @@ export const Login = ({ changeMode }) => {
               : "99.9%",
             backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <Input
@@ -247,7 +248,6 @@ export const Login = ({ changeMode }) => {
                 width: 250
               }}
               height={50}
-              fontSize={AppFontSize.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -258,7 +258,7 @@ export const Login = ({ changeMode }) => {
                 style={{
                   alignSelf: "center",
                   height: 30,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 onPress={() => {
                   if (loading) return;
@@ -282,17 +282,17 @@ export const Login = ({ changeMode }) => {
                 activeOpacity={0.8}
                 style={{
                   alignSelf: "center",
-                  marginTop: 12,
-                  paddingVertical: 12
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <Paragraph
-                  size={AppFontSize.xs + 1}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={AppFontSize.xs + 1}
+                    size={AppFontSize.xs}
                     style={{ color: colors.primary.accent }}
                   >
                     {strings.signUp()}
diff --git a/apps/mobile/app/components/auth/session-expired.js b/apps/mobile/app/components/auth/session-expired.js
index d5a2cd337..3a6e29e8f 100644
--- a/apps/mobile/app/components/auth/session-expired.js
+++ b/apps/mobile/app/components/auth/session-expired.js
@@ -49,6 +49,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
 import { getObfuscatedEmail } from "../../utils/functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -157,7 +158,7 @@ export const SessionExpired = () => {
         <View
           style={{
             width: focused ? "100%" : "99.9%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             justifyContent: "center",
             flex: 1,
             backgroundColor: colors.primary.background
@@ -213,7 +214,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: 250,
               borderRadius: 100
             }}
@@ -225,7 +226,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               width: "100%"
             }}
             onPress={() => {
diff --git a/apps/mobile/app/components/auth/signup.js b/apps/mobile/app/components/auth/signup.js
index 5192e5115..5436b9359 100644
--- a/apps/mobile/app/components/auth/signup.js
+++ b/apps/mobile/app/components/auth/signup.js
@@ -36,6 +36,7 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -110,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             marginBottom: 20,
             borderBottomWidth: 0.8,
@@ -152,7 +153,7 @@ export const Signup = ({ changeMode, trial }) => {
             extraBold
             style={{
               marginBottom: 25,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             size={AppFontSize.xxl}
           >
@@ -163,7 +164,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: 20,
+            paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.primary.background,
             alignSelf: "center"
           }}
@@ -232,12 +233,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={AppFontSize.xs}
+            size={AppFontSize.xxs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={AppFontSize.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -251,7 +252,7 @@ export const Signup = ({ changeMode, trial }) => {
             </Paragraph>{" "}
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={AppFontSize.xs}
+              size={AppFontSize.xxs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -271,7 +272,6 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
-            fontSize={AppFontSize.md}
             style={{
               width: 250
             }}
@@ -285,17 +285,14 @@ export const Signup = ({ changeMode, trial }) => {
             activeOpacity={0.8}
             style={{
               alignSelf: "center",
-              marginTop: 12,
-              paddingVertical: 12
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Paragraph
-              size={AppFontSize.xs + 1}
-              color={colors.secondary.paragraph}
-            >
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={AppFontSize.xs + 1}
+                size={AppFontSize.xs}
                 style={{ color: colors.primary.accent }}
               >
                 {strings.login()}
diff --git a/apps/mobile/app/components/auth/two-factor.js b/apps/mobile/app/components/auth/two-factor.js
index fa2f3e40d..ac9a367b5 100644
--- a/apps/mobile/app/components/auth/two-factor.js
+++ b/apps/mobile/app/components/auth/two-factor.js
@@ -37,6 +37,7 @@ import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
@@ -204,9 +205,9 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }}
               onSubmitEditing={onNext}
               caretHidden
+              height={60}
               inputStyle={{
                 fontSize: AppFontSize.lg,
-                height: 60,
                 textAlign: "center",
                 letterSpacing: 10,
                 width: 250
@@ -216,11 +217,13 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }
               enablesReturnKeyAutomatically
               containerStyle={{
-                height: 60,
                 borderWidth: 0,
                 width: undefined,
                 minWidth: "50%"
               }}
+              wrapperStyle={{
+                height: 60
+              }}
             />
 
             <Button
@@ -229,9 +232,12 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               width={250}
               loading={loading}
               onPress={onNext}
-              style={{
-                borderRadius: 100
-              }}
+            />
+            <Button
+              title={strings.cancel()}
+              type="secondaryAccented"
+              onPress={onCancel}
+              width={250}
             />
 
             <Button
@@ -242,13 +248,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               onPress={onRequestSecondaryMethod}
               height={30}
             />
-
-            <Button
-              title={strings.cancel()}
-              type="plain"
-              onPress={onCancel}
-              height={30}
-            />
           </>
         ) : (
           <>
@@ -262,8 +261,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                   });
                 }}
                 style={{
-                  paddingHorizontal: 12,
-                  paddingVertical: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   marginTop: 0,
                   flexDirection: "row",
                   borderRadius: 0,
@@ -275,8 +274,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                 <IconButton
                   type="secondaryAccented"
                   style={{
-                    width: 40,
-                    height: 40,
                     marginRight: 10
                   }}
                   size={15}
diff --git a/apps/mobile/app/components/delay-layout/default-placeholder.tsx b/apps/mobile/app/components/delay-layout/default-placeholder.tsx
index 4fb786ee2..774028b96 100644
--- a/apps/mobile/app/components/delay-layout/default-placeholder.tsx
+++ b/apps/mobile/app/components/delay-layout/default-placeholder.tsx
@@ -24,6 +24,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { hexToRGBA } from "../../utils/colors";
 import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -41,7 +42,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
     <View
       style={{
         width: "100%",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {hasAnnoucements ? (
@@ -52,7 +53,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             borderRadius: 10,
             marginBottom: 20,
             backgroundColor: colors.secondary.background,
-            padding: 12
+            padding: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -79,7 +80,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               height: 15,
               backgroundColor: shadeColor,
               borderRadius: 3,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
         </View>
@@ -94,7 +95,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             marginBottom: 20,
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: 20
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -135,7 +136,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
-          padding: 5,
+          padding: DefaultAppStyles.GAP_SMALL,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center"
@@ -189,14 +190,14 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           height: 13,
           backgroundColor: colors.secondary.background,
           borderRadius: defaultBorderRadius,
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       />
 
       <View
         style={{
           flexDirection: "row",
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <View
diff --git a/apps/mobile/app/components/delay-layout/index.tsx b/apps/mobile/app/components/delay-layout/index.tsx
index c0be3b79f..3fa27b373 100644
--- a/apps/mobile/app/components/delay-layout/index.tsx
+++ b/apps/mobile/app/components/delay-layout/index.tsx
@@ -19,8 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ViewProps } from "react-native";
-import Animated, { FadeOut } from "react-native-reanimated";
+import { View, ViewProps } from "react-native";
 import { useDelayLayout } from "../../hooks/use-delay-layout";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
@@ -49,8 +48,7 @@ export default function DelayLayout({
   const Placeholder = placeholder[props.type || "default"];
 
   return loading || props.wait ? (
-    <Animated.View
-      exiting={animated ? FadeOut : undefined}
+    <View
       style={{
         backgroundColor: colors.primary.background,
         flex: 1,
@@ -58,7 +56,7 @@ export default function DelayLayout({
       }}
     >
       <Placeholder color={props.color || colors.primary.accent} />
-    </Animated.View>
+    </View>
   ) : (
     <>{props.children}</>
   );
diff --git a/apps/mobile/app/components/delay-layout/settings-placeholder.tsx b/apps/mobile/app/components/delay-layout/settings-placeholder.tsx
index 6a550ccb7..ce382b6e0 100644
--- a/apps/mobile/app/components/delay-layout/settings-placeholder.tsx
+++ b/apps/mobile/app/components/delay-layout/settings-placeholder.tsx
@@ -21,6 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -45,7 +46,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <View
@@ -86,7 +87,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: 16,
+          paddingHorizontal: DefaultAppStyles.GAP,
           justifyContent: "space-between"
         }}
       >
diff --git a/apps/mobile/app/components/dialog/dialog-buttons.js b/apps/mobile/app/components/dialog/dialog-buttons.js
index 49acbab79..b60b6e167 100644
--- a/apps/mobile/app/components/dialog/dialog-buttons.js
+++ b/apps/mobile/app/components/dialog/dialog-buttons.js
@@ -17,16 +17,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useThemeColors } from "@notesnook/theme";
+import { getColorLinearShade } from "../../utils/colors";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import { getColorLinearShade } from "../../utils/colors";
-import { strings } from "@notesnook/intl";
 
 const DialogButtons = ({
   onPressPositive,
@@ -46,7 +47,7 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(
             colors.secondary.background,
@@ -82,7 +83,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={AppFontSize.md}
+          fontSize={AppFontSize.sm}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -91,7 +92,7 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={AppFontSize.md}
+            fontSize={AppFontSize.sm}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10
@@ -114,6 +115,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     flexDirection: "row",
-    marginTop: 10
+    marginTop: DefaultAppStyles.GAP_VERTICAL
   }
 });
diff --git a/apps/mobile/app/components/dialog/dialog-header.tsx b/apps/mobile/app/components/dialog/dialog-header.tsx
index 70287ac95..509e31686 100644
--- a/apps/mobile/app/components/dialog/dialog-header.tsx
+++ b/apps/mobile/app/components/dialog/dialog-header.tsx
@@ -25,6 +25,7 @@ import { Button } from "../ui/button";
 import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 type DialogHeaderProps = {
   icon?: string;
@@ -97,7 +98,7 @@ const DialogHeader = ({
                 onPress={button.onPress}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 loading={button.loading}
                 fontSize={13}
diff --git a/apps/mobile/app/components/dialog/index.js b/apps/mobile/app/components/dialog/index.js
index 9640da3f7..f68243a2a 100644
--- a/apps/mobile/app/components/dialog/index.js
+++ b/apps/mobile/app/components/dialog/index.js
@@ -17,29 +17,29 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { getContainerBorder } from "../../utils/colors";
 import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
+import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
+import { Button } from "../ui/button";
 import Input from "../ui/input";
+import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
 import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
-import { useCallback } from "react";
-import { Button } from "../ui/button";
-import { getContainerBorder } from "../../utils/colors";
-import { Notice } from "../ui/notice";
-import { strings } from "@notesnook/intl";
-import { defaultBorderRadius } from "../../utils/size";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -176,7 +176,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo.input ? (
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Input
@@ -200,7 +200,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo?.notice ? (
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Notice
diff --git a/apps/mobile/app/components/dialogs/applock-password/index.tsx b/apps/mobile/app/components/dialogs/applock-password/index.tsx
index 6bc450ea8..1e5ecdbff 100644
--- a/apps/mobile/app/components/dialogs/applock-password/index.tsx
+++ b/apps/mobile/app/components/dialogs/applock-password/index.tsx
@@ -50,6 +50,7 @@ import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AppLockPassword = () => {
   const { colors } = useThemeColors();
@@ -128,7 +129,7 @@ export const AppLockPassword = () => {
 
         <View
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {mode === "change" ? (
diff --git a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
index 711d972ef..c3e3626d1 100644
--- a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
+++ b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
@@ -33,6 +33,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function AttachImage({
   response,
@@ -50,21 +51,26 @@ export default function AttachImage({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
           backgroundColor: colors.secondary.background,
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           height: 140,
           width: "100%",
           borderRadius: 10,
-          padding: 5,
-          paddingHorizontal: 12
+          padding: DefaultAppStyles.GAP_SMALL,
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL
         }}
       >
-        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
+        <Paragraph
+          style={{
+            color: colors.primary.paragraph,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+          }}
+        >
           {strings.attachImageHeading(response?.length || 1)}
         </Paragraph>
         <ScrollView horizontal>
@@ -96,7 +102,7 @@ export default function AttachImage({
         style={{
           flexDirection: "row",
           alignSelf: "center",
-          marginBottom: 12,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
           width: "100%"
         }}
@@ -135,7 +141,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       ) : (
@@ -145,7 +151,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       )}
diff --git a/apps/mobile/app/components/dialogs/color-picker/index.tsx b/apps/mobile/app/components/dialogs/color-picker/index.tsx
index 734c7e3f0..dccb6100b 100644
--- a/apps/mobile/app/components/dialogs/color-picker/index.tsx
+++ b/apps/mobile/app/components/dialogs/color-picker/index.tsx
@@ -34,6 +34,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const HEX_COLOR_REGEX_ALPHA =
   /^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
@@ -105,16 +106,16 @@ const ColorPicker = ({
 
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <View
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                paddingTop: 10,
-                columnGap: 10,
-                marginBottom: 10
+                paddingTop: DefaultAppStyles.GAP_VERTICAL,
+                columnGap: DefaultAppStyles.GAP_VERTICAL,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
             >
               <Input
@@ -155,7 +156,7 @@ const ColorPicker = ({
             <Button
               title={strings.addColor()}
               style={{
-                marginBottom: 10
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               onPress={async () => {
                 if (!selectedColor)
diff --git a/apps/mobile/app/components/dialogs/jump-to-section/index.tsx b/apps/mobile/app/components/dialogs/jump-to-section/index.tsx
index 5c8883cfb..373967996 100644
--- a/apps/mobile/app/components/dialogs/jump-to-section/index.tsx
+++ b/apps/mobile/app/components/dialogs/jump-to-section/index.tsx
@@ -43,6 +43,7 @@ import { AppFontSize } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const JumpToSectionDialog = () => {
   const scrollRef = useRef<RefObject<FlatList>>();
@@ -152,7 +153,7 @@ const JumpToSectionDialog = () => {
           maxHeight: "65%",
           borderRadius: 10,
           alignSelf: "center",
-          padding: 10,
+          padding: DefaultAppStyles.GAP_SMALL,
           paddingTop: 30
         }}
       >
@@ -188,7 +189,7 @@ const JumpToSectionDialog = () => {
                     style={{
                       minWidth: "20%",
                       width: null,
-                      paddingHorizontal: 12,
+                      paddingHorizontal: DefaultAppStyles.GAP,
                       margin: 5,
                       borderRadius: 100,
                       height: 30,
diff --git a/apps/mobile/app/components/dialogs/loading/index.tsx b/apps/mobile/app/components/dialogs/loading/index.tsx
index eb67807bb..c1daa9b30 100644
--- a/apps/mobile/app/components/dialogs/loading/index.tsx
+++ b/apps/mobile/app/components/dialogs/loading/index.tsx
@@ -28,6 +28,7 @@ import {
 } from "../../../services/event-manager";
 import { useState } from "react";
 import { eCloseLoading, eOpenLoading } from "../../../utils/events";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const LoadingDialog = () => {
   const { colors } = useThemeColors();
@@ -67,7 +68,7 @@ export const LoadingDialog = () => {
           style={{
             flexDirection: "row",
             width: 100,
-            marginTop: 15
+            marginTop: DefaultAppStyles.GAP
           }}
         >
           <ProgressBarComponent
diff --git a/apps/mobile/app/components/dialogs/pdf-preview/index.js b/apps/mobile/app/components/dialogs/pdf-preview/index.js
index d0f57ba5a..36b1f74a6 100644
--- a/apps/mobile/app/components/dialogs/pdf-preview/index.js
+++ b/apps/mobile/app/components/dialogs/pdf-preview/index.js
@@ -46,6 +46,7 @@ import { sleep } from "../../../utils/time";
 import { MMKV } from "../../../common/database/mmkv";
 import { deleteCacheFileByPath } from "../../../common/filesystem/io";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const WIN_WIDTH = Dimensions.get("window").width;
 const WIN_HEIGHT = Dimensions.get("window").height;
@@ -184,7 +185,7 @@ const PDFPreview = () => {
               />
               <Paragraph
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 color={colors.static.white}
               >
@@ -200,7 +201,7 @@ const PDFPreview = () => {
                   marginTop: insets.top,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   paddingLeft: 6
                 }}
               >
diff --git a/apps/mobile/app/components/dialogs/progress/index.tsx b/apps/mobile/app/components/dialogs/progress/index.tsx
index e1469a207..7d1b1a670 100644
--- a/apps/mobile/app/components/dialogs/progress/index.tsx
+++ b/apps/mobile/app/components/dialogs/progress/index.tsx
@@ -29,6 +29,7 @@ import { Button } from "../../ui/button";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export type ProgressOptions = {
   progress?: string;
@@ -111,7 +112,7 @@ export default function Progress() {
     >
       <DialogContainer
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingBottom: 10
         }}
         noBorder={data?.fillBackground ? true : false}
@@ -121,7 +122,7 @@ export default function Progress() {
           style={{
             justifyContent: "center",
             alignItems: "center",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             gap: 10,
             paddingBottom: 20
           }}
@@ -148,7 +149,7 @@ export default function Progress() {
             style={{
               flexDirection: "row",
               width: 100,
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <ProgressBarComponent
diff --git a/apps/mobile/app/components/dialogs/result/index.js b/apps/mobile/app/components/dialogs/result/index.js
index 490e11dd8..92d9989bd 100644
--- a/apps/mobile/app/components/dialogs/result/index.js
+++ b/apps/mobile/app/components/dialogs/result/index.js
@@ -34,6 +34,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ResultDialog = () => {
   const { colors } = useThemeColors();
@@ -83,10 +84,10 @@ const ResultDialog = () => {
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "100%",
-            marginBottom: 10,
-            paddingHorizontal: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           {dialogData.title}
@@ -109,7 +110,7 @@ const ResultDialog = () => {
 
         <View
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             alignItems: "center",
             width: "100%"
           }}
@@ -124,14 +125,14 @@ const ResultDialog = () => {
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,
-            paddingVertical: 10
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Button
             title={dialogData.button}
             width={null}
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
             onPress={close}
             fontSize={AppFontSize.md + 2}
diff --git a/apps/mobile/app/components/dialogs/result/pro-features.js b/apps/mobile/app/components/dialogs/result/pro-features.js
index 3bad10c5f..4226deace 100644
--- a/apps/mobile/app/components/dialogs/result/pro-features.js
+++ b/apps/mobile/app/components/dialogs/result/pro-features.js
@@ -30,6 +30,7 @@ import {
 import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ProFeatures = ({ count = 6 }) => {
   const { colors } = useThemeColors();
 
@@ -67,7 +68,7 @@ export const ProFeatures = ({ count = 6 }) => {
               width: "100%",
               height: 40,
               paddingHorizontal: 0,
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               alignItems: "center",
               borderRadius: defaultBorderRadius,
               justifyContent: "flex-start"
diff --git a/apps/mobile/app/components/dialogs/vault/index.js b/apps/mobile/app/components/dialogs/vault/index.js
index 746cab70d..8e4458cf3 100644
--- a/apps/mobile/app/components/dialogs/vault/index.js
+++ b/apps/mobile/app/components/dialogs/vault/index.js
@@ -53,6 +53,7 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export class VaultDialog extends Component {
   constructor(props) {
@@ -677,7 +678,7 @@ export class VaultDialog extends Component {
 
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             {(novault ||
@@ -750,7 +751,7 @@ export class VaultDialog extends Component {
                     : "checkbox-blank-circle-outline"
                 }
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 width="100%"
                 title={strings.deleteAllNotes()}
@@ -847,7 +848,7 @@ export class VaultDialog extends Component {
                   });
                 }}
                 style={{
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 icon="fingerprint"
                 width="100%"
diff --git a/apps/mobile/app/components/header/index.tsx b/apps/mobile/app/components/header/index.tsx
index 15a6e4b66..25e33134a 100644
--- a/apps/mobile/app/components/header/index.tsx
+++ b/apps/mobile/app/components/header/index.tsx
@@ -99,7 +99,7 @@ export const Header = ({
           justifyContent: "space-between",
           marginTop: DefaultAppStyles.GAP_SMALL,
           borderRadius: 10,
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL - 2,
           borderWidth: hasSearch ? 1 : 0,
           borderColor: colors.secondary.border,
           paddingHorizontal: !hasSearch ? 0 : DefaultAppStyles.GAP_SMALL,
diff --git a/apps/mobile/app/components/image-preview/index.tsx b/apps/mobile/app/components/image-preview/index.tsx
index 62d5e1a18..41984cb98 100644
--- a/apps/mobile/app/components/image-preview/index.tsx
+++ b/apps/mobile/app/components/image-preview/index.tsx
@@ -38,6 +38,7 @@ import RNFetchBlob from "react-native-blob-util";
 import Share from "react-native-share";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const ImagePreview = () => {
   const { colors } = useThemeColors("dialog");
@@ -124,7 +125,7 @@ const ImagePreview = () => {
             justifyContent: "flex-end",
             alignItems: "center",
             height: 50,
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             gap: 10
           }}
         >
diff --git a/apps/mobile/app/components/intro/index.tsx b/apps/mobile/app/components/intro/index.tsx
index 8bda34557..041a07a5b 100644
--- a/apps/mobile/app/components/intro/index.tsx
+++ b/apps/mobile/app/components/intro/index.tsx
@@ -30,6 +30,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import SettingsService from "../../services/settings";
 import { AuthMode } from "../auth/common";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Intro = () => {
   const { colors } = useThemeColors();
@@ -72,7 +73,7 @@ const Intro = () => {
         </View>
         <View
           style={{
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "90%",
             width: "100%"
           }}
diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx
index c85c8b1fe..d7db97415 100644
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -272,7 +272,7 @@ const NoteItem = ({
                       style={{
                         borderRadius: 4,
                         backgroundColor: colors.secondary.background,
-                        paddingHorizontal: 4,
+                        paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
                         borderWidth: 0.5,
                         borderColor: primaryColors.border,
                         paddingVertical: 1,
@@ -303,7 +303,7 @@ const NoteItem = ({
                           style={{
                             borderRadius: 4,
                             backgroundColor: colors.secondary.background,
-                            paddingHorizontal: 4,
+                            paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
                             borderWidth: 0.5,
                             borderColor: primaryColors.border,
                             paddingVertical: 1
diff --git a/apps/mobile/app/components/list-items/notebook/index.tsx b/apps/mobile/app/components/list-items/notebook/index.tsx
index 70dcdc0af..efeef5a2b 100644
--- a/apps/mobile/app/components/list-items/notebook/index.tsx
+++ b/apps/mobile/app/components/list-items/notebook/index.tsx
@@ -34,6 +34,7 @@ import AppIcon from "../../ui/AppIcon";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type NotebookItemProps = {
   item: Notebook | BaseTrashItem<Notebook>;
@@ -104,7 +105,7 @@ export const NotebookItem = ({
               flexDirection: "row",
               justifyContent: "flex-start",
               alignItems: "center",
-              marginTop: 5,
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
               height: AppFontSize.md + 2
             }}
           >
diff --git a/apps/mobile/app/components/list-items/reminder/index.tsx b/apps/mobile/app/components/list-items/reminder/index.tsx
index 225e08572..8b283502c 100644
--- a/apps/mobile/app/components/list-items/reminder/index.tsx
+++ b/apps/mobile/app/components/list-items/reminder/index.tsx
@@ -34,6 +34,7 @@ import { strings } from "@notesnook/intl";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import useIsSelected from "../../../hooks/use-selected";
 import AppIcon from "../../ui/AppIcon";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ReminderItem = React.memo(
   ({
@@ -87,7 +88,7 @@ const ReminderItem = React.memo(
             style={{
               flexDirection: "row",
               flexWrap: "wrap",
-              marginTop: 5
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >
             {item.disabled ? (
@@ -96,9 +97,9 @@ const ReminderItem = React.memo(
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
                   flexDirection: "row",
-                  paddingHorizontal: 6,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                   alignItems: "center",
-                  marginTop: 5,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
                   marginRight: 10,
@@ -125,12 +126,12 @@ const ReminderItem = React.memo(
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
                   flexDirection: "row",
-                  paddingHorizontal: 6,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                   alignItems: "center",
-                  marginTop: 5,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
-                  marginRight: 10,
+                  marginRight: DefaultAppStyles.GAP_SMALL,
                   height: 30
                 }}
               >
@@ -152,10 +153,10 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={AppFontSize.xs}
+              fontSize={AppFontSize.xxs}
               style={{
                 justifyContent: "flex-start",
-                height: 25,
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
                 alignSelf: "flex-start"
               }}
             />
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
index d37aa2b19..15fbac136 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
@@ -109,7 +109,7 @@ const SelectionWrapper = ({
         paddingHorizontal: DefaultAppStyles.GAP,
         paddingVertical: compactMode ? 4 : DefaultAppStyles.GAP_VERTICAL,
         borderRadius: isSheet ? 10 : 0,
-        marginBottom: isSheet ? 12 : undefined
+        marginBottom: isSheet ? DefaultAppStyles.GAP_VERTICAL : undefined
       }}
     >
       {children}
diff --git a/apps/mobile/app/components/list-items/tag/index.tsx b/apps/mobile/app/components/list-items/tag/index.tsx
index 5436bf9f3..b962b6325 100644
--- a/apps/mobile/app/components/list-items/tag/index.tsx
+++ b/apps/mobile/app/components/list-items/tag/index.tsx
@@ -30,6 +30,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TagItem = React.memo(
   ({
@@ -75,7 +76,7 @@ const TagItem = React.memo(
             color={colors.secondary.paragraph}
             size={AppFontSize.xs}
             style={{
-              marginTop: 5
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
             }}
           >
             {strings.notes(totalNotes)}
diff --git a/apps/mobile/app/components/list/empty.tsx b/apps/mobile/app/components/list/empty.tsx
index 62304c2cf..d70b37082 100644
--- a/apps/mobile/app/components/list/empty.tsx
+++ b/apps/mobile/app/components/list/empty.tsx
@@ -24,7 +24,7 @@ import { notesnook } from "../../../e2e/test.ids";
 import { TTip, useTip } from "../../services/tip-manager";
 import { RouteParams } from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { AppFontSize, defaultBorderRadius } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
@@ -102,9 +102,7 @@ export const Empty = React.memo(function Empty({
               icon="arrow-right"
               onPress={placeholder?.action}
               style={{
-                alignSelf: "flex-start",
-                borderRadius: defaultBorderRadius,
-                height: 40
+                alignSelf: "flex-start"
               }}
             />
           )}
diff --git a/apps/mobile/app/components/list/index.tsx b/apps/mobile/app/components/list/index.tsx
index b2ad36022..6229a0d06 100644
--- a/apps/mobile/app/components/list/index.tsx
+++ b/apps/mobile/app/components/list/index.tsx
@@ -24,9 +24,9 @@ import React, { useEffect, useRef } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  RefreshControl
+  RefreshControl,
+  View
 } from "react-native";
-import Animated, { FadeIn } from "react-native-reanimated";
 import { notesnook } from "../../../e2e/test.ids";
 import { useGroupOptions } from "../../hooks/use-group-options";
 import { eSendEvent } from "../../services/event-manager";
@@ -145,11 +145,10 @@ export default function List(props: ListProps) {
 
   return (
     <>
-      <Animated.View
+      <View
         style={{
           flex: 1
         }}
-        entering={props.renderedInRoute === "Search" ? undefined : FadeIn}
       >
         {props.data?.placeholders?.length === 0 ? (
           <>
@@ -214,7 +213,7 @@ export default function List(props: ListProps) {
             }
           />
         )}
-      </Animated.View>
+      </View>
     </>
   );
 }
diff --git a/apps/mobile/app/components/merge-conflicts/index.js b/apps/mobile/app/components/merge-conflicts/index.js
index 7a01da901..64dcc6b6e 100644
--- a/apps/mobile/app/components/merge-conflicts/index.js
+++ b/apps/mobile/app/components/merge-conflicts/index.js
@@ -49,6 +49,7 @@ import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const MergeConflicts = () => {
   const { colors } = useThemeColors();
@@ -142,7 +143,7 @@ const MergeConflicts = () => {
           flexDirection: "row",
           justifyContent: "space-between",
           alignItems: "center",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingLeft: 6
         }}
       >
@@ -201,7 +202,7 @@ const MergeConflicts = () => {
               height={30}
               style={{
                 borderRadius: 100,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               fontSize={AppFontSize.xs}
             />
@@ -218,7 +219,7 @@ const MergeConflicts = () => {
               height={30}
               style={{
                 borderRadius: 100,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               fontSize={AppFontSize.xs}
               color={colors.error.paragraph}
@@ -233,7 +234,7 @@ const MergeConflicts = () => {
                 height={30}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   minWidth: 60,
                   marginLeft: 10
                 }}
diff --git a/apps/mobile/app/components/note-history/index.tsx b/apps/mobile/app/components/note-history/index.tsx
index e688eafee..cb359b8ea 100644
--- a/apps/mobile/app/components/note-history/index.tsx
+++ b/apps/mobile/app/components/note-history/index.tsx
@@ -38,6 +38,7 @@ import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import NotePreview from "./preview";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const HistoryItem = ({
   index,
@@ -88,9 +89,9 @@ const HistoryItem = ({
       style={{
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         height: 45,
-        marginBottom: 10,
+        marginBottom: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row"
       }}
     >
@@ -148,7 +149,7 @@ export default function NoteHistory({
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: !history?.placeholders.length
             ? 300
             : (history.placeholders.length + 1) * 55,
diff --git a/apps/mobile/app/components/note-history/preview.js b/apps/mobile/app/components/note-history/preview.js
index 52914954c..0f3a3af84 100644
--- a/apps/mobile/app/components/note-history/preview.js
+++ b/apps/mobile/app/components/note-history/preview.js
@@ -36,6 +36,7 @@ import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
 import { diff } from "diffblazer";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  *
@@ -158,7 +159,7 @@ export default function NotePreview({ session, content, note }) {
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <Button
@@ -173,7 +174,7 @@ export default function NotePreview({ session, content, note }) {
           type="error"
           width="100%"
           style={{
-            marginTop: 12
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         />
       </View>
diff --git a/apps/mobile/app/components/premium/compact-features.js b/apps/mobile/app/components/premium/compact-features.js
index a51e96ea9..8b9905f5e 100644
--- a/apps/mobile/app/components/premium/compact-features.js
+++ b/apps/mobile/app/components/premium/compact-features.js
@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { FeatureBlock } from "./feature";
 import { ScrollView } from "react-native-actions-sheet";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const CompactFeatures = ({
   vertical,
@@ -84,7 +85,7 @@ export const CompactFeatures = ({
       style={{
         width: "100%",
         maxHeight: maxHeight,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {data.map((item) => (
diff --git a/apps/mobile/app/components/premium/component.js b/apps/mobile/app/components/premium/component.js
index 406aa3355..d62a501cb 100644
--- a/apps/mobile/app/components/premium/component.js
+++ b/apps/mobile/app/components/premium/component.js
@@ -44,6 +44,7 @@ import { Walkthrough } from "../walkthroughs";
 import { features } from "./features";
 import { Group } from "./group";
 import { PricingPlans } from "./pricing-plans";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Component = ({ close, promo }) => {
   const { colors } = useThemeColors();
@@ -175,7 +176,7 @@ export const Component = ({ close, promo }) => {
           key="description"
           size={AppFontSize.md}
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             textAlign: "center",
             alignSelf: "center",
             paddingBottom: 20,
@@ -203,7 +204,7 @@ export const Component = ({ close, promo }) => {
             type="accent"
             width={250}
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               marginBottom: 15,
               borderRadius: 100
             }}
@@ -219,7 +220,7 @@ export const Component = ({ close, promo }) => {
           type={userCanRequestTrial ? "secondaryAccented" : "accent"}
           width={250}
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             marginBottom: 15,
             borderRadius: 100
           }}
@@ -232,7 +233,7 @@ export const Component = ({ close, promo }) => {
             style={{
               alignSelf: "center",
               textAlign: "center",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               maxWidth: "80%"
             }}
           >
@@ -254,7 +255,7 @@ export const Component = ({ close, promo }) => {
         <View
           key="plans"
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <PricingPlans showTrialOption={false} promo={promo} />
@@ -269,7 +270,7 @@ export const Component = ({ close, promo }) => {
           }
           type="accent"
           style={{
-            paddingHorizontal: 24,
+            paddingHorizontal: DefaultAppStyles.GAP * 2,
             position: "absolute",
             borderRadius: 100,
             bottom: 30,
diff --git a/apps/mobile/app/components/premium/expiring.js b/apps/mobile/app/components/premium/expiring.js
index 0b8eb63db..15ef5fd35 100644
--- a/apps/mobile/app/components/premium/expiring.js
+++ b/apps/mobile/app/components/premium/expiring.js
@@ -42,6 +42,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { CompactFeatures } from "./compact-features";
 import { Offer } from "./offer";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Expiring = () => {
   const { colors } = useThemeColors();
@@ -94,7 +95,7 @@ export const Expiring = () => {
           >
             <View
               style={{
-                paddingHorizontal: 12,
+                paddingHorizontal: DefaultAppStyles.GAP,
                 width: "100%"
               }}
             >
@@ -147,7 +148,7 @@ export const Expiring = () => {
                   style={{
                     textDecorationLine: "underline",
                     color: colors.secondary.paragraph,
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                 >
                   {"See what's included in Basic & Pro plans"}
@@ -179,8 +180,8 @@ export const Expiring = () => {
                 fontSize={AppFontSize.md + 2}
                 style={{
                   marginBottom: status.extend ? 0 : 10,
-                  marginTop: 10,
-                  paddingHorizontal: 24
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  paddingHorizontal: DefaultAppStyles.GAP * 2
                 }}
               />
 
@@ -204,7 +205,7 @@ export const Expiring = () => {
                   fontSize={AppFontSize.xs}
                   height={30}
                   style={{
-                    marginBottom: 10
+                    marginBottom: DefaultAppStyles.GAP_VERTICAL
                   }}
                 />
               )}
diff --git a/apps/mobile/app/components/premium/feature.js b/apps/mobile/app/components/premium/feature.js
index 6c34e362e..ee436090b 100644
--- a/apps/mobile/app/components/premium/feature.js
+++ b/apps/mobile/app/components/premium/feature.js
@@ -24,6 +24,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { ProTag } from "./pro-tag";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const FeatureBlock = ({
   vertical,
@@ -40,11 +41,11 @@ export const FeatureBlock = ({
       style={{
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: 12,
-        marginBottom: 10,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        marginBottom: DefaultAppStyles.GAP_VERTICAL,
         backgroundColor: colors.secondary.background,
         borderRadius: 10,
-        paddingVertical: 12
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <Paragraph
@@ -63,7 +64,7 @@ export const FeatureBlock = ({
       style={{
         height: 100,
         justifyContent: "center",
-        padding: 10,
+        padding: DefaultAppStyles.GAP_SMALL,
         marginRight: 10,
         borderRadius: defaultBorderRadius,
         minWidth: 100
@@ -85,7 +86,7 @@ export const FeatureBlock = ({
           style={{
             width: 30,
             height: 3,
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             borderRadius: 100,
             backgroundColor: colors.primary.accent
           }}
diff --git a/apps/mobile/app/components/premium/group.js b/apps/mobile/app/components/premium/group.js
index 52bb8b4c8..a1b0b50df 100644
--- a/apps/mobile/app/components/premium/group.js
+++ b/apps/mobile/app/components/premium/group.js
@@ -25,6 +25,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { FeatureBlock } from "./feature";
 import { ProTag } from "./pro-tag";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Group = ({ item, index }) => {
   const { colors } = useThemeColors();
@@ -32,7 +33,7 @@ export const Group = ({ item, index }) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         backgroundColor:
           index % 2 !== 0
             ? colors.primary.background
@@ -56,7 +57,7 @@ export const Group = ({ item, index }) => {
       {item.features && (
         <ScrollView
           style={{
-            marginTop: 20
+            marginTop: DefaultAppStyles.GAP
           }}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -79,7 +80,7 @@ export const Group = ({ item, index }) => {
       {item.info ? (
         <Paragraph
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           size={AppFontSize.xs}
           color={colors.secondary.paragraph}
diff --git a/apps/mobile/app/components/premium/premium-toast.js b/apps/mobile/app/components/premium/premium-toast.js
index cb128d030..b946c1f46 100644
--- a/apps/mobile/app/components/premium/premium-toast.js
+++ b/apps/mobile/app/components/premium/premium-toast.js
@@ -40,6 +40,7 @@ import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const PremiumToast = ({ context = "global", offset = 0 }) => {
   const { colors } = useThemeColors();
@@ -95,7 +96,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
           backgroundColor: colors.secondary.background,
           zIndex: 999,
           ...getElevationStyle(20),
-          padding: 12,
+          padding: DefaultAppStyles.GAP,
           borderRadius: 10,
           flexDirection: "row",
           alignSelf: "center",
diff --git a/apps/mobile/app/components/premium/pricing-item.tsx b/apps/mobile/app/components/premium/pricing-item.tsx
index 4b6457760..42fdcd47e 100644
--- a/apps/mobile/app/components/premium/pricing-item.tsx
+++ b/apps/mobile/app/components/premium/pricing-item.tsx
@@ -24,6 +24,7 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import RNIap from "react-native-iap";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const PricingItem = ({
   product,
@@ -49,7 +50,7 @@ export const PricingItem = ({
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingVertical: compact ? 15 : 10,
         width: compact ? null : "100%",
         minWidth: 150,
diff --git a/apps/mobile/app/components/premium/pricing-plans.tsx b/apps/mobile/app/components/premium/pricing-plans.tsx
index 929792c54..9856623e2 100644
--- a/apps/mobile/app/components/premium/pricing-plans.tsx
+++ b/apps/mobile/app/components/premium/pricing-plans.tsx
@@ -50,6 +50,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { PricingItem } from "./pricing-item";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const UUID_PREFIX = "0bdaea";
 const UUID_VERSION = "4";
@@ -265,7 +266,7 @@ export const PricingPlans = ({
   return loading ? (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         justifyContent: "center",
         alignItems: "center",
         height: 100
@@ -276,7 +277,7 @@ export const PricingPlans = ({
   ) : (
     <View
       style={{
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       {buying ? (
@@ -310,9 +311,9 @@ export const PricingPlans = ({
             type="accent"
             width={250}
             style={{
-              paddingHorizontal: 12,
-              marginBottom: 15,
-              marginTop: 15,
+              paddingHorizontal: DefaultAppStyles.GAP,
+              marginBottom: DefaultAppStyles.GAP,
+              marginTop: DefaultAppStyles.GAP,
               borderRadius: 100
             }}
           />
@@ -333,7 +334,7 @@ export const PricingPlans = ({
             type="secondaryAccented"
             width={250}
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               marginBottom: 15
             }}
           />
@@ -504,7 +505,7 @@ export const PricingPlans = ({
                 <Button
                   height={35}
                   style={{
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   onPress={() => {
                     presentDialog({
@@ -566,9 +567,9 @@ export const PricingPlans = ({
                     type="accent"
                     width={250}
                     style={{
-                      paddingHorizontal: 12,
+                      paddingHorizontal: DefaultAppStyles.GAP,
                       marginTop: product?.type === "promo" ? 0 : 30,
-                      marginBottom: 10
+                      marginBottom: DefaultAppStyles.GAP_VERTICAL
                     }}
                   />
                   {Platform.OS !== "ios" &&
@@ -613,7 +614,7 @@ export const PricingPlans = ({
                       setProduct(undefined);
                     }}
                     style={{
-                      marginTop: 5
+                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                     }}
                     height={30}
                     fontSize={13}
@@ -634,7 +635,7 @@ export const PricingPlans = ({
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: 10,
+            marginTop: DefaultAppStyles.GAP_VERTICAL,
             maxWidth: "80%"
           }}
         >
@@ -656,7 +657,7 @@ export const PricingPlans = ({
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -670,7 +671,7 @@ export const PricingPlans = ({
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
diff --git a/apps/mobile/app/components/premium/pro-tag.js b/apps/mobile/app/components/premium/pro-tag.js
index 5b57d980c..65bb8337e 100644
--- a/apps/mobile/app/components/premium/pro-tag.js
+++ b/apps/mobile/app/components/premium/pro-tag.js
@@ -22,6 +22,7 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeColors } from "@notesnook/theme";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  *
@@ -39,7 +40,7 @@ export const ProTag = ({ width, size, background }) => {
         width: width || 60,
         justifyContent: "center",
         alignItems: "center",
-        paddingVertical: 2.5,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
         flexDirection: "row"
       }}
     >
diff --git a/apps/mobile/app/components/properties/color-tags.tsx b/apps/mobile/app/components/properties/color-tags.tsx
index b1b4c3ec7..8dc206ce1 100644
--- a/apps/mobile/app/components/properties/color-tags.tsx
+++ b/apps/mobile/app/components/properties/color-tags.tsx
@@ -37,6 +37,7 @@ import { Button } from "../ui/button";
 import NativeTooltip from "../../utils/tooltip";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -133,37 +134,37 @@ export const ColorTags = ({ item }: { item: Note }) => {
           flexShrink: 2
         }}
       >
-        <FlashList
-          data={colorNotes}
-          estimatedItemSize={30}
-          horizontal
-          extraData={updater}
-          bounces={false}
-          renderItem={renderItem}
-          showsHorizontalScrollIndicator={false}
-          ListFooterComponent={
-            !colorNotes || !colorNotes.length ? (
-              <Button
-                onPress={async () => {
-                  useSettingStore.getState().setSheetKeyboardHandler(false);
-                  setVisible(true);
-                }}
-                buttonType={{
-                  text: colors.primary.accent
-                }}
-                title={strings.addColor()}
-                type="secondary"
-                icon="plus"
-                iconPosition="right"
-                height={30}
-                fontSize={AppFontSize.xs}
-                style={{
-                  marginRight: 5,
-                  borderRadius: 100,
-                  paddingHorizontal: 8
-                }}
-              />
-            ) : (
+        {!colorNotes || !colorNotes.length ? (
+          <Button
+            onPress={async () => {
+              useSettingStore.getState().setSheetKeyboardHandler(false);
+              setVisible(true);
+            }}
+            buttonType={{
+              text: colors.primary.accent
+            }}
+            title={strings.addColor()}
+            type="secondary"
+            icon="plus"
+            iconPosition="right"
+            height={30}
+            fontSize={AppFontSize.xs}
+            style={{
+              marginRight: 5,
+              paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          />
+        ) : (
+          <FlashList
+            data={colorNotes}
+            estimatedItemSize={30}
+            horizontal
+            extraData={updater}
+            bounces={false}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            ListFooterComponent={
               <Pressable
                 style={{
                   width: 35,
@@ -186,9 +187,9 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   size={AppFontSize.lg}
                 />
               </Pressable>
-            )
-          }
-        />
+            }
+          />
+        )}
       </View>
     </>
   );
diff --git a/apps/mobile/app/components/properties/date-meta.js b/apps/mobile/app/components/properties/date-meta.js
index 2b36e2d87..a6919179f 100644
--- a/apps/mobile/app/components/properties/date-meta.js
+++ b/apps/mobile/app/components/properties/date-meta.js
@@ -24,6 +24,7 @@ import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 export const DateMeta = ({ item }) => {
   const { colors } = useThemeColors();
 
@@ -44,7 +45,7 @@ export const DateMeta = ({ item }) => {
         style={{
           flexDirection: "row",
           justifyContent: "space-between",
-          paddingVertical: 3
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2
         }}
       >
         <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
@@ -59,11 +60,10 @@ export const DateMeta = ({ item }) => {
   return (
     <View
       style={{
-        paddingVertical: 5,
-        marginTop: 5,
         borderTopWidth: 1,
         borderTopColor: colors.primary.border,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
       }}
     >
       {getDateMeta().map(renderItem)}
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index 3c59a215a..79b237a38 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -166,10 +166,10 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                 style={{
                   justifyContent: "flex-start",
                   borderWidth: 0,
-                  height: 30,
                   alignSelf: "flex-start",
                   backgroundColor: "transparent",
-                  paddingHorizontal: 0
+                  paddingHorizontal: 0,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 fontSize={AppFontSize.xs}
               />
@@ -177,12 +177,12 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
           </View>
 
           <DateMeta item={item} />
-          <Line bottom={0} />
+          <Line bottom={0} top={0} />
 
           {item.type === "note" ? (
             <>
               <Tags close={close} item={item} />
-              <Line bottom={0} />
+              <Line bottom={0} top={0} />
             </>
           ) : null}
           {item.type === "note" ? (
diff --git a/apps/mobile/app/components/properties/notebooks.js b/apps/mobile/app/components/properties/notebooks.js
index dbce653d2..041b8221a 100644
--- a/apps/mobile/app/components/properties/notebooks.js
+++ b/apps/mobile/app/components/properties/notebooks.js
@@ -30,6 +30,7 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export default function Notebooks({ note, close, full }) {
   const { colors } = useThemeColors();
@@ -59,12 +60,12 @@ export default function Notebooks({ note, close, full }) {
       type={full ? "transparent" : "secondary"}
       style={{
         justifyContent: "flex-start",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         flexDirection: "row",
         alignItems: "center",
         flexShrink: 1,
         flexGrow: 1,
-        padding: 6,
+        padding: DefaultAppStyles.GAP_SMALL,
         borderRadius: 10,
         minHeight: 42
       }}
@@ -92,14 +93,14 @@ export default function Notebooks({ note, close, full }) {
   return noteNotebooks.length === 0 ? null : (
     <View
       style={{
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
           width: "100%",
           borderRadius: 10,
-          marginTop: 6
+          marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
         }}
       >
         {full
diff --git a/apps/mobile/app/components/properties/tags.js b/apps/mobile/app/components/properties/tags.js
index 593ecd2c0..06082c2ad 100644
--- a/apps/mobile/app/components/properties/tags.js
+++ b/apps/mobile/app/components/properties/tags.js
@@ -28,6 +28,7 @@ import ManageTagsSheet from "../sheets/manage-tags";
 import { Button } from "../ui/button";
 import { ColorTags } from "./color-tags";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Tags = ({ item, close }) => {
   const { colors } = useThemeColors();
@@ -35,11 +36,10 @@ export const Tags = ({ item, close }) => {
   return item.id ? (
     <View
       style={{
-        marginTop: 5,
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         alignSelf: "center",
         justifyContent: "space-between",
         width: "100%"
@@ -56,11 +56,10 @@ export const Tags = ({ item, close }) => {
         type="secondary"
         icon="plus"
         iconPosition="right"
-        height={30}
-        fontSize={AppFontSize.sm - 1}
+        fontSize={AppFontSize.xs}
         style={{
-          height: 35,
-          borderRadius: 100
+          paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
         }}
       />
       <ColorTags item={item} />
@@ -86,7 +85,7 @@ export const TagStrip = ({ item, close }) => {
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        marginTop: 10,
+        marginTop: DefaultAppStyles.GAP_VERTICAL,
         gap: 5
       }}
     >
diff --git a/apps/mobile/app/components/sheet-provider/index.js b/apps/mobile/app/components/sheet-provider/index.js
index 91967d08c..4331ee156 100644
--- a/apps/mobile/app/components/sheet-provider/index.js
+++ b/apps/mobile/app/components/sheet-provider/index.js
@@ -33,6 +33,7 @@ import { Button } from "../ui/button";
 import SheetWrapper from "../ui/sheet";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 const SheetProvider = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
@@ -120,13 +121,13 @@ const SheetProvider = ({ context = "global" }) => {
             !data.progress && !data.icon && !data.title && !data.paragraph
               ? 0
               : 10,
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {data?.progress ? (
           <ActivityIndicator
             style={{
-              marginTop: 15
+              marginTop: DefaultAppStyles.GAP
             }}
             size={50}
             color={colors.primary.accent}
@@ -169,7 +170,7 @@ const SheetProvider = ({ context = "global" }) => {
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginBottom: data.valueArray ? 12 : 0
         }}
       >
@@ -193,7 +194,7 @@ const SheetProvider = ({ context = "global" }) => {
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {data?.action ? (
@@ -220,7 +221,7 @@ const SheetProvider = ({ context = "global" }) => {
               icon={item.icon && item.icon}
               type={item.type || "accent"}
               style={{
-                marginBottom: 10
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               width="100%"
               fontSize={AppFontSize.md}
@@ -231,7 +232,7 @@ const SheetProvider = ({ context = "global" }) => {
           <Paragraph
             style={{
               alignSelf: "center",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               textDecorationLine: "underline"
             }}
             size={AppFontSize.xs}
diff --git a/apps/mobile/app/components/sheets/add-notebook/index.tsx b/apps/mobile/app/components/sheets/add-notebook/index.tsx
index 4d8e3a1f4..b091a66d5 100644
--- a/apps/mobile/app/components/sheets/add-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/add-notebook/index.tsx
@@ -40,6 +40,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AddNotebookSheet = ({
   notebook,
@@ -125,7 +126,7 @@ export const AddNotebookSheet = ({
       style={{
         maxHeight: DDS.isTab ? "90%" : "97%",
         borderRadius: DDS.isTab ? 5 : 0,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <Heading size={AppFontSize.lg}>
@@ -172,7 +173,7 @@ export const AddNotebookSheet = ({
         height={45}
         fontSize={AppFontSize.md}
         style={{
-          paddingHorizontal: 24,
+          paddingHorizontal: DefaultAppStyles.GAP * 2,
           width: "100%"
         }}
         onPress={onSaveChanges}
diff --git a/apps/mobile/app/components/sheets/change-email/index.tsx b/apps/mobile/app/components/sheets/change-email/index.tsx
index d88f43478..cf4cccaa2 100644
--- a/apps/mobile/app/components/sheets/change-email/index.tsx
+++ b/apps/mobile/app/components/sheets/change-email/index.tsx
@@ -31,6 +31,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { eUserLoggedIn } from "../../../utils/events";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type ChangeEmailProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -101,14 +102,14 @@ export const ChangeEmail = ({ close }: ChangeEmailProps) => {
   };
 
   return (
-    <View style={{ paddingHorizontal: 12 }}>
+    <View style={{ paddingHorizontal: DefaultAppStyles.GAP }}>
       <DialogHeader
         title={strings.changeEmail()}
         paragraph={strings.changeEmailDesc()}
       />
       <View
         style={{
-          marginTop: 12
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         {step === EmailChangeSteps.verify ? (
diff --git a/apps/mobile/app/components/sheets/editor-tabs/index.tsx b/apps/mobile/app/components/sheets/editor-tabs/index.tsx
index b89986cee..30a636ed7 100644
--- a/apps/mobile/app/components/sheets/editor-tabs/index.tsx
+++ b/apps/mobile/app/components/sheets/editor-tabs/index.tsx
@@ -37,6 +37,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const TabItemComponent = (props: {
   tab: TabItem;
@@ -202,7 +203,7 @@ export default function EditorTabs({
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         gap: 12,
         maxHeight: "100%"
       }}
diff --git a/apps/mobile/app/components/sheets/export-notes/index.tsx b/apps/mobile/app/components/sheets/export-notes/index.tsx
index e84df073e..2911a5ba2 100644
--- a/apps/mobile/app/components/sheets/export-notes/index.tsx
+++ b/apps/mobile/app/components/sheets/export-notes/index.tsx
@@ -53,6 +53,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ExportNotesSheet = ({
   ids,
@@ -166,7 +167,7 @@ const ExportNotesSheet = ({
         <>
           <View
             style={{
-              paddingHorizontal: 12
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <DialogHeader
@@ -193,10 +194,10 @@ const ExportNotesSheet = ({
                   alignItems: "center",
                   flexDirection: "row",
                   paddingRight: 12,
-                  paddingVertical: 10,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   justifyContent: "flex-start",
                   borderRadius: 0,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   opacity: item.pro ? 1 : 0.5
                 }}
               >
@@ -245,8 +246,8 @@ const ExportNotesSheet = ({
               justifyContent: "center",
               alignItems: "center",
               width: "100%",
-              paddingHorizontal: 12,
-              paddingVertical: 20
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {!complete ? (
@@ -273,7 +274,7 @@ const ExportNotesSheet = ({
                 <Heading
                   style={{
                     textAlign: "center",
-                    marginTop: 10
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
                   color={colors.secondary.heading}
                 >
@@ -296,7 +297,7 @@ const ExportNotesSheet = ({
                   width={250}
                   fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
                     borderRadius: 100
                   }}
                   onPress={async () => {
@@ -325,7 +326,7 @@ const ExportNotesSheet = ({
                   width={250}
                   fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
                     borderRadius: 100
                   }}
                   onPress={async () => {
@@ -353,7 +354,7 @@ const ExportNotesSheet = ({
                   width={250}
                   fontSize={AppFontSize.md}
                   style={{
-                    marginTop: 10,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
                     borderRadius: 100
                   }}
                   onPress={async () => {
@@ -385,16 +386,16 @@ const styles = StyleSheet.create({
   container: {
     ...getElevationStyle(5),
     borderRadius: defaultBorderRadius,
-    paddingVertical: pv
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL
   },
   buttonContainer: {
     justifyContent: "space-between",
     alignItems: "center"
   },
   button: {
-    paddingVertical: pv,
-    paddingHorizontal: ph,
-    marginTop: 10,
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+    paddingHorizontal: DefaultAppStyles.GAP,
+    marginTop: DefaultAppStyles.GAP_VERTICAL,
     borderRadius: defaultBorderRadius,
     width: "100%",
     justifyContent: "center",
diff --git a/apps/mobile/app/components/sheets/export-notes/share.jsx b/apps/mobile/app/components/sheets/export-notes/share.jsx
index fb032c945..4cda73361 100644
--- a/apps/mobile/app/components/sheets/export-notes/share.jsx
+++ b/apps/mobile/app/components/sheets/export-notes/share.jsx
@@ -24,6 +24,7 @@ import { ToastManager } from "../../../services/event-manager";
 import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ShareComponent = ({ uri, name, padding }) => {
   return (
     <View
@@ -55,7 +56,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
         width="100%"
         fontSize={AppFontSize.md}
         style={{
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
         onPress={async () => {
           FileViewer.open(uri, {
diff --git a/apps/mobile/app/components/sheets/github/issue.js b/apps/mobile/app/components/sheets/github/issue.js
index b0c99e8fe..7462faa3d 100644
--- a/apps/mobile/app/components/sheets/github/issue.js
+++ b/apps/mobile/app/components/sheets/github/issue.js
@@ -35,6 +35,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
@@ -85,7 +86,7 @@ Logged in: ${user ? "yes" : "no"}`,
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         width: "100%"
       }}
     >
@@ -148,9 +149,9 @@ Logged in: ${user ? "yes" : "no"}`,
               borderWidth: 1,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               fontFamily: "OpenSans-Regular",
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               fontSize: AppFontSize.md,
               color: colors.primary.heading
             }}
@@ -181,7 +182,7 @@ Logged in: ${user ? "yes" : "no"}`,
               borderWidth: 1,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               fontFamily: "OpenSans-Regular",
               maxHeight: 200,
               fontSize: AppFontSize.sm,
@@ -210,7 +211,7 @@ Logged in: ${user ? "yes" : "no"}`,
             color={colors.secondary.paragraph}
             size={AppFontSize.xs}
             style={{
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               textAlign: "center"
             }}
           >
diff --git a/apps/mobile/app/components/sheets/link-note/index.tsx b/apps/mobile/app/components/sheets/link-note/index.tsx
index 51904eeaf..9f0ab36d5 100644
--- a/apps/mobile/app/components/sheets/link-note/index.tsx
+++ b/apps/mobile/app/components/sheets/link-note/index.tsx
@@ -38,6 +38,7 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const ListNoteItem = ({
   id,
@@ -57,7 +58,7 @@ const ListNoteItem = ({
       }}
       type={"transparent"}
       style={{
-        paddingVertical: 12,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         flexDirection: "row",
         width: "100%",
         justifyContent: "flex-start",
@@ -104,7 +105,7 @@ const ListBlockItem = ({
           alignItems: "flex-start",
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          paddingVertical: 5,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
           justifyContent: "space-between"
         }}
       >
@@ -220,7 +221,7 @@ export default function LinkNote(props: {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         minHeight: "100%",
         maxHeight: "100%"
       }}
@@ -270,7 +271,7 @@ export default function LinkNote(props: {
                 height: 45,
                 borderWidth: 1,
                 borderColor: colors.primary.accent,
-                paddingHorizontal: 12
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               type="secondaryAccented"
             >
@@ -296,7 +297,7 @@ export default function LinkNote(props: {
             {nodes?.length > 0 ? (
               <Paragraph
                 style={{
-                  marginBottom: 12
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL
                 }}
                 color={colors.secondary.paragraph}
                 size={AppFontSize.xs}
@@ -314,7 +315,7 @@ export default function LinkNote(props: {
             <ListBlockItem item={item} onSelectBlock={onSelectBlock} />
           )}
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           keyboardShouldPersistTaps="handled"
           windowSize={3}
@@ -332,7 +333,7 @@ export default function LinkNote(props: {
           )}
           keyboardShouldPersistTaps="handled"
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           windowSize={3}
           data={notes?.placeholders}
@@ -342,7 +343,7 @@ export default function LinkNote(props: {
       {selectedNote ? (
         <Button
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           title={strings.createLink()}
           type="accent"
diff --git a/apps/mobile/app/components/sheets/manage-tags/index.tsx b/apps/mobile/app/components/sheets/manage-tags/index.tsx
index c8d3d916d..c7016371b 100644
--- a/apps/mobile/app/components/sheets/manage-tags/index.tsx
+++ b/apps/mobile/app/components/sheets/manage-tags/index.tsx
@@ -49,6 +49,7 @@ import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 async function updateInitialSelectionState(items: string[]) {
   const relations = await db.relations
@@ -242,7 +243,7 @@ const ManageTagsSheet = (props: {
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         maxHeight: dimensions.height * 0.85
       }}
     >
@@ -279,7 +280,7 @@ const ManageTagsSheet = (props: {
             flexDirection: "row",
             marginVertical: 5,
             justifyContent: "space-between",
-            padding: 12
+            padding: DefaultAppStyles.GAP
           }}
           onPress={onSubmit}
           type="selected"
diff --git a/apps/mobile/app/components/sheets/migrate/index.tsx b/apps/mobile/app/components/sheets/migrate/index.tsx
index 050851ae6..f614a90ab 100644
--- a/apps/mobile/app/components/sheets/migrate/index.tsx
+++ b/apps/mobile/app/components/sheets/migrate/index.tsx
@@ -42,6 +42,7 @@ import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
 import { Issue } from "../github/issue";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const makeError = (stack: string, component: string) => `
 
@@ -125,7 +126,7 @@ export default function Migrate() {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingTop: 12,
         height: "100%",
         alignItems: "center",
@@ -152,8 +153,8 @@ export default function Migrate() {
           >
             <Paragraph
               style={{
-                marginTop: 5,
-                marginBottom: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -183,7 +184,7 @@ export default function Migrate() {
         <>
           <Paragraph
             style={{
-              marginTop: 20,
+              marginTop: DefaultAppStyles.GAP,
               textAlign: "center"
             }}
           >
@@ -193,7 +194,7 @@ export default function Migrate() {
           {reset ? (
             <Paragraph
               style={{
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 textAlign: "center"
               }}
             >
@@ -212,7 +213,7 @@ export default function Migrate() {
               style={{
                 borderRadius: 100,
                 height: 45,
-                marginTop: 10
+                marginTop: DefaultAppStyles.GAP_VERTICAL
               }}
             />
           )}
@@ -226,7 +227,7 @@ export default function Migrate() {
           style={{
             borderRadius: 100,
             height: 45,
-            marginTop: 20
+            marginTop: DefaultAppStyles.GAP
           }}
         />
       )}
diff --git a/apps/mobile/app/components/sheets/new-feature/index.tsx b/apps/mobile/app/components/sheets/new-feature/index.tsx
index 45028bb85..db7d186f7 100644
--- a/apps/mobile/app/components/sheets/new-feature/index.tsx
+++ b/apps/mobile/app/components/sheets/new-feature/index.tsx
@@ -32,6 +32,7 @@ import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 export type FeatureType = {
   title: string;
   body: string;
@@ -51,7 +52,7 @@ const NewFeature = ({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         paddingTop: 12,
         maxHeight: "100%"
       }}
@@ -68,10 +69,10 @@ const NewFeature = ({
             key={item.title}
             style={{
               backgroundColor: colors.secondary.background,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               borderRadius: 10,
               width: "100%",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Heading size={AppFontSize.lg - 2}>{item.title}</Heading>
diff --git a/apps/mobile/app/components/sheets/publish-note/index.tsx b/apps/mobile/app/components/sheets/publish-note/index.tsx
index 9e3a5ee94..28b6d0f6e 100644
--- a/apps/mobile/app/components/sheets/publish-note/index.tsx
+++ b/apps/mobile/app/components/sheets/publish-note/index.tsx
@@ -38,6 +38,7 @@ import Paragraph from "../../ui/typography/paragraph";
 import { requestInAppReview } from "../../../services/app-review";
 import { hosts, Note } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 const PublishNoteSheet = ({
   note: item
@@ -117,7 +118,7 @@ const PublishNoteSheet = ({
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <DialogHeader
@@ -155,9 +156,9 @@ const PublishNoteSheet = ({
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                marginTop: 10,
+                marginTop: DefaultAppStyles.GAP_VERTICAL,
                 backgroundColor: colors.secondary.background,
-                padding: 12,
+                padding: DefaultAppStyles.GAP,
                 borderRadius: defaultBorderRadius
               }}
             >
@@ -183,7 +184,7 @@ const PublishNoteSheet = ({
                   }}
                   size={AppFontSize.xs}
                   style={{
-                    marginTop: 5,
+                    marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                     color: colors.primary.paragraph
                   }}
                 >
@@ -217,11 +218,11 @@ const PublishNoteSheet = ({
             style={{
               flexDirection: "row",
               alignItems: "center",
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               backgroundColor: colors.secondary.background,
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               borderRadius: defaultBorderRadius,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <IconButton
@@ -260,7 +261,7 @@ const PublishNoteSheet = ({
               flexDirection: "row",
               alignItems: "center",
               backgroundColor: colors.secondary.background,
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               borderRadius: defaultBorderRadius
             }}
           >
@@ -294,7 +295,7 @@ const PublishNoteSheet = ({
             style={{
               width: "100%",
               alignSelf: "center",
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {isLocked ? (
@@ -352,7 +353,7 @@ const PublishNoteSheet = ({
         size={AppFontSize.xs}
         style={{
           textAlign: "center",
-          marginTop: 10,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           textDecorationLine: "underline"
         }}
         onPress={async () => {
diff --git a/apps/mobile/app/components/sheets/rate-app/index.js b/apps/mobile/app/components/sheets/rate-app/index.js
index b27f10118..a179f5db6 100644
--- a/apps/mobile/app/components/sheets/rate-app/index.js
+++ b/apps/mobile/app/components/sheets/rate-app/index.js
@@ -34,6 +34,7 @@ import SheetWrapper from "../../ui/sheet";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 const RateAppSheet = () => {
   const [visible, setVisible] = useState(false);
   const actionSheetRef = useRef();
@@ -83,7 +84,7 @@ const RateAppSheet = () => {
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <Heading>{strings.rateAppHeading()}</Heading>
diff --git a/apps/mobile/app/components/sheets/recovery-key/index.jsx b/apps/mobile/app/components/sheets/recovery-key/index.jsx
index 1d06e770f..a6b7fa494 100644
--- a/apps/mobile/app/components/sheets/recovery-key/index.jsx
+++ b/apps/mobile/app/components/sheets/recovery-key/index.jsx
@@ -44,6 +44,7 @@ import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import { QRCode } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 class RecoveryKeySheet extends React.Component {
   constructor(props) {
@@ -223,7 +224,7 @@ class RecoveryKeySheet extends React.Component {
             width: "100%",
             backgroundColor: colors.primary.background,
             justifyContent: "space-between",
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             borderRadius: 10,
             paddingTop: 10
           }}
@@ -236,8 +237,8 @@ class RecoveryKeySheet extends React.Component {
           <View
             style={{
               borderRadius: defaultBorderRadius,
-              padding: 12,
-              marginTop: 10
+              padding: DefaultAppStyles.GAP,
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph
diff --git a/apps/mobile/app/components/sheets/references/index.tsx b/apps/mobile/app/components/sheets/references/index.tsx
index 27c574eaa..31fb0f227 100644
--- a/apps/mobile/app/components/sheets/references/index.tsx
+++ b/apps/mobile/app/components/sheets/references/index.tsx
@@ -42,6 +42,7 @@ import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const useExpandedStore = create<{
   expanded: {
@@ -80,7 +81,7 @@ const ListBlockItem = ({
         paddingLeft: 35,
         justifyContent: "flex-start",
         minHeight: 45,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
@@ -495,9 +496,9 @@ export const ReferencesList = ({ item, close }: ReferencesListProps) => {
       ) : (
         <View
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             flex: 1,
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <FlashList
diff --git a/apps/mobile/app/components/sheets/relations-list/index.tsx b/apps/mobile/app/components/sheets/relations-list/index.tsx
index 4e54cd4c0..3b6be11b3 100644
--- a/apps/mobile/app/components/sheets/relations-list/index.tsx
+++ b/apps/mobile/app/components/sheets/relations-list/index.tsx
@@ -37,6 +37,7 @@ import SheetProvider from "../../sheet-provider";
 import { Button } from "../../ui/button";
 import { PressableProps } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type RelationsListProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -95,7 +96,7 @@ export const RelationsList = ({
   }, [relationType, referenceType, item?.id, item?.type, updater]);
 
   return (
-    <View style={{ paddingHorizontal: 12, height: "100%" }}>
+    <View style={{ paddingHorizontal: DefaultAppStyles.GAP, height: "100%" }}>
       <SheetProvider context="local" />
       <DialogHeader
         title={title}
diff --git a/apps/mobile/app/components/sheets/reminder-notify/index.tsx b/apps/mobile/app/components/sheets/reminder-notify/index.tsx
index e964c2b58..b09ececfe 100644
--- a/apps/mobile/app/components/sheets/reminder-notify/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder-notify/index.tsx
@@ -41,6 +41,7 @@ import {
   Note
 } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type ReminderSheetProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -102,7 +103,7 @@ export default function ReminderNotify({
       style={{
         justifyContent: "center",
         alignItems: "center",
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <Heading>{reminder?.title}</Heading>
@@ -112,7 +113,7 @@ export default function ReminderNotify({
         style={{
           height: 40,
           borderRadius: 100,
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           flexDirection: "row",
           alignItems: "center"
         }}
@@ -128,11 +129,11 @@ export default function ReminderNotify({
         horizontal={true}
         contentContainerStyle={{
           alignItems: "center",
-          paddingVertical: 10
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL
         }}
         showsHorizontalScrollIndicator={false}
         style={{
-          marginTop: 10
+          marginTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <Paragraph size={AppFontSize.xs}>{strings.remindMeIn()}:</Paragraph>
@@ -161,15 +162,15 @@ export default function ReminderNotify({
                 : 500,
             borderTopWidth: 1,
             borderTopColor: colors.primary.border,
-            marginTop: 5,
-            paddingTop: 5
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            paddingTop: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <Paragraph
             style={{
               color: colors.secondary.paragraph,
               fontSize: AppFontSize.xs,
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {strings.referencedIn()}
diff --git a/apps/mobile/app/components/sheets/reminder/index.tsx b/apps/mobile/app/components/sheets/reminder/index.tsx
index cf2e943f1..901a2e520 100644
--- a/apps/mobile/app/components/sheets/reminder/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder/index.tsx
@@ -50,6 +50,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { ItemReference, Note, Reminder } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type ReminderSheetProps = {
   actionSheetRef: RefObject<ActionSheetRef>;
@@ -224,7 +225,7 @@ export default function ReminderSheet({
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         maxHeight: "100%"
       }}
     >
@@ -245,7 +246,7 @@ export default function ReminderSheet({
           placeholder={strings.remindeMeOf()}
           onChangeText={(text) => (title.current = text)}
           wrapperStyle={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         />
 
@@ -262,18 +263,18 @@ export default function ReminderSheet({
           textAlignVertical="top"
           inputStyle={{
             minHeight: 80,
-            paddingVertical: 12
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
           height={80}
           wrapperStyle={{
-            marginBottom: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL
           }}
         />
 
         <ScrollView
           style={{
             flexDirection: "row",
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             height: 50
           }}
           horizontal
@@ -323,9 +324,9 @@ export default function ReminderSheet({
           <View
             style={{
               backgroundColor: colors.secondary.background,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               borderRadius: defaultBorderRadius,
-              marginBottom: 12
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <View
@@ -439,7 +440,7 @@ export default function ReminderSheet({
               width: "100%",
               flexDirection: "column",
               justifyContent: "center",
-              marginBottom: 12,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               alignItems: "center"
             }}
           >
@@ -495,11 +496,11 @@ export default function ReminderSheet({
             style={{
               borderRadius: defaultBorderRadius,
               flexDirection: "row",
-              paddingVertical: 6,
-              paddingHorizontal: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              paddingHorizontal: DefaultAppStyles.GAP,
               alignItems: "center",
               justifyContent: "flex-start",
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               backgroundColor: colors.secondary.background
             }}
           >
@@ -551,7 +552,7 @@ export default function ReminderSheet({
           <RNScrollView
             style={{
               flexDirection: "row",
-              marginTop: 12,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               height: 50
             }}
             horizontal
@@ -603,8 +604,8 @@ export default function ReminderSheet({
         height={45}
         fontSize={AppFontSize.md}
         style={{
-          paddingHorizontal: 24,
-          marginTop: 10,
+          paddingHorizontal: DefaultAppStyles.GAP * 2,
+          marginTop: DefaultAppStyles.GAP_VERTICAL,
           width: "100%"
         }}
         onPress={saveReminder}
diff --git a/apps/mobile/app/components/sheets/toc/index.tsx b/apps/mobile/app/components/sheets/toc/index.tsx
index 16d47d8b0..0c56a4d65 100644
--- a/apps/mobile/app/components/sheets/toc/index.tsx
+++ b/apps/mobile/app/components/sheets/toc/index.tsx
@@ -31,6 +31,7 @@ import {
 } from "../../../screens/editor/tiptap/utils";
 import { FlatList } from "react-native-actions-sheet";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type TableOfContentsItem = {
   level: number;
@@ -99,9 +100,9 @@ const TableOfContents = ({ toc, close }: TableOfContentsProps) => {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         gap: 12,
-        paddingTop: 12
+        paddingTop: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <View
diff --git a/apps/mobile/app/components/sheets/update/index.js b/apps/mobile/app/components/sheets/update/index.js
index 541cbfd86..eda14b198 100644
--- a/apps/mobile/app/components/sheets/update/index.js
+++ b/apps/mobile/app/components/sheets/update/index.js
@@ -34,6 +34,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { getContainerBorder } from "../../../utils/colors";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 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>`;
 
@@ -86,7 +87,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
         alignSelf: "center",
         alignItems: "center",
         width: "100%",
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         maxHeight: "97%"
       }}
     >
@@ -111,7 +112,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
                 />
                 <Paragraph
                   style={{
-                    marginTop: 5
+                    marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                   }}
                   size={AppFontSize.md}
                 >
@@ -133,7 +134,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
               width: "100%",
               backgroundColor: colors.secondary.background,
               borderRadius: 10,
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               ...getContainerBorder(colors.secondary.background)
             }}
           >
@@ -167,11 +168,11 @@ export const Update = ({ version: appVersion, fwdRef }) => {
               <Paragraph
                 color={colors.secondary.paragraph}
                 style={{
-                  marginBottom: 5,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   fontFamily: "monospace",
                   fontSize: 12,
                   lineHeight: 20,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
                 selectable
               >
@@ -184,7 +185,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
                   key={item}
                   color={colors.secondary.paragraph}
                   style={{
-                    marginBottom: 5
+                    marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
                   }}
                   selectable
                 >
@@ -214,7 +215,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
             color={colors.secondary.paragraph}
             style={{
               textDecorationLine: "underline",
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             onPress={() => {
               Linking.openURL(GITHUB_PAGE_URL).catch(() => {
diff --git a/apps/mobile/app/components/sheets/user/index.tsx b/apps/mobile/app/components/sheets/user/index.tsx
index 26ac215c0..39525f90b 100644
--- a/apps/mobile/app/components/sheets/user/index.tsx
+++ b/apps/mobile/app/components/sheets/user/index.tsx
@@ -299,11 +299,12 @@ export const UserSheet = () => {
             <Pressable
               key={item.title}
               style={{
-                paddingVertical: DefaultAppStyles.GAP_SMALL,
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                 alignItems: "center",
                 flexDirection: "row",
                 justifyContent: "flex-start",
                 gap: DefaultAppStyles.GAP_SMALL,
+                borderRadius: 0,
                 paddingHorizontal: DefaultAppStyles.GAP
               }}
               onPress={() => {
diff --git a/apps/mobile/app/components/side-menu/index.tsx b/apps/mobile/app/components/side-menu/index.tsx
index 78a0f50f2..d471e3941 100644
--- a/apps/mobile/app/components/side-menu/index.tsx
+++ b/apps/mobile/app/components/side-menu/index.tsx
@@ -94,6 +94,7 @@ export const SideMenu = React.memo(
           onIndexChange={setIndex}
           swipeEnabled={false}
           animationEnabled={false}
+          lazy
         />
       </SafeAreaView>
     );
@@ -399,3 +400,5 @@ const TabBar = (
     </View>
   );
 };
+
+export default SideMenu;
diff --git a/apps/mobile/app/components/side-menu/menu-item.tsx b/apps/mobile/app/components/side-menu/menu-item.tsx
index 2c379e81c..d3475ee6d 100644
--- a/apps/mobile/app/components/side-menu/menu-item.tsx
+++ b/apps/mobile/app/components/side-menu/menu-item.tsx
@@ -146,7 +146,7 @@ function _MenuItem({
         paddingHorizontal: DefaultAppStyles.GAP_SMALL,
         justifyContent: "space-between",
         alignItems: "center",
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
       }}
     >
       <View
diff --git a/apps/mobile/app/components/side-menu/side-menu-home.tsx b/apps/mobile/app/components/side-menu/side-menu-home.tsx
index 931648d4f..89de84521 100644
--- a/apps/mobile/app/components/side-menu/side-menu-home.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-home.tsx
@@ -67,7 +67,7 @@ export function SideMenuHome() {
         width: "100%",
         backgroundColor: colors.primary.background,
         gap: DefaultAppStyles.GAP,
-        paddingTop: DefaultAppStyles.GAP_SMALL
+        paddingTop: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <SideMenuHeader />
diff --git a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
index d3c16f1b6..8c65519a6 100644
--- a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
@@ -19,13 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { AppFontSize } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHeader } from "./side-menu-header";
-import { DefaultAppStyles } from "../../utils/styles";
 
 type SideMenuListEmptyProps = {
   placeholder: string;
+  isLoading?: boolean;
 };
 
 export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
@@ -40,7 +41,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
       <View
         style={{
           backgroundColor: colors.primary.background,
-          paddingTop: DefaultAppStyles.GAP_SMALL
+          paddingTop: DefaultAppStyles.GAP_VERTICAL
         }}
       >
         <SideMenuHeader />
@@ -52,9 +53,33 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
           flexGrow: 1
         }}
       >
-        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-          {props.placeholder}
-        </Paragraph>
+        {props.isLoading ? (
+          <View
+            style={{
+              flex: 1,
+              width: "100%",
+              paddingHorizontal: DefaultAppStyles.GAP
+            }}
+          >
+            {[0, 1, 2, 3, 4].map((i) => (
+              <View
+                key={"placeholder" + i}
+                style={{
+                  paddingVertical: DefaultAppStyles.GAP - 1,
+                  width: i === 4 ? "80%" : "100%",
+                  borderRadius: defaultBorderRadius,
+                  backgroundColor: colors.secondary.background,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
+                  opacity: 0.5
+                }}
+              />
+            ))}
+          </View>
+        ) : (
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+            {props.placeholder}
+          </Paragraph>
+        )}
       </View>
     </View>
   );
diff --git a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
index 21b733365..dfcf62358 100644
--- a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Notebook } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { FlatList, TextInput, View } from "react-native";
 import { db } from "../../common/database";
 import NotebookScreen from "../../screens/notebook";
@@ -45,6 +45,7 @@ useSideMenuNotebookSelectionStore.setState({
 export const SideMenuNotebooks = () => {
   const tree = useSideMenuNotebookTreeStore((state) => state.tree);
   const [notebooks, loading] = useNotebooks();
+  const [isLoading, setIsLoading] = useState(true);
   const { colors } = useThemeColors();
   const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
   const searchTimer = React.useRef<NodeJS.Timeout>();
@@ -82,6 +83,7 @@ export const SideMenuNotebooks = () => {
     (async () => {
       if (!loading) {
         loadRootNotebooks();
+        setIsLoading(false);
       }
     })();
   }, [loadRootNotebooks, loading]);
@@ -131,6 +133,7 @@ export const SideMenuNotebooks = () => {
       {!notebooks || notebooks.placeholders.length === 0 ? (
         <SideMenuListEmpty
           placeholder={strings.emptyPlaceholders("notebook")}
+          isLoading={isLoading}
         />
       ) : (
         <>
@@ -145,7 +148,7 @@ export const SideMenuNotebooks = () => {
               <View
                 style={{
                   backgroundColor: colors.primary.background,
-                  paddingTop: DefaultAppStyles.GAP_SMALL
+                  paddingTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <SideMenuHeader />
@@ -225,7 +228,7 @@ const NotebookItemWrapper = React.memo(
       <View
         style={{
           paddingHorizontal: DefaultAppStyles.GAP,
-          marginTop: index === 0 ? DefaultAppStyles.GAP : 0
+          marginTop: index === 0 ? DefaultAppStyles.GAP_VERTICAL : 0
         }}
       >
         <NotebookItem
diff --git a/apps/mobile/app/components/side-menu/side-menu-tags.tsx b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
index 14e840bf6..ea2afd2e8 100644
--- a/apps/mobile/app/components/side-menu/side-menu-tags.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
@@ -18,16 +18,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Tag, VirtualizedGrouping } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { FlashList } from "@shopify/flash-list";
 import React, { useEffect } from "react";
 import { TextInput, View } from "react-native";
-import { FlashList } from "@shopify/flash-list";
 import { DatabaseLogger, db } from "../../common/database";
 import { useDBItem, useTotalNotes } from "../../hooks/use-db-item";
 import { TaggedNotes } from "../../screens/notes/tagged";
+import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useTags } from "../../stores/use-tag-store";
-import { defaultBorderRadius, AppFontSize } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Properties } from "../properties";
 import AppIcon from "../ui/AppIcon";
@@ -36,8 +38,6 @@ import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHeader } from "./side-menu-header";
 import { SideMenuListEmpty } from "./side-menu-list-empty";
 import { useSideMenuTagsSelectionStore } from "./stores";
-import { strings } from "@notesnook/intl";
-import Navigation from "../../services/navigation";
 
 const TagItem = (props: {
   tags: VirtualizedGrouping<Tag>;
@@ -66,7 +66,8 @@ const TagItem = (props: {
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
-        marginTop: (props.id as number) === 0 ? DefaultAppStyles.GAP : 2
+        marginTop:
+          (props.id as number) === 0 ? DefaultAppStyles.GAP_VERTICAL : 2
       }}
     >
       {item ? (
@@ -171,9 +172,10 @@ const TagItem = (props: {
 };
 
 export const SideMenuTags = () => {
-  const [tags] = useTags();
+  const [tags, isLoading] = useTags();
   const { colors } = useThemeColors();
   const [filteredTags, setFilteredTags] = React.useState(tags);
+  const [loading, setLoading] = React.useState(true);
   const searchTimer = React.useRef<NodeJS.Timeout>();
   const lastQuery = React.useRef<string>();
 
@@ -213,11 +215,14 @@ export const SideMenuTags = () => {
     } else {
       setFilteredTags(tags);
     }
+    setLoading(false);
   }, [tags]);
 
   useEffect(() => {
-    updateTags();
-  }, [updateTags]);
+    if (!isLoading) {
+      updateTags();
+    }
+  }, [updateTags, isLoading]);
 
   const renderItem = React.useCallback(
     (info: { index: number }) => {
@@ -233,7 +238,10 @@ export const SideMenuTags = () => {
       }}
     >
       {!tags || tags?.placeholders.length === 0 ? (
-        <SideMenuListEmpty placeholder={strings.emptyPlaceholders("tag")} />
+        <SideMenuListEmpty
+          placeholder={strings.emptyPlaceholders("tag")}
+          isLoading={loading}
+        />
       ) : (
         <>
           <FlashList
@@ -246,7 +254,7 @@ export const SideMenuTags = () => {
               <View
                 style={{
                   backgroundColor: colors.primary.background,
-                  paddingTop: DefaultAppStyles.GAP_SMALL
+                  paddingTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               >
                 <SideMenuHeader />
diff --git a/apps/mobile/app/components/side-menu/user-status.js b/apps/mobile/app/components/side-menu/user-status.js
index f89952ba5..a55838a2b 100644
--- a/apps/mobile/app/components/side-menu/user-status.js
+++ b/apps/mobile/app/components/side-menu/user-status.js
@@ -36,6 +36,7 @@ import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import { TimeSince } from "../ui/time-since";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const UserStatus = () => {
   const { colors, isDark } = useThemeColors();
@@ -76,7 +77,7 @@ export const UserStatus = () => {
           style={{
             flexDirection: "row",
             justifyContent: "flex-start",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             borderRadius: 0,
             alignItems: "center",
             gap: 10
diff --git a/apps/mobile/app/components/tip/index.tsx b/apps/mobile/app/components/tip/index.tsx
index 523ac4c12..353d1dbe2 100644
--- a/apps/mobile/app/components/tip/index.tsx
+++ b/apps/mobile/app/components/tip/index.tsx
@@ -29,6 +29,7 @@ import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Tip = ({
   tip,
@@ -52,10 +53,10 @@ export const Tip = ({
       style={[
         {
           borderRadius: 10,
-          padding: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           width: "100%",
           alignSelf: "center",
-          paddingVertical: 12,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
           backgroundColor: colors.secondary.background
         },
         style
@@ -73,9 +74,8 @@ export const Tip = ({
           fontSize={AppFontSize.xxxs}
           iconSize={AppFontSize.xs}
           style={{
-            width: undefined,
-            height: 22,
-            paddingHorizontal: 4,
+            paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
             alignSelf: "flex-start",
             borderRadius: 100,
             borderWidth: 1,
@@ -102,7 +102,7 @@ export const Tip = ({
             style={{
               width: undefined,
               height: 25,
-              paddingHorizontal: 4,
+              paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
               alignSelf: "flex-start",
               borderRadius: 100,
               borderWidth: 1,
@@ -125,7 +125,7 @@ export const Tip = ({
           style={{
             borderRadius: 10,
             overflow: "hidden",
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Image
@@ -149,7 +149,7 @@ export const Tip = ({
             text: colors.primary.accentForeground
           }}
           style={{
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           onPress={() => {
             switch (tip.button?.action) {
@@ -174,7 +174,7 @@ Tip.present = async (tip: TTip) => {
         neverShowAgain={true}
         style={{
           backgroundColor: "transparent",
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       />
     )
diff --git a/apps/mobile/app/components/toast/index.tsx b/apps/mobile/app/components/toast/index.tsx
index 3608d9d81..5e289606e 100644
--- a/apps/mobile/app/components/toast/index.tsx
+++ b/apps/mobile/app/components/toast/index.tsx
@@ -135,8 +135,8 @@ export const Toast = ({ context = "global" }) => {
           backgroundColor: isDark ? colors.static.black : colors.static.white,
           alignSelf: "center",
           borderRadius: defaultBorderRadius * 2,
-          paddingVertical: 12,
-          paddingHorizontal: 12,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+          paddingHorizontal: DefaultAppStyles.GAP,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center",
diff --git a/apps/mobile/app/components/ui/button/index.tsx b/apps/mobile/app/components/ui/button/index.tsx
index 517303a99..f513ac238 100644
--- a/apps/mobile/app/components/ui/button/index.tsx
+++ b/apps/mobile/app/components/ui/button/index.tsx
@@ -36,6 +36,7 @@ import { ProTag } from "../../premium/pro-tag";
 import { Pressable, PressableProps, useButton } from "../pressable";
 import Heading from "../typography/heading";
 import Paragraph from "../typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 export interface ButtonProps extends PressableProps {
   height?: number;
   icon?: string;
@@ -121,12 +122,13 @@ export const Button = ({
       customOpacity={buttonType?.opacity}
       customAlpha={buttonType?.alpha}
       style={{
-        height: typeof height === "number" ? height * growFactor : height,
+        // height: typeof height === "number" ? height * growFactor : height,
         width:
           typeof width === "number"
             ? width * growFactor
             : (width as DimensionValue) || undefined,
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         borderRadius: defaultBorderRadius,
         alignSelf: "center",
         justifyContent: "center",
diff --git a/apps/mobile/app/components/ui/icon-button/index.tsx b/apps/mobile/app/components/ui/icon-button/index.tsx
index 9b8cc2d92..f3a605fd3 100644
--- a/apps/mobile/app/components/ui/icon-button/index.tsx
+++ b/apps/mobile/app/components/ui/icon-button/index.tsx
@@ -19,7 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React, { useRef } from "react";
-import { ColorValue, GestureResponderEvent, TextStyle } from "react-native";
+import {
+  ColorValue,
+  GestureResponderEvent,
+  TextStyle,
+  useWindowDimensions
+} from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { hexToRGBA, RGB_Linear_Shade } from "../../../utils/colors";
 import { AppFontSize } from "../../../utils/size";
@@ -59,6 +64,8 @@ export const IconButton = ({
 }: IconButtonProps) => {
   const { colors } = useThemeColors();
   const localRef = useRef(null);
+  const { fontScale } = useWindowDimensions();
+  const growFactor = 1 + (fontScale - 1) / 10;
 
   const _onLongPress = (event: GestureResponderEvent) => {
     if (onLongPress) {
@@ -85,11 +92,11 @@ export const IconButton = ({
       onLongPress={_onLongPress}
       type={type}
       style={{
-        width: 40,
-        height: 40,
         justifyContent: "center",
         alignItems: "center",
         borderRadius: 100,
+        width: 40 * growFactor,
+        height: 40 * growFactor,
         ...style
       }}
     >
diff --git a/apps/mobile/app/components/ui/input/index.tsx b/apps/mobile/app/components/ui/input/index.tsx
index 42ffca46a..7df22e9f6 100644
--- a/apps/mobile/app/components/ui/input/index.tsx
+++ b/apps/mobile/app/components/ui/input/index.tsx
@@ -42,6 +42,7 @@ import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
 import phone from "phone";
 import isURL from "validator/lib/isURL";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 interface InputProps extends TextInputProps {
   fwdRef?: RefObject<TextInput>;
@@ -97,7 +98,7 @@ const Input = ({
   onBlurInput,
   onPress,
   height = 45,
-  fontSize = AppFontSize.md,
+  fontSize = AppFontSize.sm,
   onFocusInput,
   buttons,
   marginRight,
@@ -222,9 +223,11 @@ const Input = ({
     justifyContent: "space-between",
     alignItems: "center",
     flexGrow: 1,
-    height: height || 50,
-    paddingHorizontal: 12,
-    paddingRight: buttons || button || secureTextEntry || error ? 6 : 12,
+    paddingHorizontal: DefaultAppStyles.GAP,
+    paddingRight:
+      buttons || button || secureTextEntry || error
+        ? DefaultAppStyles.GAP
+        : DefaultAppStyles.GAP,
     ...containerStyle
   };
 
@@ -233,11 +236,10 @@ const Input = ({
     fontSize: fontSize,
     color:
       onPress && loading ? colors.primary.accent : colors.primary.paragraph,
-    paddingVertical: 0,
-    paddingBottom: 2.5,
     flexGrow: 1,
-    height: height || 50,
     flexShrink: 1,
+    paddingBottom: DefaultAppStyles.GAP_VERTICAL - 2,
+    paddingTop: DefaultAppStyles.GAP_VERTICAL - 2,
     fontFamily: "OpenSans-Regular",
     ...(inputStyle as ViewStyle)
   };
@@ -247,10 +249,8 @@ const Input = ({
       <View
         importantForAccessibility="yes"
         style={{
-          height: height,
           marginBottom: marginBottom,
           flexGrow: flexGrow,
-          maxHeight: height,
           marginRight: marginRight,
           ...wrapperStyle
         }}
@@ -307,7 +307,7 @@ const Input = ({
                   marginLeft: 5
                 }}
                 color={
-                  secureEntry ? colors.primary.icon : colors.primary.accent
+                  secureEntry ? colors.secondary.icon : colors.primary.accent
                 }
               />
             )}
@@ -350,7 +350,7 @@ const Input = ({
                 position: "absolute",
                 backgroundColor: colors.secondary.background,
                 paddingVertical: 3,
-                paddingHorizontal: 5,
+                paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
                 borderRadius: 2.5,
                 ...getElevationStyle(2),
                 top: 0
diff --git a/apps/mobile/app/components/ui/reminder-time/index.tsx b/apps/mobile/app/components/ui/reminder-time/index.tsx
index 2e846d5d9..cc127be88 100644
--- a/apps/mobile/app/components/ui/reminder-time/index.tsx
+++ b/apps/mobile/app/components/ui/reminder-time/index.tsx
@@ -25,6 +25,7 @@ import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button, ButtonProps } from "../button";
 import { getFormattedReminderTime } from "@notesnook/common";
 import { Reminder } from "@notesnook/core";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const ReminderTime = ({
   checkIsActive = true,
@@ -69,7 +70,7 @@ export const ReminderTime = ({
         height: "auto",
         borderRadius: defaultBorderRadius,
         borderColor: colors.primary.border,
-        paddingHorizontal: 6,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL,
         ...(style as ViewStyle)
       }}
       {...props}
diff --git a/apps/mobile/app/components/ui/tag/index.tsx b/apps/mobile/app/components/ui/tag/index.tsx
index 44b92d7e8..24371a2d2 100644
--- a/apps/mobile/app/components/ui/tag/index.tsx
+++ b/apps/mobile/app/components/ui/tag/index.tsx
@@ -21,6 +21,7 @@ import React from "react";
 import { ViewStyle } from "react-native";
 import { AppFontSize } from "../../../utils/size";
 import Paragraph from "../typography/paragraph";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function Tag({
   text,
@@ -41,10 +42,10 @@ export default function Tag({
       style={{
         backgroundColor: background || colors.primary.accent,
         borderRadius: 100,
-        paddingHorizontal: 4,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
         paddingVertical: 2,
         marginLeft: 2,
-        marginTop: -10,
+        marginTop: -DefaultAppStyles.GAP_VERTICAL,
         height: 20,
         textAlignVertical: "center",
         textAlign: "center",
diff --git a/apps/mobile/app/components/walkthroughs/index.tsx b/apps/mobile/app/components/walkthroughs/index.tsx
index b661e9a9c..a382e700f 100644
--- a/apps/mobile/app/components/walkthroughs/index.tsx
+++ b/apps/mobile/app/components/walkthroughs/index.tsx
@@ -30,6 +30,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import walkthroughs, { TStep } from "./walkthroughs";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 export const Walkthrough = ({
   steps,
   canSkip = true
@@ -51,7 +52,7 @@ export const Walkthrough = ({
       style={{
         justifyContent: "center",
         alignItems: "center",
-        padding: 12,
+        padding: DefaultAppStyles.GAP,
         paddingBottom: 0
       }}
     >
@@ -74,7 +75,7 @@ export const Walkthrough = ({
         <Button
           style={{
             height: 30,
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
           textStyle={{
             textDecorationLine: "underline"
@@ -91,7 +92,7 @@ export const Walkthrough = ({
         style={{
           borderRadius: 100,
           height: 40,
-          marginTop: 20
+          marginTop: DefaultAppStyles.GAP
         }}
         onPress={async () => {
           switch (step.button?.type) {
@@ -114,7 +115,7 @@ export const Walkthrough = ({
         <Button
           style={{
             height: 30,
-            marginTop: 10
+            marginTop: DefaultAppStyles.GAP
           }}
           textStyle={{
             textDecorationLine: "underline"
diff --git a/apps/mobile/app/components/walkthroughs/walkthroughs.tsx b/apps/mobile/app/components/walkthroughs/walkthroughs.tsx
index ae9afde68..2322fcf8e 100644
--- a/apps/mobile/app/components/walkthroughs/walkthroughs.tsx
+++ b/apps/mobile/app/components/walkthroughs/walkthroughs.tsx
@@ -39,6 +39,7 @@ import Seperator from "../ui/seperator";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export type TStep = {
   text?: string;
@@ -79,7 +80,7 @@ const NotebookWelcome = () => {
     <View
       style={{
         width: "100%",
-        padding: 12,
+        padding: DefaultAppStyles.GAP,
         backgroundColor: colors.secondary.background,
         borderRadius: 10,
         ...getContainerBorder(colors.secondary.background)
@@ -87,12 +88,12 @@ const NotebookWelcome = () => {
     >
       <View
         style={{
-          padding: 12,
+          padding: DefaultAppStyles.GAP,
           width: "100%",
           backgroundColor: colors.primary.background,
           ...getElevationStyle(3),
           borderRadius: 10,
-          marginVertical: 12
+          marginVertical: DefaultAppStyles.GAP
         }}
       >
         <Heading size={AppFontSize.md} color={colors.primary.heading}>
@@ -102,7 +103,7 @@ const NotebookWelcome = () => {
 
         <Paragraph
           style={{
-            marginTop: 5
+            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
           size={AppFontSize.xs}
           color={colors.secondary.paragraph}
@@ -134,7 +135,7 @@ const notebooks: { id: string; steps: TStep[] } = {
         <View
           style={{
             width: "100%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
             borderRadius: 10,
             ...getContainerBorder(colors.secondary.background)
@@ -142,7 +143,7 @@ const notebooks: { id: string; steps: TStep[] } = {
         >
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "100%",
               backgroundColor: colors.primary.background,
               ...getElevationStyle(3),
@@ -157,7 +158,7 @@ const notebooks: { id: string; steps: TStep[] } = {
 
             <Paragraph
               style={{
-                marginTop: 5
+                marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
               }}
               size={AppFontSize.xs}
               color={colors.secondary.paragraph}
@@ -167,12 +168,12 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "90%",
               backgroundColor: colors.primary.background,
               borderRadius: 10,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph color={colors.primary.accent}>
@@ -186,13 +187,13 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
-              paddingVertical: 12,
+              padding: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               width: "80%",
               backgroundColor: colors.primary.background,
               borderRadius: defaultBorderRadius,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph size={AppFontSize.xs}>
@@ -206,13 +207,13 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "80%",
               backgroundColor: colors.primary.background,
               borderRadius: defaultBorderRadius,
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph size={AppFontSize.xs}>
@@ -226,12 +227,12 @@ const notebooks: { id: string; steps: TStep[] } = {
           </View>
           <View
             style={{
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               width: "90%",
               backgroundColor: colors.primary.background,
               borderRadius: 10,
               alignSelf: "flex-end",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Paragraph color={colors.primary.accent}>
@@ -257,7 +258,7 @@ const notebooks: { id: string; steps: TStep[] } = {
         <View
           style={{
             paddingHorizontal: 20,
-            paddingVertical: 12
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           {/* <PinItem
@@ -370,7 +371,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         onPress={() => {
@@ -386,7 +387,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         onPress={() => {
@@ -401,7 +402,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         icon="bug"
@@ -411,7 +412,7 @@ const Support = () => {
       <Button
         style={{
           justifyContent: "flex-start",
-          marginBottom: 10,
+          marginBottom: DefaultAppStyles.GAP_VERTICAL,
           width: "90%"
         }}
         icon="mail"
diff --git a/apps/mobile/app/hooks/use-app-events.tsx b/apps/mobile/app/hooks/use-app-events.tsx
index 64401720f..c164a6595 100644
--- a/apps/mobile/app/hooks/use-app-events.tsx
+++ b/apps/mobile/app/hooks/use-app-events.tsx
@@ -40,7 +40,6 @@ import {
   NativeModules,
   Platform
 } from "react-native";
-import RNBootSplash from "react-native-bootsplash";
 import { checkVersion } from "react-native-check-version";
 import Config from "react-native-config";
 import * as RNIap from "react-native-iap";
@@ -88,7 +87,6 @@ import { refreshAllStores } from "../stores/create-db-collection-store";
 import { useAttachmentStore } from "../stores/use-attachment-store";
 import { useMessageStore } from "../stores/use-message-store";
 import { useSettingStore } from "../stores/use-setting-store";
-import { changeSystemBarColors } from "../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../stores/use-user-store";
 import { updateStatusBarColor } from "../utils/colors";
 import { BETA } from "../utils/constants";
@@ -391,9 +389,6 @@ const IsDatabaseMigrationRequired = () => {
 const initializeDatabase = async (password?: string) => {
   if (useUserStore.getState().appLocked) return;
   if (!db.isInitialized) {
-    RNBootSplash.hide({ fade: false });
-    changeSystemBarColors();
-
     DatabaseLogger.info("Initializing database");
     try {
       await setupDatabase(password);
@@ -408,11 +403,11 @@ const initializeDatabase = async (password?: string) => {
   if (IsDatabaseMigrationRequired()) return;
 
   if (db.isInitialized) {
+    useSettingStore.getState().setAppLoading(false);
     Notifications.setupReminders(true);
     if (SettingsService.get().notifNotes) {
       Notifications.pinQuickNote(false);
     }
-    useSettingStore.getState().setAppLoading(false);
     DatabaseLogger.info("Database initialized");
   }
   Walkthrough.init();
diff --git a/apps/mobile/app/hooks/use-delay-layout.ts b/apps/mobile/app/hooks/use-delay-layout.ts
index b5cb1a83a..6e02a6768 100644
--- a/apps/mobile/app/hooks/use-delay-layout.ts
+++ b/apps/mobile/app/hooks/use-delay-layout.ts
@@ -18,20 +18,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useEffect, useState } from "react";
-import { InteractionManager } from "react-native";
 
 export const useDelayLayout = (delay: number) => {
   const [loading, setLoading] = useState(true);
-
   useEffect(() => {
-    let cancel: () => void;
     const timeout = setTimeout(() => {
-      cancel = InteractionManager.runAfterInteractions(() => {
-        setLoading(false);
-      }).cancel;
+      setLoading(false);
     }, delay);
     return () => {
-      cancel && cancel();
       clearTimeout(timeout);
     };
   }, [delay]);
diff --git a/apps/mobile/app/navigation/fluid-panels-view.tsx b/apps/mobile/app/navigation/fluid-panels-view.tsx
index 1e73f51e5..62fb5cd68 100644
--- a/apps/mobile/app/navigation/fluid-panels-view.tsx
+++ b/apps/mobile/app/navigation/fluid-panels-view.tsx
@@ -48,7 +48,6 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { notesnook } from "../../e2e/test.ids";
 import { db } from "../common/database";
 import { FluidPanels } from "../components/fluid-panels";
-import { SideMenu } from "../components/side-menu";
 import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
 import useGlobalSafeAreaInsets from "../hooks/use-global-safe-area-insets";
 import { useShortcutManager } from "../hooks/use-shortcut-manager";
@@ -60,7 +59,6 @@ import {
   editorState,
   getAppState
 } from "../screens/editor/tiptap/utils";
-import { EditorWrapper } from "../screens/editor/wrapper";
 import { DDS } from "../services/device-detection";
 import {
   eSendEvent,
@@ -85,6 +83,9 @@ const valueLimiter = (value: number, min: number, max: number) => {
   return value < min ? min : value > max ? max : value;
 };
 
+let SideMenu: any = null;
+let EditorWrapper: any = null;
+
 export const FluidPanelsView = React.memo(
   () => {
     const { colors } = useThemeColors();
@@ -99,6 +100,16 @@ export const FluidPanelsView = React.memo(
     const animatedTranslateY = useSharedValue(-9999);
     const overlayRef = useRef<Animated.View>(null);
     const [orientation, setOrientation] = useState(getInitialOrientation());
+    const appLoading = useSettingStore((state) => state.isAppLoading);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+      if (!appLoading) {
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 1000);
+      }
+    }, [appLoading]);
 
     useShortcutManager({
       onShortcutPressed: async (item) => {
@@ -407,6 +418,11 @@ export const FluidPanelsView = React.memo(
       };
     }, []);
 
+    if (!isLoading) {
+      SideMenu = require("../components/side-menu").SideMenu;
+      EditorWrapper = require("../screens/editor/wrapper").EditorWrapper;
+    }
+
     return (
       <View
         onLayout={_onLayout}
@@ -452,7 +468,7 @@ export const FluidPanelsView = React.memo(
               }}
             >
               <ScopedThemeProvider value="navigationMenu">
-                <SideMenu />
+                {isLoading ? null : <SideMenu />}
               </ScopedThemeProvider>
             </View>
 
@@ -504,7 +520,7 @@ export const FluidPanelsView = React.memo(
             </View>
 
             <ScopedThemeProvider value="editor">
-              <EditorWrapper key="3" widths={PANE_WIDTHS} />
+              {isLoading ? null : <EditorWrapper widths={PANE_WIDTHS} />}
             </ScopedThemeProvider>
           </FluidPanels>
         ) : null}
@@ -515,6 +531,8 @@ export const FluidPanelsView = React.memo(
 );
 FluidPanelsView.displayName = "FluidPanelsView";
 
+export default FluidPanelsView;
+
 const onChangeTab = async (event: { i: number; from: number }) => {
   if (event.i === 2) {
     editorState().movedAway = false;
diff --git a/apps/mobile/app/navigation/navigation-stack.tsx b/apps/mobile/app/navigation/navigation-stack.tsx
index 4d49cbfe9..d170ec6a1 100644
--- a/apps/mobile/app/navigation/navigation-stack.tsx
+++ b/apps/mobile/app/navigation/navigation-stack.tsx
@@ -17,25 +17,11 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
-import AppLockedScreen from "../components/app-lock-overlay";
-import Auth from "../components/auth";
-import Intro from "../components/intro";
 import { hideAllTooltips } from "../hooks/use-tooltip";
-import Favorites from "../screens/favorites";
-import Home from "../screens/home";
-import NotebookScreen from "../screens/notebook";
-import { ColoredNotes } from "../screens/notes/colored";
-import { Monographs } from "../screens/notes/monographs";
-import { TaggedNotes } from "../screens/notes/tagged";
-import Reminders from "../screens/reminders";
-import { Search } from "../screens/search";
-import Settings from "../screens/settings";
-import Trash from "../screens/trash";
 import SettingsService from "../services/settings";
 import useNavigationStore, {
   RouteParams
@@ -43,14 +29,20 @@ import useNavigationStore, {
 import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { fluidTabsRef, rootNavigatorRef } from "../utils/global-refs";
-import { FluidPanelsView } from "./fluid-panels-view";
-import LinkNotebooks from "../screens/link-notebooks";
-import { MoveNotebook } from "../screens/move-notebook";
-import { MoveNotes } from "../screens/move-notes";
 
 const RootStack = createNativeStackNavigator();
 const AppStack = createNativeStackNavigator();
 
+let Notes: any = null;
+let Notebook: any = null;
+let Search: any = null;
+let Favorites: any = null;
+let Trash: any = null;
+let Reminders: any = null;
+let Monographs: any = null;
+let TaggedNotes: any = null;
+let ColoredNotes: any = null;
+
 const AppNavigation = React.memo(
   () => {
     const { colors } = useThemeColors();
@@ -72,23 +64,80 @@ const AppNavigation = React.memo(
           }
         }}
       >
-        <AppStack.Screen name="Notes" component={Home as any} />
-        <AppStack.Screen name="Favorites" component={Favorites as any} />
-        <AppStack.Screen name="Trash" component={Trash as any} />
-        <AppStack.Screen name="TaggedNotes" component={TaggedNotes as any} />
-        <AppStack.Screen name="ColoredNotes" component={ColoredNotes as any} />
-        <AppStack.Screen name="Reminders" component={Reminders as any} />
+        <AppStack.Screen
+          name="Notes"
+          getComponent={() => {
+            Notes = Notes || require("../screens/home").default;
+            return Notes;
+          }}
+        />
+
+        <AppStack.Screen
+          name="Favorites"
+          getComponent={() => {
+            Favorites = Favorites || require("../screens/favorites").default;
+            return Favorites;
+          }}
+        />
+
+        <AppStack.Screen
+          name="Trash"
+          getComponent={() => {
+            Trash = Trash || require("../screens/trash").default;
+            return Trash;
+          }}
+        />
+
+        <AppStack.Screen
+          name="TaggedNotes"
+          getComponent={() => {
+            TaggedNotes =
+              TaggedNotes || require("../screens/notes/tagged").default;
+            return TaggedNotes;
+          }}
+        />
+
+        <AppStack.Screen
+          name="ColoredNotes"
+          getComponent={() => {
+            ColoredNotes =
+              ColoredNotes || require("../screens/notes/colored").default;
+            return ColoredNotes;
+          }}
+        />
+
+        <AppStack.Screen
+          name="Reminders"
+          getComponent={() => {
+            Reminders = Reminders || require("../screens/reminders").default;
+            return Reminders;
+          }}
+        />
+
         <AppStack.Screen
           name="Monographs"
-          initialParams={{
-            item: { type: "monograph" },
-            canGoBack: false,
-            title: strings.monographs()
+          getComponent={() => {
+            Monographs =
+              Monographs || require("../screens/notes/monographs").default;
+            return Monographs;
+          }}
+        />
+
+        <AppStack.Screen
+          name="Notebook"
+          getComponent={() => {
+            Notebook = Notebook || require("../screens/notebook").default;
+            return Notebook;
+          }}
+        />
+
+        <AppStack.Screen
+          name="Search"
+          getComponent={() => {
+            Search = Search || require("../screens/search").default;
+            return Search;
           }}
-          component={Monographs as any}
         />
-        <AppStack.Screen name="Notebook" component={NotebookScreen as any} />
-        <AppStack.Screen name="Search" component={Search as any} />
       </AppStack.Navigator>
     );
   },
@@ -96,6 +145,15 @@ const AppNavigation = React.memo(
 );
 AppNavigation.displayName = "AppNavigation";
 
+let Intro: any = null;
+let Auth: any = null;
+let FluidPanelsView: any = null;
+let AppLock: any = null;
+let LinkNotebooks: any = null;
+let MoveNotebook: any = null;
+let MoveNotes: any = null;
+let Settings: any = null;
+
 export const RootNavigation = () => {
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
@@ -125,17 +183,72 @@ export const RootNavigation = () => {
         }}
         initialRouteName={introCompleted ? "FluidPanelsView" : "Welcome"}
       >
-        <RootStack.Screen name="Welcome" component={Intro as any} />
-        <RootStack.Screen name="Auth" component={Auth as any} />
-        <RootStack.Screen name="FluidPanelsView" component={FluidPanelsView} />
-        <RootStack.Screen name="AppLock" component={AppLockedScreen} />
+        <RootStack.Screen
+          name="Welcome"
+          getComponent={() => {
+            Intro = Intro || require("../components/intro").default;
+            return Intro;
+          }}
+        />
+        <RootStack.Screen
+          name="Auth"
+          getComponent={() => {
+            Auth = Auth || require("../components/auth").default;
+            return Auth;
+          }}
+        />
+
+        <RootStack.Screen
+          name="FluidPanelsView"
+          getComponent={() => {
+            FluidPanelsView =
+              FluidPanelsView ||
+              require("../navigation/fluid-panels-view").default;
+            return FluidPanelsView;
+          }}
+        />
+
+        <RootStack.Screen
+          name="AppLock"
+          getComponent={() => {
+            AppLock = AppLock || require("../screens/app-lock").default;
+            return AppLock;
+          }}
+        />
+
         <RootStack.Screen
           name="LinkNotebooks"
-          component={LinkNotebooks as any}
+          getComponent={() => {
+            LinkNotebooks =
+              LinkNotebooks || require("../screens/link-notebooks").default;
+            return LinkNotebooks;
+          }}
+        />
+
+        <RootStack.Screen
+          name="MoveNotebook"
+          getComponent={() => {
+            MoveNotebook =
+              MoveNotebook || require("../screens/move-notebook").default;
+            return MoveNotebook;
+          }}
+        />
+
+        <RootStack.Screen
+          name="MoveNotes"
+          getComponent={() => {
+            MoveNotes = MoveNotes || require("../screens/move-notes").default;
+            return MoveNotes;
+          }}
+        />
+
+        <RootStack.Screen
+          name="Settings"
+          getComponent={() => {
+            Settings = Settings || require("../screens/settings").default;
+            return Settings;
+          }}
         />
-        <RootStack.Screen name="MoveNotebook" component={MoveNotebook as any} />
-        <RootStack.Screen name="MoveNotes" component={MoveNotes as any} />
-        <AppStack.Screen name="Settings" component={Settings} />
       </RootStack.Navigator>
     </NavigationContainer>
   );
diff --git a/apps/mobile/app/components/app-lock-overlay/index.tsx b/apps/mobile/app/screens/app-lock/index.tsx
similarity index 92%
rename from apps/mobile/app/components/app-lock-overlay/index.tsx
rename to apps/mobile/app/screens/app-lock/index.tsx
index d26a700b2..4b4942a4f 100644
--- a/apps/mobile/app/components/app-lock-overlay/index.tsx
+++ b/apps/mobile/app/screens/app-lock/index.tsx
@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useCallback, useEffect, useRef } from "react";
 import {
   AppStateStatus,
+  BackHandler,
   Platform,
   TextInput,
   useWindowDimensions,
@@ -45,15 +46,16 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
 import { AppFontSize } from "../../utils/size";
-import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
-import Seperator from "../ui/seperator";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
+import { Toast } from "../../components/toast";
+import { Button } from "../../components/ui/button";
+import { IconButton } from "../../components/ui/icon-button";
+import Input from "../../components/ui/input";
+import Seperator from "../../components/ui/seperator";
+import Heading from "../../components/ui/typography/heading";
+import Paragraph from "../../components/ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const getUser = () => {
   const user = MMKV.getString("user");
@@ -203,6 +205,18 @@ const AppLockedScreen = () => {
     }
   }, [appState, onUnlockAppRequested, appLocked]);
 
+  useEffect(() => {
+    let handler: any;
+    if (appLocked) {
+      handler = BackHandler.addEventListener("hardwareBackPress", () => {
+        return true;
+      });
+    }
+    return () => {
+      handler?.remove();
+    };
+  }, [appLocked]);
+
   return (
     <KeyboardAwareScrollView
       style={{
@@ -228,9 +242,9 @@ const AppLockedScreen = () => {
               : Platform.OS == "ios"
               ? "95%"
               : "100%",
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginBottom: 30,
-          marginTop: 15,
+          marginTop: DefaultAppStyles.GAP,
           alignSelf: "center"
         }}
       >
@@ -269,7 +283,7 @@ const AppLockedScreen = () => {
         <View
           style={{
             width: "100%",
-            padding: 12,
+            padding: DefaultAppStyles.GAP,
             backgroundColor: colors.primary.background
           }}
         >
diff --git a/apps/mobile/app/screens/editor/index.tsx b/apps/mobile/app/screens/editor/index.tsx
index c9e844ac7..9da23b5cc 100755
--- a/apps/mobile/app/screens/editor/index.tsx
+++ b/apps/mobile/app/screens/editor/index.tsx
@@ -348,7 +348,10 @@ const useLockedNoteHandler = () => {
       }),
       eSubscribeEvent(eUnlockWithPassword, onSubmit)
     ];
-    if (tabRef.current?.session?.locked && fluidTabsRef.current?.page() === 2) {
+    if (
+      tabRef.current?.session?.locked &&
+      fluidTabsRef.current?.page() === "editor"
+    ) {
       unlock();
     }
     return () => {
diff --git a/apps/mobile/app/screens/editor/loading.tsx b/apps/mobile/app/screens/editor/loading.tsx
index 4e54bc0ec..4ded193b4 100644
--- a/apps/mobile/app/screens/editor/loading.tsx
+++ b/apps/mobile/app/screens/editor/loading.tsx
@@ -40,6 +40,7 @@ import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { useEditor } from "./tiptap/use-editor";
 import { editorState } from "./tiptap/utils";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const EditorOverlay = ({
   editorId = "",
@@ -199,7 +200,7 @@ const EditorOverlay = ({
 
         <View
           style={{
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             width: "100%",
             alignItems: "flex-start"
           }}
@@ -210,12 +211,12 @@ const EditorOverlay = ({
                 height: 30,
                 backgroundColor: colors.secondary.background,
                 borderRadius: 100,
-                marginBottom: 10,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL,
                 justifyContent: "flex-start",
                 alignItems: "center",
                 flexDirection: "row",
-                paddingHorizontal: 10,
-                marginTop: 5,
+                paddingHorizontal: DefaultAppStyles.GAP,
+                marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                 borderWidth: 1,
                 borderColor: colors.primary.border
               }}
@@ -248,7 +249,7 @@ const EditorOverlay = ({
             style={{
               height: 12,
               width: "100%",
-              marginTop: 10,
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
               flexDirection: "row"
             }}
           >
@@ -287,7 +288,7 @@ const EditorOverlay = ({
               width: "100%",
               backgroundColor: colors.secondary.background,
               borderRadius: defaultBorderRadius,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
 
@@ -297,7 +298,7 @@ const EditorOverlay = ({
               width: "100%",
               backgroundColor: colors.secondary.background,
               borderRadius: defaultBorderRadius,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
 
@@ -307,7 +308,7 @@ const EditorOverlay = ({
               width: 200,
               backgroundColor: colors.secondary.background,
               borderRadius: defaultBorderRadius,
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           />
 
@@ -316,7 +317,7 @@ const EditorOverlay = ({
               <Button
                 type="error"
                 style={{
-                  marginTop: 20,
+                  marginTop: DefaultAppStyles.GAP,
                   alignSelf: "flex-start",
                   borderRadius: 100,
                   height: 40
@@ -334,7 +335,7 @@ const EditorOverlay = ({
                 color={colors.secondary.paragraph}
                 style={{
                   maxWidth: "100%",
-                  marginTop: 5
+                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
               >
                 {strings.editorFailedToLoad()}
diff --git a/apps/mobile/app/screens/editor/readonly-editor.tsx b/apps/mobile/app/screens/editor/readonly-editor.tsx
index 95b43326f..3ed42f5f6 100644
--- a/apps/mobile/app/screens/editor/readonly-editor.tsx
+++ b/apps/mobile/app/screens/editor/readonly-editor.tsx
@@ -36,6 +36,7 @@ import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { db } from "../../common/database";
 import { i18n } from "@lingui/core";
 import { defaultBorderRadius } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const onShouldStartLoadWithRequest = (request: ShouldStartLoadRequest) => {
   if (request.url.includes("https")) {
@@ -206,7 +207,7 @@ export function ReadonlyEditor(props: {
           >
             <View
               style={{
-                paddingHorizontal: 12,
+                paddingHorizontal: DefaultAppStyles.GAP,
                 width: "100%",
                 alignItems: "flex-start"
               }}
@@ -224,7 +225,7 @@ export function ReadonlyEditor(props: {
                 style={{
                   height: 12,
                   width: "100%",
-                  marginTop: 10,
+                  marginTop: DefaultAppStyles.GAP_VERTICAL,
                   flexDirection: "row"
                 }}
               >
@@ -263,7 +264,7 @@ export function ReadonlyEditor(props: {
                   width: "100%",
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               />
 
@@ -273,7 +274,7 @@ export function ReadonlyEditor(props: {
                   width: "100%",
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               />
 
@@ -283,7 +284,7 @@ export function ReadonlyEditor(props: {
                   width: 200,
                   backgroundColor: colors.secondary.background,
                   borderRadius: defaultBorderRadius,
-                  marginTop: 10
+                  marginTop: DefaultAppStyles.GAP_VERTICAL
                 }}
               />
             </View>
diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor.ts b/apps/mobile/app/screens/editor/tiptap/use-editor.ts
index a33263940..d9faad8b5 100644
--- a/apps/mobile/app/screens/editor/tiptap/use-editor.ts
+++ b/apps/mobile/app/screens/editor/tiptap/use-editor.ts
@@ -649,7 +649,7 @@ export const useEditor = (
 
           if (lastTabFocused.current !== tabId) return;
 
-          if (fluidTabsRef.current?.page() === 2) {
+          if (fluidTabsRef.current?.page() === "editor") {
             state.current.movedAway = false;
           }
 
diff --git a/apps/mobile/app/screens/editor/wrapper.tsx b/apps/mobile/app/screens/editor/wrapper.tsx
index 733f67811..640ec5475 100644
--- a/apps/mobile/app/screens/editor/wrapper.tsx
+++ b/apps/mobile/app/screens/editor/wrapper.tsx
@@ -123,3 +123,5 @@ export const EditorWrapper = ({ widths }: { widths: any }) => {
     </View>
   );
 };
+
+export default EditorWrapper;
diff --git a/apps/mobile/app/screens/link-notebooks/index.tsx b/apps/mobile/app/screens/link-notebooks/index.tsx
index 36cc8e53a..398d3d849 100644
--- a/apps/mobile/app/screens/link-notebooks/index.tsx
+++ b/apps/mobile/app/screens/link-notebooks/index.tsx
@@ -251,7 +251,7 @@ const LinkNotebooks = (props: NavigationProps<"LinkNotebooks">) => {
                   AddNotebookSheet.present(
                     undefined,
                     undefined,
-                    "link-notebooks",
+                    "global",
                     undefined,
                     false,
                     searchQuery.current
diff --git a/apps/mobile/app/screens/move-notebook/index.tsx b/apps/mobile/app/screens/move-notebook/index.tsx
index 609fcbb9c..6c0d23ccb 100644
--- a/apps/mobile/app/screens/move-notebook/index.tsx
+++ b/apps/mobile/app/screens/move-notebook/index.tsx
@@ -373,7 +373,7 @@ const NotebookItemWrapper = React.memo(
             AddNotebookSheet.present(
               undefined,
               item.notebook,
-              "move-notebook",
+              "global",
               undefined,
               false
             );
@@ -396,3 +396,5 @@ const NotebookItemWrapper = React.memo(
 NotebookItemWrapper.displayName = "NotebookItemWrapper";
 
 MoveNotebook.present = async (notebooks: Notebook[]) => {};
+
+export default MoveNotebook;
diff --git a/apps/mobile/app/screens/move-notes/index.tsx b/apps/mobile/app/screens/move-notes/index.tsx
index 52e6d6df3..bd6a4cd35 100644
--- a/apps/mobile/app/screens/move-notes/index.tsx
+++ b/apps/mobile/app/screens/move-notes/index.tsx
@@ -282,3 +282,5 @@ const SelectableNoteItem = React.memo(
 SelectableNoteItem.displayName = "SelectableNoteItem";
 
 MoveNotes.present = (notebook?: Notebook) => {};
+
+export default MoveNotes;
diff --git a/apps/mobile/app/screens/note-preview-configure/index.tsx b/apps/mobile/app/screens/note-preview-configure/index.tsx
index 1be635858..1192a1fe9 100644
--- a/apps/mobile/app/screens/note-preview-configure/index.tsx
+++ b/apps/mobile/app/screens/note-preview-configure/index.tsx
@@ -28,6 +28,7 @@ import { useDBItem } from "../../hooks/use-db-item";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const NoteItem = (props: {
   id: string | number;
@@ -55,7 +56,7 @@ const NoteItem = (props: {
         borderBottomWidth: 1,
         borderBottomColor: colors.primary.border,
         justifyContent: "center",
-        paddingVertical: 12,
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
         minHeight: 45
       }}
     >
@@ -63,7 +64,7 @@ const NoteItem = (props: {
         <View
           style={{
             flexDirection: "row",
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
         >
           <View
@@ -126,7 +127,7 @@ export const NotePreviewConfigure = () => {
 
       <View
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           paddingTop: 6
         }}
       >
diff --git a/apps/mobile/app/screens/notebook/index.tsx b/apps/mobile/app/screens/notebook/index.tsx
index 0877f4ed6..24c99bbbb 100644
--- a/apps/mobile/app/screens/notebook/index.tsx
+++ b/apps/mobile/app/screens/notebook/index.tsx
@@ -39,10 +39,10 @@ import useNavigationStore, {
   NotebookScreenParams
 } from "../../stores/use-navigation-store";
 import { eUpdateNotebookRoute } from "../../utils/events";
-import { findSelectedParent } from "../../utils/notebooks";
 import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { openEditor, setOnFirstSave } from "../notes/common";
+import { findRootNotebookId } from "../../utils/notebooks";
 
 const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
@@ -94,8 +94,8 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
       }
 
       if (data?.item?.id && params.current.item?.id !== data?.item?.id) {
-        const nextRootNotebookId = await findSelectedParent(data?.item?.id);
-        const currentNotebookRoot = await findSelectedParent(
+        const nextRootNotebookId = await findRootNotebookId(data?.item?.id);
+        const currentNotebookRoot = await findRootNotebookId(
           params.current.item.id
         );
 
@@ -284,8 +284,8 @@ NotebookScreen.navigate = async (item: Notebook, canGoBack?: boolean) => {
     });
   } else if (currentRoute === "Notebook") {
     if (!focusedRouteId) return;
-    const rootNotebookId = await findSelectedParent(focusedRouteId);
-    const currentNotebookRoot = await findSelectedParent(item?.id);
+    const rootNotebookId = await findRootNotebookId(focusedRouteId);
+    const currentNotebookRoot = await findRootNotebookId(item?.id);
 
     if (
       (rootNotebookId === currentNotebookRoot &&
diff --git a/apps/mobile/app/screens/notes/colored.tsx b/apps/mobile/app/screens/notes/colored.tsx
index 3aa21e83b..fb359fb48 100644
--- a/apps/mobile/app/screens/notes/colored.tsx
+++ b/apps/mobile/app/screens/notes/colored.tsx
@@ -68,3 +68,5 @@ ColoredNotes.navigate = (item: Color, canGoBack: boolean) => {
     title: toCamelCase(item.title)
   });
 };
+
+export default ColoredNotes;
diff --git a/apps/mobile/app/screens/notes/index.tsx b/apps/mobile/app/screens/notes/index.tsx
index 7fa2d2083..2ed812a33 100644
--- a/apps/mobile/app/screens/notes/index.tsx
+++ b/apps/mobile/app/screens/notes/index.tsx
@@ -225,7 +225,7 @@ const NotesPage = ({
           data={notes}
           dataType="note"
           onRefresh={onRequestUpdate}
-          loading={!isFocused}
+          loading={false}
           renderedInRoute={route.name}
           id={params.current.item?.id}
           headerTitle={title || "Monographs"}
diff --git a/apps/mobile/app/screens/notes/monographs.tsx b/apps/mobile/app/screens/notes/monographs.tsx
index 4feed986b..8cf134d35 100644
--- a/apps/mobile/app/screens/notes/monographs.tsx
+++ b/apps/mobile/app/screens/notes/monographs.tsx
@@ -67,3 +67,4 @@ Monographs.navigate = (canGoBack?: boolean) => {
     title: strings.dataTypesPluralCamelCase.monograph()
   });
 };
+export default Monographs;
diff --git a/apps/mobile/app/screens/notes/tagged.tsx b/apps/mobile/app/screens/notes/tagged.tsx
index a3a2aa958..5f38b3990 100644
--- a/apps/mobile/app/screens/notes/tagged.tsx
+++ b/apps/mobile/app/screens/notes/tagged.tsx
@@ -69,3 +69,5 @@ TaggedNotes.navigate = (item: Tag, canGoBack?: boolean) => {
     title: item.title
   });
 };
+
+export default TaggedNotes;
diff --git a/apps/mobile/app/screens/search/index.tsx b/apps/mobile/app/screens/search/index.tsx
index df1870a60..b114adeba 100644
--- a/apps/mobile/app/screens/search/index.tsx
+++ b/apps/mobile/app/screens/search/index.tsx
@@ -155,3 +155,5 @@ export const Search = ({ route, navigation }: NavigationProps<"Search">) => {
     </>
   );
 };
+
+export default Search;
diff --git a/apps/mobile/app/screens/search/search-bar.tsx b/apps/mobile/app/screens/search/search-bar.tsx
index 56478f190..8c53310da 100644
--- a/apps/mobile/app/screens/search/search-bar.tsx
+++ b/apps/mobile/app/screens/search/search-bar.tsx
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useRef } from "react";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import { TextInput } from "react-native-gesture-handler";
 import { IconButton } from "../../components/ui/icon-button";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
@@ -61,7 +61,6 @@ export const SearchBar = ({
           alignItems: "center",
           width: "100%",
           paddingHorizontal: DefaultAppStyles.GAP_SMALL,
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
           borderRadius: 10,
           borderColor: colors.primary.border,
           borderWidth: 1
@@ -87,7 +86,8 @@ export const SearchBar = ({
             fontFamily: "OpenSans-Regular",
             flexGrow: 1,
             color: colors.primary.paragraph,
-            height: 40
+            paddingTop: DefaultAppStyles.GAP_VERTICAL,
+            paddingBottom: DefaultAppStyles.GAP_VERTICAL
           }}
           autoFocus
           onChangeText={_onChangeText}
diff --git a/apps/mobile/app/screens/settings/2fa.tsx b/apps/mobile/app/screens/settings/2fa.tsx
index 52a63a70e..0aed102f1 100644
--- a/apps/mobile/app/screens/settings/2fa.tsx
+++ b/apps/mobile/app/screens/settings/2fa.tsx
@@ -53,6 +53,7 @@ import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSheet } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
+import { DefaultAppStyles } from "../../utils/styles";
 const mfaMethods: MFAMethod[] = [
   {
     id: "app",
@@ -118,10 +119,10 @@ export const MFAMethodsPickerStep = ({ recovery, onSuccess }: MFAStepProps) => {
             onSuccess && onSuccess(item);
           }}
           style={{
-            paddingHorizontal: 12,
-            paddingVertical: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
             marginTop: 0,
-            marginBottom: 12,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             flexDirection: "row",
             borderRadius: 0,
             alignItems: "flex-start"
@@ -273,7 +274,7 @@ export const MFASetup = ({
 
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         {loading ? (
@@ -383,7 +384,7 @@ export const MFASetup = ({
               loading={enabling}
               style={{
                 borderRadius: 100,
-                marginBottom: 10
+                marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
             />
 
@@ -487,7 +488,7 @@ export const MFARecoveryCodes = ({
             style={{
               flexDirection: "row",
               justifyContent: "center",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Button
@@ -562,7 +563,7 @@ export const MFARecoveryCodes = ({
             }}
             style={{
               borderRadius: 100,
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           />
         </>
@@ -618,7 +619,7 @@ const MFASuccess = ({ recovery }: MFAStepProps) => {
         }}
         style={{
           borderRadius: 100,
-          marginBottom: 10
+          marginBottom: DefaultAppStyles.GAP_VERTICAL
         }}
       />
 
diff --git a/apps/mobile/app/screens/settings/app-lock.js b/apps/mobile/app/screens/settings/app-lock.js
index 6212a1d04..77c2a5eaa 100644
--- a/apps/mobile/app/screens/settings/app-lock.js
+++ b/apps/mobile/app/screens/settings/app-lock.js
@@ -33,6 +33,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 const AppLock = () => {
   const { colors } = useThemeColors();
   const appLockMode = useSettingStore((state) => state.settings.appLockMode);
@@ -73,7 +74,7 @@ const AppLock = () => {
               alignItems: "flex-end",
               justifyContent: "space-between",
               width: "95%",
-              paddingVertical: 12,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               paddingHorizontal: 0,
               alignSelf: "center",
               minHeight: 125,
@@ -108,7 +109,7 @@ const AppLock = () => {
           <Seperator />
           <ScrollView
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               width: "100%",
               alignSelf: "center",
               flexGrow: 1
@@ -158,10 +159,10 @@ const AppLock = () => {
                 style={{
                   justifyContent: "flex-start",
                   alignItems: "flex-start",
-                  paddingHorizontal: 12,
-                  paddingVertical: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   marginTop: 0,
-                  marginBottom: 12,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
                   borderWidth: 1,
                   borderColor:
                     appLockMode === item.value
diff --git a/apps/mobile/app/screens/settings/attachment-group-progress.tsx b/apps/mobile/app/screens/settings/attachment-group-progress.tsx
index 05686ebac..3f5c93546 100644
--- a/apps/mobile/app/screens/settings/attachment-group-progress.tsx
+++ b/apps/mobile/app/screens/settings/attachment-group-progress.tsx
@@ -30,6 +30,7 @@ import { useDBItem } from "../../hooks/use-db-item";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const AttachmentGroupProgress = (props: { groupId?: string }) => {
   const { colors } = useThemeColors();
@@ -47,7 +48,7 @@ export const AttachmentGroupProgress = (props: { groupId?: string }) => {
         borderWidth: 1,
         borderColor: colors.primary.border,
         borderRadius: 10,
-        padding: 12,
+        padding: DefaultAppStyles.GAP,
         flexDirection: "row",
         gap: 10
       }}
@@ -55,7 +56,7 @@ export const AttachmentGroupProgress = (props: { groupId?: string }) => {
       <Icon name="download" size={AppFontSize.xxxl} />
       <View
         style={{
-          gap: 5,
+          gap: DefaultAppStyles.GAP_VERTICAL_SMALL,
           flex: 1
         }}
       >
@@ -68,7 +69,7 @@ export const AttachmentGroupProgress = (props: { groupId?: string }) => {
           <View
             style={{
               width: "100%",
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <ProgressBarComponent
diff --git a/apps/mobile/app/screens/settings/components.tsx b/apps/mobile/app/screens/settings/components.tsx
index 2325b8353..c937e658f 100644
--- a/apps/mobile/app/screens/settings/components.tsx
+++ b/apps/mobile/app/screens/settings/components.tsx
@@ -41,6 +41,7 @@ import { Subscription } from "./subscription";
 import ThemeSelector from "./theme-selector";
 import { TitleFormat } from "./title-format";
 import { View } from "react-native";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const components: { [name: string]: ReactElement } = {
   colorpicker: <AccentColorPicker />,
@@ -63,7 +64,7 @@ export const components: { [name: string]: ReactElement } = {
   "server-config": <ServersConfiguration />,
   "attachments-manager": <AttachmentDialog note={undefined} isSheet={false} />,
   "offline-mode-progress": (
-    <View style={{ paddingHorizontal: 12 }}>
+    <View style={{ paddingHorizontal: DefaultAppStyles.GAP }}>
       <AttachmentGroupProgress groupId="offline-mode" />
     </View>
   )
diff --git a/apps/mobile/app/screens/settings/debug.tsx b/apps/mobile/app/screens/settings/debug.tsx
index bb82e66bd..499b822bc 100644
--- a/apps/mobile/app/screens/settings/debug.tsx
+++ b/apps/mobile/app/screens/settings/debug.tsx
@@ -35,6 +35,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import useTimer from "../../hooks/use-timer";
 import { ToastManager } from "../../services/event-manager";
 import { hexToRGBA } from "../../utils/colors";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export default function DebugLogs() {
   const { colors } = useThemeColors();
@@ -96,8 +97,8 @@ export default function DebugLogs() {
             });
           }}
           style={{
-            paddingHorizontal: 12,
-            paddingVertical: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
             backgroundColor: background,
             flexShrink: 1,
             borderBottomWidth: 1,
@@ -119,7 +120,6 @@ export default function DebugLogs() {
       );
     },
     [
-      colors.secondary.background,
       colors.primary.paragraph,
       colors.error.paragraph,
       colors.static.black,
@@ -209,7 +209,7 @@ export default function DebugLogs() {
     >
       <View
         style={{
-          padding: 12
+          padding: DefaultAppStyles.GAP
         }}
       >
         <Notice text={strings.debugNotice()} type="information" />
@@ -221,8 +221,8 @@ export default function DebugLogs() {
           ListHeaderComponent={
             <View
               style={{
-                paddingHorizontal: 12,
-                marginBottom: 10,
+                paddingHorizontal: DefaultAppStyles.GAP,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL,
                 flexDirection: "row",
                 alignItems: "center",
                 backgroundColor: colors.primary.background,
diff --git a/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx b/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
index 96d0033bc..df17fa0c6 100644
--- a/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
+++ b/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
@@ -30,6 +30,7 @@ import { AppFontSize } from "../../../utils/size";
 import { Group } from "./group";
 import { DragState, useDragState } from "./state";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 export const ConfigureToolbar = () => {
   const data = useDragState((state) => state.data);
   const preset = useDragState((state) => state.preset);
@@ -50,14 +51,14 @@ export const ConfigureToolbar = () => {
       >
         <View
           style={{
-            paddingVertical: 12
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Notice text={strings.configureToolbarNotice()} type="information" />
 
           <Paragraph
             style={{
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
             size={AppFontSize.xs}
             color={colors.secondary.paragraph}
@@ -70,7 +71,7 @@ export const ConfigureToolbar = () => {
               flexDirection: "row",
               flexWrap: "wrap",
               width: "100%",
-              marginTop: 10
+              marginTop: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             {[
@@ -92,8 +93,8 @@ export const ConfigureToolbar = () => {
                 type={preset === item.id ? "accent" : "secondaryAccented"}
                 style={{
                   borderRadius: 100,
-                  height: 35,
-                  marginRight: 10
+                  marginRight: 10,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
                 }}
                 proTag={item.pro}
                 onPress={() => {
@@ -148,7 +149,7 @@ export const ConfigureToolbar = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 12,
+    paddingHorizontal: DefaultAppStyles.GAP,
     width: "100%"
   }
 });
diff --git a/apps/mobile/app/screens/settings/editor/group.tsx b/apps/mobile/app/screens/settings/editor/group.tsx
index 058d94e58..baa1d5429 100644
--- a/apps/mobile/app/screens/settings/editor/group.tsx
+++ b/apps/mobile/app/screens/settings/editor/group.tsx
@@ -35,6 +35,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import type { ToolId } from "@notesnook/editor";
 import PremiumService from "../../../services/premium";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const Group = ({
   item,
@@ -176,7 +177,7 @@ export const Group = ({
             backgroundColor: colors.primary.background,
             borderRadius: 10,
             ...getElevationStyle(hover ? 5 : 0),
-            marginTop: isSubgroup ? 0 : 10
+            marginTop: isSubgroup ? 0 : DefaultAppStyles.GAP_VERTICAL
           }
         ]}
       >
@@ -294,8 +295,10 @@ export const Group = ({
             dragged.type === "subgroup"
               ? colors.secondary.background
               : undefined,
-          marginTop: recievePosition === "above" ? 10 : 0,
-          marginBottom: recievePosition === "below" ? 10 : 0,
+          marginTop:
+            recievePosition === "above" ? DefaultAppStyles.GAP_VERTICAL : 0,
+          marginBottom:
+            recievePosition === "below" ? DefaultAppStyles.GAP_VERTICAL : 0,
           borderRadius: 10
         }}
         renderHoverContent={() => renderGroup(true)}
diff --git a/apps/mobile/app/screens/settings/editor/tool-sheet.tsx b/apps/mobile/app/screens/settings/editor/tool-sheet.tsx
index 1b4d63d45..64da655d9 100644
--- a/apps/mobile/app/screens/settings/editor/tool-sheet.tsx
+++ b/apps/mobile/app/screens/settings/editor/tool-sheet.tsx
@@ -34,6 +34,7 @@ import {
 } from "./toolbar-definition";
 import { ActionSheetRef, ScrollView } from "react-native-actions-sheet";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function ToolSheet({
   group,
@@ -69,10 +70,10 @@ export default function ToolSheet({
             useDragState.getState().setData(_data);
           }}
           style={{
-            marginBottom: 10,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             width: "100%",
             height: 50,
-            paddingHorizontal: 12,
+            paddingHorizontal: DefaultAppStyles.GAP,
             paddingRight: 0,
             borderRadius: defaultBorderRadius,
             flexDirection: "row",
@@ -114,7 +115,7 @@ export default function ToolSheet({
     <View
       style={{
         maxHeight: "100%",
-        padding: 12
+        padding: DefaultAppStyles.GAP
       }}
     >
       <ScrollView nestedScrollEnabled={true}>
diff --git a/apps/mobile/app/screens/settings/editor/tool.tsx b/apps/mobile/app/screens/settings/editor/tool.tsx
index 1d15df288..8b107c91c 100644
--- a/apps/mobile/app/screens/settings/editor/tool.tsx
+++ b/apps/mobile/app/screens/settings/editor/tool.tsx
@@ -37,6 +37,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import type { ToolId } from "@notesnook/editor";
 import PremiumService from "../../../services/premium";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 export const Tool = ({
   item,
@@ -179,11 +180,11 @@ export const Tool = ({
               : colors.secondary.background,
             borderWidth: isSubgroup ? 0 : 1,
             borderColor: isSubgroup ? undefined : colors.secondary.background,
-            marginBottom: 10,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             width: isDragged ? dimensions.current.width : "100%",
             paddingTop: isSubgroup ? 15 : 0,
             height: 40,
-            paddingHorizontal: isSubgroup ? 0 : 12,
+            paddingHorizontal: isSubgroup ? 0 : DefaultAppStyles.GAP,
             paddingRight: 0,
             borderRadius: defaultBorderRadius,
             flexDirection: "row",
@@ -368,8 +369,10 @@ export const Tool = ({
             dragged?.type === "subgroup"
               ? colors.secondary.background
               : undefined,
-          marginTop: recievePosition === "above" ? 5 : 0,
-          marginBottom: recievePosition === "below" ? 5 : 0,
+          marginTop:
+            recievePosition === "above" ? DefaultAppStyles.GAP_VERTICAL : 0,
+          marginBottom:
+            recievePosition === "below" ? DefaultAppStyles.GAP_VERTICAL : 0,
           borderRadius: 10
         }}
         renderHoverContent={() => renderChild(true)}
diff --git a/apps/mobile/app/screens/settings/group.tsx b/apps/mobile/app/screens/settings/group.tsx
index bdb6f46e3..dc450f807 100644
--- a/apps/mobile/app/screens/settings/group.tsx
+++ b/apps/mobile/app/screens/settings/group.tsx
@@ -59,7 +59,7 @@ const Group = ({
           id="Settings"
         />
       )}
-      <DelayLayout type="settings" delay={1}>
+      <DelayLayout type="settings" delay={0}>
         <View
           style={{
             flex: 1
@@ -68,7 +68,6 @@ const Group = ({
           {route.params.component ? components[route.params.component] : null}
           {route.params.sections ? (
             <AnimatedKeyboardAvoidingFlatList
-              entering={FadeInDown}
               data={route.params.sections}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
diff --git a/apps/mobile/app/screens/settings/home.tsx b/apps/mobile/app/screens/settings/home.tsx
index 0c273e222..34b1fc9af 100644
--- a/apps/mobile/app/screens/settings/home.tsx
+++ b/apps/mobile/app/screens/settings/home.tsx
@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React from "react";
-import { View } from "react-native";
-import Animated, { FadeInDown } from "react-native-reanimated";
+import { FlatList } from "react-native";
 import DelayLayout from "../../components/delay-layout";
 import { Header } from "../../components/header";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
@@ -29,7 +29,6 @@ import { SectionGroup } from "./section-group";
 import { settingsGroups } from "./settings-data";
 import { RouteParams, SettingSection } from "./types";
 import SettingsUserSection from "./user-section";
-import { strings } from "@notesnook/intl";
 
 const keyExtractor = (item: SettingSection) => item.id;
 
@@ -60,13 +59,11 @@ const Home = ({
         hasSearch={false}
         id="Settings"
       />
-      <DelayLayout delay={300} type="settings">
-        <Animated.FlatList
-          entering={FadeInDown}
+      <DelayLayout delay={0} type="settings">
+        <FlatList
           data={settingsGroups}
           windowSize={1}
           keyExtractor={keyExtractor}
-          ListFooterComponent={<View style={{ height: 200 }} />}
           renderItem={renderItem}
         />
       </DelayLayout>
diff --git a/apps/mobile/app/screens/settings/licenses.tsx b/apps/mobile/app/screens/settings/licenses.tsx
index 494b3d813..f08c59cb1 100644
--- a/apps/mobile/app/screens/settings/licenses.tsx
+++ b/apps/mobile/app/screens/settings/licenses.tsx
@@ -24,6 +24,7 @@ import Heading from "../../components/ui/typography/heading";
 import { AppFontSize } from "../../utils/size";
 import { useThemeColors } from "@notesnook/theme";
 import Paragraph from "../../components/ui/typography/paragraph";
+import { DefaultAppStyles } from "../../utils/styles";
 
 type LicenseEntry = {
   name: string;
@@ -47,7 +48,7 @@ export const Licenses = () => {
           alignItems: "flex-start",
           justifyContent: "flex-start",
           alignSelf: "flex-start",
-          padding: 12,
+          padding: DefaultAppStyles.GAP,
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
           borderRadius: 0
diff --git a/apps/mobile/app/screens/settings/picker/index.tsx b/apps/mobile/app/screens/settings/picker/index.tsx
index e44d28a1c..9ab3db9d2 100644
--- a/apps/mobile/app/screens/settings/picker/index.tsx
+++ b/apps/mobile/app/screens/settings/picker/index.tsx
@@ -30,6 +30,7 @@ import { getColorLinearShade } from "../../../utils/colors";
 import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import { verifyUser } from "../functions";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 interface PickerOptions<T> {
   getValue: () => T;
@@ -121,10 +122,10 @@ export function SettingsPicker<T>({
             style={{
               flexDirection: "row",
               alignItems: "center",
-              marginTop: 10,
               width: "100%",
               justifyContent: "space-between",
-              padding: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <Paragraph>{formatValue(currentValue)}</Paragraph>
@@ -159,7 +160,8 @@ export function SettingsPicker<T>({
               maxWidth: width
             }}
             textStyle={{
-              fontSize: AppFontSize.md,
+              fontSize: AppFontSize.sm,
+              fontFamily: "Inter-Regular",
               color: compareValue(currentValue, item)
                 ? colors.primary.accent
                 : colors.primary.paragraph
diff --git a/apps/mobile/app/screens/settings/picker/pickers.jsx b/apps/mobile/app/screens/settings/picker/pickers.jsx
index 475063cb9..bb195d04a 100644
--- a/apps/mobile/app/screens/settings/picker/pickers.jsx
+++ b/apps/mobile/app/screens/settings/picker/pickers.jsx
@@ -48,19 +48,19 @@ export const FontPicker = createSettingsPicker({
 export const HomePicker = createSettingsPicker({
   getValue: () => useSettingStore.getState().settings.homepage,
   updateValue: (item) => {
-    SettingsService.set({ homepage: item.name });
+    SettingsService.set({ homepage: item.title });
     ToastManager.show({
-      heading: strings.homePageChangedTo(item.name),
+      heading: strings.homePageChangedTo(item.title),
       message: strings.restartAppToApplyChanges(),
       type: "success"
     });
   },
   formatValue: (item) => {
-    return strings.routes[typeof item === "object" ? item.name : item]?.();
+    return strings.routes[typeof item === "object" ? item.title : item]?.();
   },
-  getItemKey: (item) => item.name,
+  getItemKey: (item) => item.title,
   options: MenuItemsList.slice(0, MenuItemsList.length - 1),
-  compareValue: (current, item) => current === item.name,
+  compareValue: (current, item) => current === item.title,
   premium: true
 });
 
diff --git a/apps/mobile/app/screens/settings/restore-backup/index.tsx b/apps/mobile/app/screens/settings/restore-backup/index.tsx
index eddfac4da..d96b557f8 100644
--- a/apps/mobile/app/screens/settings/restore-backup/index.tsx
+++ b/apps/mobile/app/screens/settings/restore-backup/index.tsx
@@ -47,6 +47,7 @@ import SettingsService from "../../../services/settings";
 import { refreshAllStores } from "../../../stores/create-db-collection-store";
 import { useUserStore } from "../../../stores/use-user-store";
 import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 
 type PasswordOrKey = { password?: string; encryptionKey?: string };
 
@@ -412,7 +413,7 @@ export const RestoreBackup = () => {
                   <View
                     style={{
                       backgroundColor: colors.primary.background,
-                      marginBottom: 10
+                      marginBottom: DefaultAppStyles.GAP_VERTICAL
                     }}
                   >
                     <Heading
@@ -466,7 +467,7 @@ export const RestoreBackup = () => {
                   (item as ReactNativeBlobUtilStat).filename
                 }
                 style={{
-                  paddingHorizontal: 12
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
                 ListFooterComponent={
                   <View
@@ -515,7 +516,7 @@ const BackupItem = ({
         flexDirection: "row",
         borderBottomWidth: 0.5,
         borderBottomColor: colors.primary.border,
-        paddingVertical: 12
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <View>
@@ -534,7 +535,7 @@ const BackupItem = ({
         title="Restore"
         type="secondaryAccented"
         style={{
-          paddingHorizontal: 12,
+          paddingHorizontal: DefaultAppStyles.GAP,
           height: 35
         }}
         onPress={() => {
diff --git a/apps/mobile/app/screens/settings/section-group.tsx b/apps/mobile/app/screens/settings/section-group.tsx
index 99c3b51d8..ac46297e9 100644
--- a/apps/mobile/app/screens/settings/section-group.tsx
+++ b/apps/mobile/app/screens/settings/section-group.tsx
@@ -24,6 +24,7 @@ import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
 import { SectionItem } from "./section-item";
 import { SettingSection } from "./types";
+import { DefaultAppStyles } from "../../utils/styles";
 export const SectionGroup = ({ item }: { item: SettingSection }) => {
   const { colors } = useThemeColors();
   const current = item.useHook && item.useHook();
@@ -37,7 +38,7 @@ export const SectionGroup = ({ item }: { item: SettingSection }) => {
       {item.name && item.sections ? (
         <Heading
           style={{
-            paddingHorizontal: 12
+            paddingHorizontal: DefaultAppStyles.GAP
           }}
           color={colors.primary.accent}
           size={AppFontSize.xs}
diff --git a/apps/mobile/app/screens/settings/section-item.tsx b/apps/mobile/app/screens/settings/section-item.tsx
index 2c0c0e32e..0fd000902 100644
--- a/apps/mobile/app/screens/settings/section-item.tsx
+++ b/apps/mobile/app/screens/settings/section-item.tsx
@@ -26,6 +26,7 @@ import {
 import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, TextInput, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+//@ts-ignore
 import ToggleSwitch from "toggle-switch-react-native";
 import { IconButton } from "../../components/ui/icon-button";
 import Input from "../../components/ui/input";
@@ -239,7 +240,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
                 });
                 item.inputProperties?.onSubmitEditing?.(text as any);
               }}
-              containerStyle={{ marginTop: 12 }}
+              containerStyle={{ marginTop: DefaultAppStyles.GAP_VERTICAL }}
               fwdRef={inputRef}
               onLayout={() => {
                 inputRef?.current?.setNativeProps({
@@ -258,7 +259,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                marginTop: 12
+                marginTop: DefaultAppStyles.GAP_VERTICAL
               }}
             >
               <IconButton
@@ -295,12 +296,17 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
                 }}
                 keyboardType="decimal-pad"
                 containerStyle={{
-                  width: 65
+                  width: 60
+                }}
+                inputStyle={{
+                  width: 60,
+                  textAlign: "center"
                 }}
                 wrapperStyle={{
-                  maxWidth: 65,
+                  maxWidth: 60,
+                  flexGrow: 0,
                   marginBottom: 0,
-                  marginHorizontal: 6
+                  marginHorizontal: DefaultAppStyles.GAP_SMALL
                 }}
                 fwdRef={inputRef}
                 onLayout={() => {
diff --git a/apps/mobile/app/screens/settings/server-config.tsx b/apps/mobile/app/screens/settings/server-config.tsx
index 8967743b9..adc1f11b6 100644
--- a/apps/mobile/app/screens/settings/server-config.tsx
+++ b/apps/mobile/app/screens/settings/server-config.tsx
@@ -31,6 +31,7 @@ import { ToastManager } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { HostId, HostIds } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const ServerIds = [
   "notesnook-sync",
@@ -98,9 +99,9 @@ export function ServersConfiguration() {
   return (
     <View
       style={{
-        paddingHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         gap: 12,
-        marginTop: 12
+        marginTop: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       {isLoggedIn ? (
@@ -128,7 +129,7 @@ export function ServersConfiguration() {
         {error ? (
           <Paragraph
             style={{
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             color={colors.error.paragraph}
           >
@@ -139,14 +140,20 @@ export function ServersConfiguration() {
         {success === true ? (
           <Paragraph
             style={{
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
             color={colors.success.paragraph}
           >
             {strings.connectedToServer()}
           </Paragraph>
         ) : null}
-        <View style={{ marginTop: 1, justifyContent: "flex-end", gap: 12 }}>
+        <View
+          style={{
+            marginTop: 1,
+            justifyContent: "flex-end",
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
           <Button
             disabled={isLoggedIn}
             type="secondary"
diff --git a/apps/mobile/app/screens/settings/settings-data.tsx b/apps/mobile/app/screens/settings/settings-data.tsx
index 4467f15fa..c80745788 100644
--- a/apps/mobile/app/screens/settings/settings-data.tsx
+++ b/apps/mobile/app/screens/settings/settings-data.tsx
@@ -27,6 +27,7 @@ import React from "react";
 import { Appearance, Linking, Platform } from "react-native";
 import { getVersion } from "react-native-device-info";
 import * as RNIap from "react-native-iap";
+//@ts-ignore
 import { enabled } from "react-native-privacy-snapshot";
 import ScreenGuardModule from "react-native-screenguard";
 import { DatabaseLogger, db } from "../../common/database";
diff --git a/apps/mobile/app/screens/settings/sound-picker.tsx b/apps/mobile/app/screens/settings/sound-picker.tsx
index b95ee36a7..d0e8de483 100644
--- a/apps/mobile/app/screens/settings/sound-picker.tsx
+++ b/apps/mobile/app/screens/settings/sound-picker.tsx
@@ -33,6 +33,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const SoundItem = ({
   playingSoundId,
@@ -59,7 +60,7 @@ const SoundItem = ({
         borderBottomWidth: 1,
         borderRadius: 0,
         borderBottomColor: colors.primary.border,
-        paddingHorizontal: 12
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
       onPress={async () => {
         SettingsService.set({
diff --git a/apps/mobile/app/screens/settings/subscription.js b/apps/mobile/app/screens/settings/subscription.js
index 6e93dea89..51c24a574 100644
--- a/apps/mobile/app/screens/settings/subscription.js
+++ b/apps/mobile/app/screens/settings/subscription.js
@@ -33,6 +33,7 @@ import { useUserStore } from "../../stores/use-user-store";
 import { SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 export const Subscription = () => {
   const user = useUserStore((state) => state.user);
   const monthlyPlan = usePricing("monthly");
@@ -99,7 +100,7 @@ export const Subscription = () => {
           height={40}
           style={{
             borderRadius: 100,
-            paddingHorizontal: 25,
+            paddingHorizontal: DefaultAppStyles.GAP,
             alignSelf: "flex-start"
           }}
           fontSize={AppFontSize.sm}
diff --git a/apps/mobile/app/screens/settings/theme-selector.tsx b/apps/mobile/app/screens/settings/theme-selector.tsx
index 4f20b7b10..3c1950473 100644
--- a/apps/mobile/app/screens/settings/theme-selector.tsx
+++ b/apps/mobile/app/screens/settings/theme-selector.tsx
@@ -56,6 +56,7 @@ import { IconButton } from "../../components/ui/icon-button";
 import { Pressable } from "../../components/ui/pressable";
 import { getColorLinearShade } from "../../utils/colors";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const THEME_SERVER_URL = "https://themes-api.notesnook.com";
 //@ts-ignore
@@ -131,8 +132,8 @@ function ThemeSelector() {
           activeOpacity={0.9}
           style={{
             borderRadius: 10,
-            padding: 6,
-            marginBottom: 10,
+            padding: DefaultAppStyles.GAP_SMALL,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             flexShrink: 1,
             marginHorizontal: 10
           }}
@@ -144,7 +145,7 @@ function ThemeSelector() {
               height: 200,
               width: "100%",
               borderRadius: 10,
-              marginBottom: 10,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               overflow: "hidden",
               flexDirection: "row",
               justifyContent: "space-between",
@@ -156,7 +157,7 @@ function ThemeSelector() {
                 height: "100%",
                 width: "49.5%",
                 backgroundColor: colors.navigationMenu.background,
-                padding: 5,
+                padding: DefaultAppStyles.GAP_SMALL,
                 paddingVertical: 3,
                 borderRadius: defaultBorderRadius
               }}
@@ -251,7 +252,7 @@ function ThemeSelector() {
                 width: "100%",
                 alignItems: "flex-end",
                 justifyContent: "flex-end",
-                marginTop: 6,
+                marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
                 position: "absolute",
                 bottom: 6,
                 right: 6,
@@ -287,7 +288,7 @@ function ThemeSelector() {
                 }}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: 12,
+                  paddingHorizontal: DefaultAppStyles.GAP,
                   alignSelf: "flex-end",
                   borderColor:
                     item.colorScheme === "dark"
@@ -346,9 +347,9 @@ function ThemeSelector() {
       >
         <View
           style={{
-            paddingHorizontal: 12,
-            marginBottom: 12,
-            paddingTop: 12
+            paddingHorizontal: DefaultAppStyles.GAP,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <Input onChangeText={onSearch} placeholder={strings.searchThemes()} />
@@ -367,7 +368,11 @@ function ThemeSelector() {
             >
               <Button
                 height={30}
-                style={{ borderRadius: 100, minWidth: 60 }}
+                style={{
+                  borderRadius: 100,
+                  minWidth: 60,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+                }}
                 type={
                   colorScheme === "" || !colorScheme ? "accent" : "secondary"
                 }
@@ -378,7 +383,11 @@ function ThemeSelector() {
                 }}
               />
               <Button
-                style={{ borderRadius: 100, minWidth: 60 }}
+                style={{
+                  borderRadius: 100,
+                  minWidth: 60,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+                }}
                 height={30}
                 type={colorScheme === "dark" ? "accent" : "secondary"}
                 title={strings.dark()}
@@ -388,7 +397,11 @@ function ThemeSelector() {
                 }}
               />
               <Button
-                style={{ borderRadius: 100, minWidth: 60 }}
+                style={{
+                  borderRadius: 100,
+                  minWidth: 60,
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+                }}
                 height={30}
                 fontSize={AppFontSize.xs}
                 type={colorScheme === "light" ? "accent" : "secondary"}
@@ -401,7 +414,11 @@ function ThemeSelector() {
 
             <Button
               title={strings.loadFromFile()}
-              style={{ borderRadius: 100, minWidth: 60 }}
+              style={{
+                borderRadius: 100,
+                minWidth: 60,
+                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+              }}
               height={30}
               type={"secondaryAccented"}
               icon="folder"
@@ -560,14 +577,15 @@ const ThemeSetter = ({
     <>
       <View
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <View
           style={{
             borderRadius: 10,
-            marginBottom: 12,
-            padding: 12
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL
           }}
         >
           <View
@@ -576,9 +594,9 @@ const ThemeSetter = ({
               justifyContent: "center",
               alignItems: "center",
               backgroundColor: colors?.accent + "20",
-              padding: 12,
+              padding: DefaultAppStyles.GAP,
               borderRadius: 15,
-              marginBottom: 12
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <View
@@ -589,7 +607,7 @@ const ThemeSetter = ({
                 height: 200,
                 width: "100%",
                 borderRadius: 10,
-                marginBottom: 10,
+                marginBottom: DefaultAppStyles.GAP_VERTICAL,
                 overflow: "hidden",
                 flexDirection: "row",
                 justifyContent: "space-between",
@@ -602,7 +620,7 @@ const ThemeSetter = ({
                   height: "100%",
                   width: "49.5%",
                   backgroundColor: colors?.navigationMenu.background,
-                  padding: 5,
+                  padding: DefaultAppStyles.GAP_SMALL,
                   paddingVertical: 3,
                   borderRadius: defaultBorderRadius
                 }}
@@ -713,7 +731,7 @@ const ThemeSetter = ({
           </Paragraph>
           <View
             style={{
-              marginTop: 5,
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
               flexDirection: "column",
               rowGap: 3
             }}
@@ -755,9 +773,9 @@ const ThemeSetter = ({
         {darkTheme.id === theme.id || lightTheme.id === theme.id ? (
           <Pressable
             onPress={applyTheme}
-            type="secondaryAccented"
+            type="accent"
             style={{
-              paddingVertical: 12
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
             <Heading color={colors.accentForeground} size={AppFontSize.md}>
@@ -765,7 +783,7 @@ const ThemeSetter = ({
                 ? strings.appliedDark()
                 : strings.appliedLight()}
             </Heading>
-            <Paragraph size={AppFontSize.xs}>
+            <Paragraph color={colors.accentForeground} size={AppFontSize.xs}>
               ({strings.tapToApplyAgain()})
             </Paragraph>
           </Pressable>
@@ -773,7 +791,7 @@ const ThemeSetter = ({
           <Button
             style={{
               width: "100%",
-              marginBottom: 10
+              marginBottom: DefaultAppStyles.GAP_VERTICAL
             }}
             onPress={applyTheme}
             title={
diff --git a/apps/mobile/app/screens/settings/title-format.tsx b/apps/mobile/app/screens/settings/title-format.tsx
index 5c3ec8271..7cefa5b20 100644
--- a/apps/mobile/app/screens/settings/title-format.tsx
+++ b/apps/mobile/app/screens/settings/title-format.tsx
@@ -25,6 +25,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const TitleFormat = () => {
   const [titleFormat] = useState(db.settings.getTitleFormat());
@@ -40,7 +41,7 @@ export const TitleFormat = () => {
         onChangeText={(text) => {
           db.settings.setTitleFormat(text);
         }}
-        containerStyle={{ marginTop: 6 }}
+        containerStyle={{ marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL }}
         onLayout={() => {
           inputRef?.current?.setNativeProps({
             text: titleFormat
diff --git a/apps/mobile/app/screens/settings/user-section.js b/apps/mobile/app/screens/settings/user-section.js
index 8766f082e..df86cf55c 100644
--- a/apps/mobile/app/screens/settings/user-section.js
+++ b/apps/mobile/app/screens/settings/user-section.js
@@ -36,6 +36,7 @@ import { SUBSCRIPTION_STATUS_STRINGS } from "../../utils/constants";
 import { AppFontSize } from "../../utils/size";
 import { SectionItem } from "./section-item";
 import { strings } from "@notesnook/intl";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const getTimeLeft = (t2) => {
   let daysRemaining = dayjs(t2).diff(dayjs(), "days");
@@ -118,7 +119,7 @@ const SettingsUserSection = ({ item }) => {
         <>
           <View
             style={{
-              paddingHorizontal: 12,
+              paddingHorizontal: DefaultAppStyles.GAP,
               paddingTop: 50,
               borderBottomWidth: 1,
               paddingBottom: 20,
@@ -143,7 +144,7 @@ const SettingsUserSection = ({ item }) => {
                   style={{
                     borderWidth: 2,
                     borderRadius: 100,
-                    marginBottom: 10,
+                    marginBottom: DefaultAppStyles.GAP_VERTICAL,
                     borderColor: colors.primary.accent
                   }}
                 >
@@ -225,7 +226,7 @@ const SettingsUserSection = ({ item }) => {
                   <Paragraph
                     style={{
                       flexWrap: "wrap",
-                      marginTop: 5
+                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
                     }}
                     size={AppFontSize.xs}
                     color={colors.secondary.heading}
diff --git a/apps/mobile/app/services/background-sync.ts b/apps/mobile/app/services/background-sync.ts
index f380e20d4..25945148d 100644
--- a/apps/mobile/app/services/background-sync.ts
+++ b/apps/mobile/app/services/background-sync.ts
@@ -21,6 +21,7 @@ import { AppRegistry, AppState, Platform } from "react-native";
 import {
   beginBackgroundTask,
   endBackgroundTask
+  //@ts-ignore
 } from "react-native-begin-background-task";
 import { DatabaseLogger, db, setupDatabase } from "../common/database";
 import { deleteDCacheFiles } from "../common/filesystem/io";
diff --git a/apps/mobile/app/services/exporter.ts b/apps/mobile/app/services/exporter.ts
index 86bd030ef..92338560a 100644
--- a/apps/mobile/app/services/exporter.ts
+++ b/apps/mobile/app/services/exporter.ts
@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
+//@ts-ignore
 import RNHTMLtoPDF from "react-native-html-to-pdf-lite";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { zip } from "react-native-zip-archive";
diff --git a/apps/mobile/app/services/settings.ts b/apps/mobile/app/services/settings.ts
index cd061125c..997c9bc27 100644
--- a/apps/mobile/app/services/settings.ts
+++ b/apps/mobile/app/services/settings.ts
@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { NativeModules, Platform } from "react-native";
+//@ts-ignore
 import { enabled } from "react-native-privacy-snapshot";
 import { MMKV } from "../common/database/mmkv";
 import {
diff --git a/apps/mobile/app/stores/create-db-collection-store.ts b/apps/mobile/app/stores/create-db-collection-store.ts
index 0ac487e76..4ce40d850 100644
--- a/apps/mobile/app/stores/create-db-collection-store.ts
+++ b/apps/mobile/app/stores/create-db-collection-store.ts
@@ -59,7 +59,11 @@ export default function createDBCollectionStore<Type extends Item>({
     refresh: async () => {
       try {
         const items = await getCollection();
-        if (get().loading && eagerlyFetchFirstBatch) {
+        if (
+          get().loading &&
+          eagerlyFetchFirstBatch &&
+          items.placeholders.length
+        ) {
           await items.item(0, resolveItems);
         }
         set({
diff --git a/apps/mobile/app/utils/global-refs.ts b/apps/mobile/app/utils/global-refs.ts
index c41e8286e..99a379829 100644
--- a/apps/mobile/app/utils/global-refs.ts
+++ b/apps/mobile/app/utils/global-refs.ts
@@ -21,10 +21,10 @@ import { createNavigationContainerRef } from "@react-navigation/native";
 import { createRef } from "react";
 import { TextInput, View } from "react-native";
 import { TabsRef } from "../components/fluid-panels";
-import { RootRouteParams, RouteParams } from "../stores/use-navigation-store";
+import { RouteParams } from "../stores/use-navigation-store";
 
 export const inputRef = createRef<TextInput>();
-export const rootNavigatorRef = createNavigationContainerRef<RootRouteParams>();
+export const rootNavigatorRef = createNavigationContainerRef<RouteParams>();
 export const appNavigatorRef = createNavigationContainerRef<RouteParams>();
 export const fluidTabsRef = createRef<TabsRef>();
 export const editorRef = createRef<View>();
diff --git a/apps/mobile/app/utils/styles.ts b/apps/mobile/app/utils/styles.ts
index 795b06f25..0c183ee54 100644
--- a/apps/mobile/app/utils/styles.ts
+++ b/apps/mobile/app/utils/styles.ts
@@ -19,6 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 export const DefaultAppStyles = {
   GAP: 16,
   GAP_SMALL: 8,
-  GAP_VERTICAL: 6,
-  GAP_VERTICAL_SMALL: 4
+  GAP_VERTICAL: 10,
+  GAP_VERTICAL_SMALL: 6
 };
diff --git a/apps/mobile/native/globals.js b/apps/mobile/native/globals.js
index b149a7ff6..7232f241a 100644
--- a/apps/mobile/native/globals.js
+++ b/apps/mobile/native/globals.js
@@ -1,11 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import "@azure/core-asynciterator-polyfill";
-import '@formatjs/intl-locale/polyfill'
-import '@formatjs/intl-pluralrules/polyfill'
-
+import '@formatjs/intl-locale/polyfill-force'
+import '@formatjs/intl-pluralrules/polyfill-force'
 import '@formatjs/intl-pluralrules/locale-data/en'
-import '@formatjs/intl-pluralrules/locale-data/cs'
-import '@formatjs/intl-pluralrules/locale-data/fr'
 
 import 'react-native-url-polyfill/auto';
 import "./polyfills/console-time.js"