diff --git a/apps/mobile/app/assets/images/assets.js b/apps/mobile/app/assets/images/assets.js
index fe98326e0..56190c801 100644
--- a/apps/mobile/app/assets/images/assets.js
+++ b/apps/mobile/app/assets/images/assets.js
@@ -29,3 +29,16 @@ export const SUPPORT_SVG = () =>
 
 export const WELCOME_SVG = (color) =>
   `<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="613.35286" height="700.56123" viewBox="0 0 613.35286 700.56123" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M587.667,756.93133l-.78168-17.57606q-.12187-.06468-.24405-.12879c-8.37606-4.39513-17.97576,3.561-15.3004,12.63392,2.51722,8.5366,4.20846,17.73958,8.81613,25.21162a34.14441,34.14441,0,0,0,25.03847,15.77861l10.64166,6.51555a57.21525,57.21525,0,0,0-12.05953-46.36368,55.2668,55.2668,0,0,0-10.157-9.4375C591.07189,750.28541,587.667,756.93133,587.667,756.93133Z" transform="translate(-293.32357 -99.71938)" fill="#f2f2f2"/><path d="M492.3909,578.56387c-20.48783-21.12931-50.17767-33.24712-81.45666-33.24712l-1.20652.00324a116.3146,116.3146,0,0,1-58.63546-15.83485l-1.85205-1.07912,1.49167-1.537a113.37272,113.37272,0,0,0,19.99317-28.30616,34.28239,34.28239,0,0,1-27.66751,8.93789,35.10416,35.10416,0,0,1-25.77016-16.50626c-10.93231-17.73787-23.96381-42.90658-23.96381-62.0803a116.66888,116.66888,0,0,1,38.0631-86.091,72.65143,72.65143,0,0,0,23.99981-54.17137l-.00607-1.45284a164.77416,164.77416,0,0,1,4.8908-39.87268l.33005-1.31694,1.355.04732a111.39121,111.39121,0,0,0,26.04681-2.1821,87.918,87.918,0,0,1-23.35954-6.213l-1.45769-.58971.4947-1.4937C397.78172,214.464,474.7579,225.398,519.43718,123.17462,555.666,40.28535,683.49348,196.75549,683.49348,287.199c0,9.2287-9.13324,21.42423-2.29615,27.52391,73.90979,65.93827,22.91308,108.27972,6.83466,150.88534-3.81479,10.10871,4.45682,21.20613,4.45682,32.14249,0,1.85569-.04732,3.77124-.14076,5.69327l-.14237,2.955-2.46441-1.63971a81.62563,81.62563,0,0,1-13.47964-11.05649,71.13531,71.13531,0,0,1-2.25612,61.41172c-7.74552,14.619-15.23907,25.085-22.27193,31.10507a116.2904,116.2904,0,0,1-159.34268-7.65574Z" transform="translate(-293.32357 -99.71938)" fill="#e6e6e6"/><path d="M616.13152,798.499a2.09333,2.09333,0,0,0,2.06993-1.79837c.08893-.62489,8.80049-63.45379.97652-146.956-7.22548-77.11632-30.4294-188.191-99.9393-279.41478a2.0935,2.0935,0,1,0-3.33028,2.53775c68.90954,90.436,91.9264,200.69567,99.10094,277.2675,7.77849,83.01636-.86476,145.3553-.953,145.97542a2.09519,2.09519,0,0,0,2.0752,2.38851Z" transform="translate(-293.32357 -99.71938)" fill="#3f3d56"/><path d="M559.40732,499.0052a2.09343,2.09343,0,0,0,1.23242-3.78686c-.25231-.18331-25.681-18.50562-63.69657-32.425-35.14253-12.86589-88.582-24.5297-143.597-7.02036a2.0932,2.0932,0,1,0,1.26956,3.98925c53.88785-17.14953,106.35862-5.67858,140.88784,6.96312,37.47293,13.72044,62.427,31.7,62.67472,31.87988A2.08515,2.08515,0,0,0,559.40732,499.0052Z" transform="translate(-293.32357 -99.71938)" fill="#3f3d56"/><path d="M655.2196,260.37275a2.09343,2.09343,0,0,0-3.68827-1.50192c-.201.23845-20.307,24.28166-36.928,61.19609-15.36327,34.12475-30.84523,86.58548-17.34326,142.71855a2.09319,2.09319,0,1,0,4.07031-.979c-13.22427-54.983,1.99558-106.49141,17.09108-140.02058,16.38342-36.38756,36.11335-59.982,36.31062-60.21616A2.0852,2.0852,0,0,0,655.2196,260.37275Z" transform="translate(-293.32357 -99.71938)" fill="#3f3d56"/><path d="M652.38648,368.31675c1.76623,14.25037,11.64059,26,26,26a26,26,0,0,0,26-26c0-14.3594-11.70215-24.67241-26-26C663.21558,340.90809,650.11884,350.02107,652.38648,368.31675Z" transform="translate(-293.32357 -99.71938)" fill="#2f2e41"/><polygon points="397.105 687.328 407.006 687.327 411.716 649.137 397.103 649.138 397.105 687.328" fill="#ffb6b6"/><path d="M690.08055,797.37579l30.447-.00116v-.385A11.85149,11.85149,0,0,0,708.67674,785.139H708.676l-5.56152-4.21923-10.37659,4.21991-2.65783.00006Z" transform="translate(-293.32357 -99.71938)" fill="#2f2e41"/><polygon points="358.105 687.328 368.006 687.327 372.716 649.137 358.103 649.138 358.105 687.328" fill="#ffb6b6"/><path d="M651.08055,797.37579l30.447-.00116v-.385A11.85149,11.85149,0,0,0,669.67674,785.139H669.676l-5.56152-4.21923-10.37659,4.21991-2.65783.00006Z" transform="translate(-293.32357 -99.71938)" fill="#2f2e41"/><path d="M724.50065,547.85614l7,24L723.25419,673.501s4.24646,6.35511,1.24646,6.35511-6.84686,1.40942-4.4234,5.20471-5.86,17.4209-5.86,17.4209l-11.71661,72.37439-14.92914-.22046s-7.59009-4.22833-3.3305-8.504,7.25958-4.27557,3.25958-8.27557-4-2.79529-4-5.89765-4.00751-41.01574,5.49628-55.559l-2.86365-59.29529-6.74457,58.16144-13.888,77.59052-14.38171-.11847s-6.64276-6.40271-6.6305-11.14209,4.10419-5.13312,1.05823-7.93628-3.046-45.86615,5.954-69.80316c0,0,5.09108-13.37393-.01155-17.95666s-.00631-9.82652-.00631-9.82652,8.08172-2.92145-.0073-11.33883-.04369-67.94913-.04369-67.94913-8.84271-24.03067.1131-33.47977S724.50065,547.85614,724.50065,547.85614Z" transform="translate(-293.32357 -99.71938)" fill="#2f2e41"/><path d="M599.82611,589.20574l12.48925-30.1823,9.84,5.46667-5.94253,30.70307a10.93464,10.93464,0,1,1-16.38671-5.98744Z" transform="translate(-293.32357 -99.71938)" fill="#ffb6b6"/><path d="M809.4002,350.535l-19.00315,26.56751-8.34544-7.554,12.7447-28.5581A10.93464,10.93464,0,1,1,809.4002,350.535Z" transform="translate(-293.32357 -99.71938)" fill="#ffb6b6"/><path d="M726.38648,550.31675c12.32568,19.11831-49.63137,43.38055-73.40448,33.64-4.1628-1.7056-18.48212-7.33918-8.69439-15.14958s-1.1348-8.90952-1.393-13.99392c-.1726-3.39918,2.45917-10.85592-.28674-10.5362s-5.95975-4.3811.0205-6.404.06411-3.86767.11651-5.78787c.57186-20.95538,16.64979-54.2869,16.64979-54.2869l-28.971,74.05682s.214,12.81223-3.48049,8.897-3.42565,8.75675-3.42565,8.75675-5.49354,3.83389-2.33452,5.9676-3.401,8.6937-3.401,8.6937l-15.30666-1.09334s.23964-11.37068,2.85315-13.88533,1.32975-6.47144,1.32975-6.47144,6.80457-6.02348,2.24268-10.91429c-5.86712-6.29013,15.52417-112.52993,22.90637-111.47784a28.12048,28.12048,0,0,1,20.08017-21.45161l16.53221-4.55191,2.93564-11.64749h23.27852l4.0548,7.65333,17.69783,7.98657c3.33362-4.70352,5.82477-9.65991,19.47546-11.26657,0,0,36.78255-33.46683,34.98668-36.08s3.906-8.73109,3.906-8.73109,4.86956-1.59377,2.12179-2.44467,2.446-2.81826,2.446-2.81826,4.81028-1.264,2.54157-2.92832,7.57128-2.75765,7.57128-2.75765l12.767,10.4168-2.58037,4.37541s1.5733,5.958-.48,3.78289-2.43983,4.1371-2.43983,4.1371-1.0486,6.912-7.26682,8.99446S778.502,404.8635,778.502,404.8635c-14.6648,19.0673-31.97132,33.9415-52.48,43.73331C734.01483,457.77113,726.38648,550.31675,726.38648,550.31675Z" transform="translate(-293.32357 -99.71938)" fill="${color}"/><circle cx="387.93692" cy="273.08556" r="23.0557" fill="#ffb6b6"/><path d="M657.38648,375.31675c.73,5.01,5,12,4,12s-8.11-20.65332-1-22c5.15722-.97681,6.31-.12,11.13-2.21l-.68.64c3.19,2.32,7.63.89,11.27-.62,3.65-1.5,8.08-2.93,11.28-.62,2.01,1.45,2.86,3.97,4.11,6.11,1.25,2.15,3.56,4.18,5.94,3.52,1.91-.53,3.01-2.67005,3-4.65s-2.58825-3.86355-1.72-5.64c2.57319-5.26444.25916-8.85275-5.35-11.33q-3.06-.465-6.12-.95a17.35842,17.35842,0,0,1,3.84-3.86,8.77436,8.77436,0,0,0-3.1-3.97c-1.63-.97-3.65-.9-5.54-.8q-6.33.33-12.65.66c-3.12.16-6.35.35-9.13995,1.78-3.48,1.79-5.76,5.28-7.42005,8.83C655.51648,360.18675,656.10645,366.60679,657.38648,375.31675Z" transform="translate(-293.32357 -99.71938)" fill="#2f2e41"/><path d="M561.476,799.97328l226.75.30734a1.19068,1.19068,0,1,0,0-2.38137l-226.75-.30733a1.19068,1.19068,0,0,0,0,2.38136Z" transform="translate(-293.32357 -99.71938)" fill="#cacaca"/><ellipse cx="471.98821" cy="695.09416" rx="5.25681" ry="7.55666" transform="translate(-577.14417 962.36498) rotate(-81.72174)" fill="#e6e6e6"/><ellipse cx="521.15973" cy="690.29611" rx="5.2568" ry="7.55666" transform="translate(-530.30434 1006.91693) rotate(-81.72174)" fill="#3f3d56"/><ellipse cx="458.5236" cy="655.286" rx="5.25681" ry="7.55666" transform="translate(-549.27676 914.96411) rotate(-81.72174)" fill="#ff6584"/><ellipse cx="441.31304" cy="640.04291" rx="4.77581" ry="3.3223" transform="translate(-495.37215 976.78425) rotate(-89.56675)" fill="#e6e6e6"/><ellipse cx="434.06731" cy="609.6713" rx="4.77581" ry="3.3223" transform="translate(-472.19234 939.39678) rotate(-89.56675)" fill="#3f3d56"/><ellipse cx="490.41248" cy="663.12322" rx="4.77581" ry="3.3223" transform="translate(-469.72363 1048.78806) rotate(-89.56675)" fill="#e6e6e6"/><ellipse cx="466.65067" cy="674.98721" rx="4.77581" ry="3.3223" transform="translate(-505.16941 1036.80122) rotate(-89.56675)" fill="#ff6584"/><ellipse cx="499.72794" cy="696.91495" rx="4.77581" ry="3.3223" transform="translate(-494.26937 1091.63947) rotate(-89.56675)" fill="#3f3d56"/><ellipse cx="849.98821" cy="541.09416" rx="5.25681" ry="7.55666" transform="translate(-101.17347 1204.59943) rotate(-81.72174)" fill="#e6e6e6"/><ellipse cx="899.15973" cy="536.29611" rx="5.2568" ry="7.55666" transform="translate(-54.33364 1249.15138) rotate(-81.72174)" fill="#3f3d56"/><ellipse cx="836.5236" cy="501.286" rx="5.25681" ry="7.55666" transform="matrix(0.14398, -0.98958, 0.98958, 0.14398, -73.30606, 1157.19856)" fill="#ff6584"/><ellipse cx="819.31304" cy="486.04292" rx="4.77581" ry="3.3223" transform="translate(33.76519 1201.93792) rotate(-89.56675)" fill="#e6e6e6"/><ellipse cx="812.06731" cy="455.6713" rx="4.77581" ry="3.3223" transform="translate(56.94499 1164.55045) rotate(-89.56675)" fill="#3f3d56"/><ellipse cx="868.41248" cy="509.12322" rx="4.77581" ry="3.3223" transform="translate(59.41371 1273.94173) rotate(-89.56675)" fill="#e6e6e6"/><ellipse cx="844.65067" cy="520.98721" rx="4.77581" ry="3.3223" transform="translate(23.96793 1261.95489) rotate(-89.56675)" fill="#ff6584"/><ellipse cx="877.72794" cy="542.91495" rx="4.77581" ry="3.3223" transform="translate(34.86796 1316.79314) rotate(-89.56675)" fill="#3f3d56"/><ellipse cx="666.98821" cy="256.09416" rx="5.25681" ry="7.55666" transform="translate(24.20544 779.54069) rotate(-81.72174)" fill="#fff"/><ellipse cx="716.15973" cy="251.29611" rx="5.2568" ry="7.55666" transform="translate(71.04527 824.09264) rotate(-81.72174)" fill="#3f3d56"/><ellipse cx="653.5236" cy="216.286" rx="5.25681" ry="7.55666" transform="translate(52.07285 732.13983) rotate(-81.72174)" fill="#ff6584"/><ellipse cx="636.31304" cy="201.04292" rx="4.77581" ry="3.3223" transform="translate(137.1408 736.09819) rotate(-89.56675)" fill="#e6e6e6"/><ellipse cx="629.06731" cy="170.6713" rx="4.77581" ry="3.3223" transform="translate(160.32061 698.71071) rotate(-89.56675)" fill="#3f3d56"/><ellipse cx="685.41248" cy="224.12322" rx="4.77581" ry="3.3223" transform="translate(162.78933 808.102) rotate(-89.56675)" fill="#e6e6e6"/><ellipse cx="661.65067" cy="235.98721" rx="4.77581" ry="3.3223" transform="translate(127.34354 796.11516) rotate(-89.56675)" fill="#ff6584"/><ellipse cx="694.72794" cy="257.91495" rx="4.77581" ry="3.3223" transform="translate(138.24358 850.95341) rotate(-89.56675)" fill="#3f3d56"/></svg>`;
+
+export const NOTESNOOK_LOGO_SVG = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24_33)">
+<path d="M1024 0H0V1024H1024V0Z" fill="black"/>
+<path d="M724.985 682.919C707.73 733.33 673.15 775.984 627.397 803.291C581.645 830.598 527.687 840.787 475.128 832.044C422.568 823.301 374.814 796.194 340.365 755.546C305.916 714.898 287.006 663.347 287 610.064V499.814L366.121 532.867V610.019C366.114 630.798 370.555 651.337 379.145 670.256C387.735 689.176 400.276 706.037 415.925 719.707C418.895 722.294 421.978 724.814 425.161 727.166C448.518 744.554 476.563 754.518 505.655 755.763C506.645 755.763 507.601 755.842 508.58 755.864C509.559 755.887 510.83 755.864 511.955 755.864C513.08 755.864 514.205 755.864 515.33 755.864C516.455 755.864 517.265 755.864 518.255 755.763C547.336 754.515 575.371 744.56 598.726 727.188C601.899 724.837 604.981 722.328 607.963 719.741C628.519 701.761 643.619 678.375 651.545 652.241L724.985 682.919Z" fill="white"/>
+<path d="M737 414V610.065C737 612.596 737 615.139 736.842 617.67L657.879 584.651V414C657.866 376.316 643.272 340.099 617.154 312.934C591.035 285.77 555.419 269.766 517.765 268.274C480.11 266.782 443.339 279.918 415.154 304.931C386.968 329.944 369.554 364.893 366.56 402.457C366.279 406.26 366.121 410.119 366.121 414V462.712L287 429.637V189H512C571.674 189 628.903 212.705 671.099 254.901C713.295 297.097 737 354.326 737 414Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_24_33">
+<rect width="1024" height="1024" rx="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
diff --git a/apps/mobile/app/components/announcements/cta.js b/apps/mobile/app/components/announcements/cta.js
index 2516450a4..6c53315a4 100644
--- a/apps/mobile/app/components/announcements/cta.js
+++ b/apps/mobile/app/components/announcements/cta.js
@@ -23,7 +23,7 @@ import { Linking, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
@@ -75,7 +75,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.sm}
+                fontSize={AppFontSize.sm}
                 type="transparent"
                 textStyle={{
                   textDecorationLine: "underline"
@@ -95,7 +95,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.sm}
+                fontSize={AppFontSize.sm}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
@@ -118,7 +118,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
                   text: color
@@ -141,7 +141,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
diff --git a/apps/mobile/app/components/announcements/description.js b/apps/mobile/app/components/announcements/description.js
index aa2a18a1d..95a2631cd 100644
--- a/apps/mobile/app/components/announcements/description.js
+++ b/apps/mobile/app/components/announcements/description.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
@@ -30,7 +30,7 @@ export const Description = ({ text, style = {}, inline }) => {
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? SIZE.sm : SIZE.md}
+      size={inline ? AppFontSize.sm : AppFontSize.md}
     >
       {text}
     </Paragraph>
diff --git a/apps/mobile/app/components/announcements/subheading.js b/apps/mobile/app/components/announcements/subheading.js
index 747f05183..87c7ee635 100644
--- a/apps/mobile/app/components/announcements/subheading.js
+++ b/apps/mobile/app/components/announcements/subheading.js
@@ -18,14 +18,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
-      size={SIZE.md + 2}
+      size={AppFontSize.md + 2}
       style={{
         marginHorizontal: 12,
         marginTop: 12,
diff --git a/apps/mobile/app/components/announcements/title.js b/apps/mobile/app/components/announcements/title.js
index 9de105f5f..5b019ba13 100644
--- a/apps/mobile/app/components/announcements/title.js
+++ b/apps/mobile/app/components/announcements/title.js
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
@@ -48,7 +48,7 @@ export const Title = ({ text, style = {}, inline }) => {
           flexShrink: 1
         }}
         numberOfLines={1}
-        size={inline ? SIZE.md : SIZE.xl}
+        size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
@@ -67,7 +67,7 @@ export const Title = ({ text, style = {}, inline }) => {
           right: 0
         }}
         iconSize={24}
-        fontSize={SIZE.xs}
+        fontSize={AppFontSize.xs}
         style={{
           borderRadius: 100,
           paddingVertical: 0,
diff --git a/apps/mobile/app/components/app-lock-overlay/index.tsx b/apps/mobile/app/components/app-lock-overlay/index.tsx
index f376778b5..d26a700b2 100644
--- a/apps/mobile/app/components/app-lock-overlay/index.tsx
+++ b/apps/mobile/app/components/app-lock-overlay/index.tsx
@@ -44,7 +44,7 @@ import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -313,7 +313,7 @@ const AppLockedScreen = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                 />
               </>
             ) : null}
diff --git a/apps/mobile/app/components/attachments/actions.tsx b/apps/mobile/app/components/attachments/actions.tsx
index 6d00516af..594599c5e 100644
--- a/apps/mobile/app/components/attachments/actions.tsx
+++ b/apps/mobile/app/components/attachments/actions.tsx
@@ -45,7 +45,7 @@ import {
   eDBItemUpdate,
   eOnLoadNote
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
@@ -233,7 +233,7 @@ const Actions = ({
           style={{
             paddingHorizontal: 12
           }}
-          size={SIZE.lg}
+          size={AppFontSize.lg}
         >
           {filename}
         </Heading>
@@ -247,15 +247,15 @@ const Actions = ({
             gap: 10
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {attachment.mimeType}
           </Paragraph>
-          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
               {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
@@ -268,7 +268,7 @@ const Actions = ({
                 context: "local"
               });
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {attachment.hash}
@@ -292,7 +292,7 @@ const Actions = ({
               style={{
                 paddingHorizontal: 12
               }}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
             >
               {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
@@ -314,7 +314,7 @@ const Actions = ({
                 }}
                 key={item.id}
               >
-                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
               </Pressable>
             ))}
           </>
@@ -335,7 +335,7 @@ const Actions = ({
           icon={item.icon}
           loading={loading?.name === item.name}
           type="plain"
-          fontSize={SIZE.sm}
+          fontSize={AppFontSize.sm}
           style={{
             borderRadius: 0,
             justifyContent: "flex-start",
diff --git a/apps/mobile/app/components/attachments/attachment-item.tsx b/apps/mobile/app/components/attachments/attachment-item.tsx
index 9a61e0d96..6ba399b88 100644
--- a/apps/mobile/app/components/attachments/attachment-item.tsx
+++ b/apps/mobile/app/components/attachments/attachment-item.tsx
@@ -25,7 +25,7 @@ import { TouchableOpacity, View } from "react-native";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useDBItem } from "../../hooks/use-db-item";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
@@ -101,7 +101,7 @@ export const AttachmentItem = ({
                 paddingHorizontal: 2,
                 width: 30,
                 height: 30,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               <Paragraph
@@ -124,7 +124,7 @@ export const AttachmentItem = ({
               }}
             >
               <Paragraph
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   flexWrap: "wrap"
                 }}
@@ -136,7 +136,10 @@ export const AttachmentItem = ({
               </Paragraph>
 
               {!hideWhenNotDownloading ? (
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+                <Paragraph
+                  color={colors.secondary.paragraph}
+                  size={AppFontSize.xxs}
+                >
                   {strings.fileSize()}: {formatBytes(attachment.size)}
                 </Paragraph>
               ) : null}
@@ -159,7 +162,7 @@ export const AttachmentItem = ({
               }}
             >
               <ProgressCircleComponent
-                size={SIZE.xxl}
+                size={AppFontSize.xxl}
                 progress={
                   currentProgress?.value ? currentProgress?.value / 100 : 0
                 }
diff --git a/apps/mobile/app/components/attachments/index.tsx b/apps/mobile/app/components/attachments/index.tsx
index 5bb4da5e2..f20b2fc3a 100644
--- a/apps/mobile/app/components/attachments/index.tsx
+++ b/apps/mobile/app/components/attachments/index.tsx
@@ -38,7 +38,7 @@ import { downloadAttachments } from "../../common/filesystem/download-attachment
 import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
 import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { Header } from "../header";
@@ -375,7 +375,7 @@ export const AttachmentDialog = ({
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               onPress={onCheck}
             />
 
@@ -399,7 +399,7 @@ export const AttachmentDialog = ({
                   negativeText: strings.cancel()
                 });
               }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </View>
         </View>
@@ -474,7 +474,7 @@ export const AttachmentDialog = ({
             <IconButton
               type={rechecker.isWorking ? "errorShade" : "plain"}
               name={rechecker.isWorking ? "close" : "check"}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={
                 rechecker.isWorking ? colors.error.icon : colors.primary.accent
               }
@@ -512,7 +512,7 @@ export const AttachmentDialog = ({
                   }
                   key={item.title}
                   title={item.title}
-                  fontSize={SIZE.sm}
+                  fontSize={AppFontSize.sm}
                   style={{
                     borderRadius: 100,
                     paddingHorizontal: 12,
diff --git a/apps/mobile/app/components/auth/common.js b/apps/mobile/app/components/auth/common.js
index d5faf4066..df2a4096b 100644
--- a/apps/mobile/app/components/auth/common.js
+++ b/apps/mobile/app/components/auth/common.js
@@ -20,23 +20,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { createRef } from "react";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseLoginDialog } from "../../utils/events";
+import Navigation from "../../services/navigation";
+export const AuthMode = {
+  login: 0,
+  signup: 1,
+  welcomeSignup: 2,
+  trialSignup: 3
+};
 
 export const initialAuthMode = createRef(0);
 export function hideAuth() {
   eSendEvent(eCloseLoginDialog);
-
-  // if (initialAuthMode.current === 2) {
-  //   Navigation.replace(
-  //     {
-  //       name: 'Notes'
-  //     },
-  //     {
-  //       menu: true
-  //     }
-  //   );
-  // } else {
-  //   Navigation.goBack();
-  // }
-
-  // tabBarRef.current?.unlock();
+  if (initialAuthMode.current === AuthMode.welcomeSignup) {
+    Navigation.replace("FluidPanelsView");
+  } else {
+    Navigation.goBack();
+  }
 }
diff --git a/apps/mobile/app/components/auth/index.js b/apps/mobile/app/components/auth/index.js
index 457b0d9ca..4e8ceb9e7 100644
--- a/apps/mobile/app/components/auth/index.js
+++ b/apps/mobile/app/components/auth/index.js
@@ -17,35 +17,90 @@ 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, { useState } from "react";
 import { View } from "react-native";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import Navigation from "../../services/navigation";
 import { Toast } from "../toast";
-import { initialAuthMode } from "./common";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-
-export const AuthMode = {
-  login: 0,
-  signup: 1,
-  welcomeSignup: 2,
-  trialSignup: 3
-};
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
+  const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
-  useNavigationFocus(navigation, {
-    onFocus: () => {
-      //tabBarRef?.current.lock();
-      initialAuthMode.current = route?.params.mode || AuthMode.login;
-    }
-  });
+  useNavigationFocus(navigation, {});
 
   return (
     <View style={{ flex: 1 }}>
+      <View
+        style={{
+          position: "absolute",
+          paddingTop: insets.top,
+          top: 0,
+          zIndex: 999,
+          backgroundColor: colors.secondary.background,
+          width: "100%"
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: 12,
+            width: "100%",
+            height: 50,
+            justifyContent:
+              initialAuthMode.current !== AuthMode.welcomeSignup
+                ? "space-between"
+                : "flex-end"
+          }}
+        >
+          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
+            <IconButton
+              name="arrow-left"
+              onPress={() => {
+                if (initialAuthMode.current === 2) {
+                  Navigation.replace("FluidPanelsView");
+                } else {
+                  Navigation.goBack();
+                }
+              }}
+              color={colors.primary.paragraph}
+            />
+          )}
+
+          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
+            <Button
+              title={strings.skip()}
+              onPress={() => {
+                Navigation.goBack();
+              }}
+              iconSize={16}
+              type="plain"
+              iconPosition="right"
+              icon="chevron-right"
+              height={25}
+              iconStyle={{
+                marginTop: 2
+              }}
+              style={{
+                paddingHorizontal: 6
+              }}
+            />
+          )}
+        </View>
+      </View>
+
       {currentAuthMode !== AuthMode.login ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}
diff --git a/apps/mobile/app/components/auth/login.js b/apps/mobile/app/components/auth/login.js
index be83699a6..ba03e919b 100644
--- a/apps/mobile/app/components/auth/login.js
+++ b/apps/mobile/app/components/auth/login.js
@@ -17,6 +17,7 @@ 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, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
@@ -24,10 +25,9 @@ import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
@@ -38,7 +38,6 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { strings } from "@notesnook/intl";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -71,8 +70,8 @@ export const Login = ({ changeMode }) => {
       }
     }, 5000);
   });
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -96,6 +95,7 @@ export const Login = ({ changeMode }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
+          height: "100%",
           alignSelf: "center"
         }}
       >
@@ -107,12 +107,12 @@ export const Login = ({ changeMode }) => {
             borderBottomWidth: 0.8,
             marginBottom: 12,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            alignSelf: isTablet ? "center" : undefined,
+            borderWidth: isTablet ? 1 : null,
+            borderColor: isTablet ? colors.primary.border : null,
+            borderRadius: isTablet ? 20 : null,
+            marginTop: isTablet ? 50 : null,
+            width: !isTablet ? null : "50%",
             minHeight: height * 0.4
           }}
         >
@@ -146,7 +146,7 @@ export const Login = ({ changeMode }) => {
               marginTop: 10
             }}
             extraBold
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.loginToYourAccount()}
           </Heading>
@@ -226,7 +226,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="plain"
               />
             </>
@@ -244,11 +244,10 @@ export const Login = ({ changeMode }) => {
                 login();
               }}
               style={{
-                width: 250,
-                borderRadius: 100
+                width: 250
               }}
               height={50}
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -269,7 +268,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type="errorShade"
               />
             )}
@@ -288,12 +287,12 @@ export const Login = ({ changeMode }) => {
                 }}
               >
                 <Paragraph
-                  size={SIZE.xs + 1}
+                  size={AppFontSize.xs + 1}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={SIZE.xs + 1}
+                    size={AppFontSize.xs + 1}
                     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 400961270..d5a2cd337 100644
--- a/apps/mobile/app/components/auth/session-expired.js
+++ b/apps/mobile/app/components/auth/session-expired.js
@@ -34,7 +34,7 @@ import Sync from "../../services/sync";
 import { clearAllStores } from "../../stores";
 import { useUserStore } from "../../stores/use-user-store";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
@@ -48,18 +48,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
-
-function getObfuscatedEmail(email) {
-  if (!email) return "";
-  const [username, provider] = email.split("@");
-  if (username.length === 1) return `****@${provider}`;
-  return email.replace(/(.{1})(.*)(?=@)/, function (gp1, gp2, gp3) {
-    for (let i = 0; i < gp3.length; i++) {
-      gp2 += "*";
-    }
-    return gp2;
-  });
-}
+import { getObfuscatedEmail } from "../../utils/functions";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -193,7 +182,7 @@ export const SessionExpired = () => {
               color={colors.error.icon}
               size={50}
             />
-            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
+            <Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
               {strings.sessionExpired()}
             </Heading>
             <Paragraph
diff --git a/apps/mobile/app/components/auth/signup.js b/apps/mobile/app/components/auth/signup.js
index 15f9991b9..5192e5115 100644
--- a/apps/mobile/app/components/auth/signup.js
+++ b/apps/mobile/app/components/auth/signup.js
@@ -17,6 +17,8 @@ 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, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
@@ -24,19 +26,16 @@ import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
-import { useSettingStore } from "../../stores/use-setting-store";
-import SettingsService from "../../services/settings";
-import { strings } from "@notesnook/intl";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -50,7 +49,8 @@ export const Signup = ({ changeMode, trial }) => {
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
-  const deviceMode = useSettingStore((state) => state.deviceMode);
+  const isTablet = width > 600;
+
   const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
@@ -103,9 +103,8 @@ export const Signup = ({ changeMode, trial }) => {
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.primary.background,
-          zIndex: 10,
           width: "100%",
-          alignSelf: "center"
+          height: "100%"
         }}
       >
         <View
@@ -116,12 +115,12 @@ export const Signup = ({ changeMode, trial }) => {
             marginBottom: 20,
             borderBottomWidth: 0.8,
             borderBottomColor: colors.primary.border,
-            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-            borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-            borderRadius: deviceMode !== "mobile" ? 20 : null,
-            marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%",
+            alignSelf: isTablet ? "center" : undefined,
+            borderWidth: isTablet ? 1 : null,
+            borderColor: isTablet ? colors.primary.border : null,
+            borderRadius: isTablet ? 20 : null,
+            marginTop: isTablet ? 50 : null,
+            width: !isTablet ? null : "50%",
             minHeight: height * 0.4
           }}
         >
@@ -155,7 +154,7 @@ export const Signup = ({ changeMode, trial }) => {
               marginBottom: 25,
               marginTop: 10
             }}
-            size={SIZE.xxl}
+            size={AppFontSize.xxl}
           >
             {strings.createYourAccount()}
           </Heading>
@@ -233,12 +232,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -247,11 +246,12 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[1]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -260,8 +260,9 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
+              {" "}
               {strings.signupAgreement[3]()}
-            </Paragraph>
+            </Paragraph>{" "}
             {strings.signupAgreement[4]()}
           </Paragraph>
 
@@ -270,11 +271,9 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             style={{
-              marginRight: 12,
-              width: 250,
-              borderRadius: 100
+              width: 250
             }}
           />
 
@@ -290,10 +289,13 @@ export const Signup = ({ changeMode, trial }) => {
               paddingVertical: 12
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
+            <Paragraph
+              size={AppFontSize.xs + 1}
+              color={colors.secondary.paragraph}
+            >
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={SIZE.xs + 1}
+                size={AppFontSize.xs + 1}
                 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 a980d6d28..fa2f3e40d 100644
--- a/apps/mobile/app/components/auth/two-factor.js
+++ b/apps/mobile/app/components/auth/two-factor.js
@@ -30,7 +30,7 @@ import {
   ToastManager
 } from "../../services/event-manager";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
@@ -205,7 +205,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               onSubmitEditing={onNext}
               caretHidden
               inputStyle={{
-                fontSize: SIZE.lg,
+                fontSize: AppFontSize.lg,
                 height: 60,
                 textAlign: "center",
                 letterSpacing: 10,
@@ -288,7 +288,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                     flexShrink: 1
                   }}
                 >
-                  <Paragraph size={SIZE.md}>{item.title}</Paragraph>
+                  <Paragraph size={AppFontSize.md}>{item.title}</Paragraph>
                 </View>
               </Pressable>
             ))}
diff --git a/apps/mobile/app/components/container/floating-button.tsx b/apps/mobile/app/components/container/floating-button.tsx
index 6cb76f7b1..c3ef0056c 100644
--- a/apps/mobile/app/components/container/floating-button.tsx
+++ b/apps/mobile/app/components/container/floating-button.tsx
@@ -33,7 +33,7 @@ import { editorState } from "../../screens/editor/tiptap/utils";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
-import { SIZE, normalize } from "../../utils/size";
+import { AppFontSize, normalize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 
 interface FloatingButtonProps {
@@ -148,7 +148,7 @@ const FloatingButton = ({
                 : "plus"
             }
             color={colors.primary.accent}
-            size={SIZE.xxxl}
+            size={AppFontSize.xxxl}
           />
         </View>
       </TouchableOpacity>
diff --git a/apps/mobile/app/components/delay-layout/default-placeholder.tsx b/apps/mobile/app/components/delay-layout/default-placeholder.tsx
index 4fe87d610..4fb786ee2 100644
--- a/apps/mobile/app/components/delay-layout/default-placeholder.tsx
+++ b/apps/mobile/app/components/delay-layout/default-placeholder.tsx
@@ -23,6 +23,7 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { hexToRGBA } from "../../utils/colors";
+import { defaultBorderRadius } from "../../utils/size";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -59,7 +60,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 150,
               height: 20,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -68,7 +69,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 250,
               height: 14,
               backgroundColor: colors.primary.hover,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
 
@@ -111,7 +112,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 150,
                 height: 12,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginBottom: 10
               }}
             />
@@ -120,7 +121,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 250,
                 height: 16,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             />
           </View>
@@ -179,7 +180,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: 200,
           height: 16,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5
+          borderRadius: defaultBorderRadius
         }}
       />
       <View
@@ -187,7 +188,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: "85%",
           height: 13,
           backgroundColor: colors.secondary.background,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           marginTop: 10
         }}
       />
@@ -203,7 +204,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 50,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5
+            borderRadius: defaultBorderRadius
           }}
         />
         <View
@@ -211,7 +212,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 60,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             marginLeft: 10
           }}
         />
diff --git a/apps/mobile/app/components/delay-layout/settings-placeholder.tsx b/apps/mobile/app/components/delay-layout/settings-placeholder.tsx
index fd9d5a34f..6a550ccb7 100644
--- a/apps/mobile/app/components/delay-layout/settings-placeholder.tsx
+++ b/apps/mobile/app/components/delay-layout/settings-placeholder.tsx
@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
+import { defaultBorderRadius } from "../../utils/size";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -31,7 +32,7 @@ export const SettingsPlaceholder = () => {
           width: 100,
           height: 12,
           backgroundColor: colors.primary.shade,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           marginLeft: 12,
           marginBottom: 12
         }}
@@ -62,7 +63,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -71,7 +72,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>
@@ -104,7 +105,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 10
             }}
           />
@@ -113,7 +114,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
         </View>
diff --git a/apps/mobile/app/components/dialog/base-dialog.tsx b/apps/mobile/app/components/dialog/base-dialog.tsx
index a460cb9a9..f863b39b1 100644
--- a/apps/mobile/app/components/dialog/base-dialog.tsx
+++ b/apps/mobile/app/components/dialog/base-dialog.tsx
@@ -17,6 +17,7 @@ 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 { ScopedThemeProvider } from "@notesnook/theme";
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import {
   ColorValue,
@@ -30,11 +31,8 @@ import {
 } from "react-native";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { BouncingView } from "../ui/transitions/bouncing-view";
-import { ScopedThemeProvider } from "@notesnook/theme";
-import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
-import { useAppState } from "../../hooks/use-app-state";
+import { BouncingView } from "../ui/transitions/bouncing-view";
 
 export interface BaseDialogProps extends PropsWithChildren {
   animation?: "fade" | "none" | "slide" | undefined;
diff --git a/apps/mobile/app/components/dialog/dialog-buttons.js b/apps/mobile/app/components/dialog/dialog-buttons.js
index f4a3d8f23..084f13abf 100644
--- a/apps/mobile/app/components/dialog/dialog-buttons.js
+++ b/apps/mobile/app/components/dialog/dialog-buttons.js
@@ -22,7 +22,7 @@ import { ActivityIndicator, 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 { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
 import { getColorLinearShade } from "../../utils/colors";
@@ -57,7 +57,10 @@ const DialogButtons = ({
       ]}
     >
       {loading ? (
-        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+        <ActivityIndicator
+          color={colors.primary.accent}
+          size={AppFontSize.lg}
+        />
       ) : doneText ? (
         <View
           style={{
@@ -68,7 +71,7 @@ const DialogButtons = ({
           <Icon
             color={colors.primary.accent}
             name="check-circle-outline"
-            size={SIZE.md}
+            size={AppFontSize.md}
           />
           <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
@@ -84,7 +87,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.md}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -93,7 +96,7 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10
diff --git a/apps/mobile/app/components/dialog/dialog-header.tsx b/apps/mobile/app/components/dialog/dialog-header.tsx
index d4323353c..70287ac95 100644
--- a/apps/mobile/app/components/dialog/dialog-header.tsx
+++ b/apps/mobile/app/components/dialog/dialog-header.tsx
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
@@ -82,7 +82,7 @@ const DialogHeader = ({
           >
             <Heading
               style={{ textAlign: centered ? "center" : "left" }}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             >
               {title}{" "}
               {titlePart ? (
diff --git a/apps/mobile/app/components/dialog/index.js b/apps/mobile/app/components/dialog/index.js
index 04b035f84..4f3a0a706 100644
--- a/apps/mobile/app/components/dialog/index.js
+++ b/apps/mobile/app/components/dialog/index.js
@@ -39,7 +39,7 @@ import { Button } from "../ui/button";
 import { getContainerBorder } from "../../utils/colors";
 import { Notice } from "../ui/notice";
 import { strings } from "@notesnook/intl";
-import { br } from "../../utils/size";
+import { defaultBorderRadius } from "../../utils/size";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
@@ -126,7 +126,7 @@ export const Dialog = ({ context = "global" }) => {
     ...getElevationStyle(5),
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
-    borderRadius: br,
+    borderRadius: defaultBorderRadius,
     backgroundColor: colors.primary.background,
     paddingTop: 12,
     ...getContainerBorder(colors.primary.border, 0.5),
diff --git a/apps/mobile/app/components/dialogs/applock-password/index.tsx b/apps/mobile/app/components/dialogs/applock-password/index.tsx
index 878411408..6bc450ea8 100644
--- a/apps/mobile/app/components/dialogs/applock-password/index.tsx
+++ b/apps/mobile/app/components/dialogs/applock-password/index.tsx
@@ -39,7 +39,7 @@ import {
   eCloseAppLocKPasswordDailog,
   eOpenAppLockPasswordDialog
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -192,7 +192,7 @@ export const AppLockPassword = () => {
                     height: 25,
                     marginRight: 5
                   }}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               )
             }
@@ -248,7 +248,7 @@ export const AppLockPassword = () => {
                     setSecureTextEntry(true);
                   });
                 }}
-                iconSize={SIZE.lg}
+                iconSize={AppFontSize.lg}
                 type="plain"
                 iconColor={
                   accountPass ? colors.primary.accent : colors.primary.icon
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 a6e78fa46..711d972ef 100644
--- a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
+++ b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
@@ -27,7 +27,7 @@ import {
 import { Image as ImageType } from "react-native-image-crop-picker";
 import { useThemeColors } from "@notesnook/theme";
 import { presentSheet } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
@@ -80,7 +80,7 @@ export default function AttachImage({
                 style={{
                   width: 100,
                   height: 100,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   backgroundColor: "black",
                   marginRight: 6
                 }}
@@ -105,7 +105,7 @@ export default function AttachImage({
         }}
       >
         <IconButton
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
           color={compress ? colors.primary.accent : colors.primary.icon}
           style={{
@@ -122,7 +122,7 @@ export default function AttachImage({
             flexShrink: 1,
             marginLeft: 3
           }}
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           {strings.compress()} ({strings.recommended().toLowerCase()})
         </Paragraph>
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 9dd3da19f..5c8883cfb 100644
--- a/apps/mobile/app/components/dialogs/jump-to-section/index.tsx
+++ b/apps/mobile/app/components/dialogs/jump-to-section/index.tsx
@@ -39,7 +39,7 @@ import {
   eOpenJumpToDialog,
   eScrollEvent
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
@@ -158,7 +158,7 @@ const JumpToSectionDialog = () => {
       >
         {loading ? (
           <ActivityIndicator
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={colors.primary.accent}
             style={{
               marginBottom: 20
@@ -196,7 +196,7 @@ const JumpToSectionDialog = () => {
                     }}
                   >
                     <Paragraph
-                      size={SIZE.sm}
+                      size={AppFontSize.sm}
                       color={
                         currentIndex === index
                           ? colors.static.white
diff --git a/apps/mobile/app/components/dialogs/pdf-preview/index.js b/apps/mobile/app/components/dialogs/pdf-preview/index.js
index 9c0874867..d0f57ba5a 100644
--- a/apps/mobile/app/components/dialogs/pdf-preview/index.js
+++ b/apps/mobile/app/components/dialogs/pdf-preview/index.js
@@ -34,7 +34,7 @@ import {
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
 import { presentDialog } from "../../dialog/functions";
@@ -216,7 +216,7 @@ const PDFPreview = () => {
                     style={{
                       marginRight: 12
                     }}
-                    size={SIZE.xxl}
+                    size={AppFontSize.xxl}
                   />
                 </View>
 
diff --git a/apps/mobile/app/components/dialogs/progress/index.tsx b/apps/mobile/app/components/dialogs/progress/index.tsx
index 7f1b4b3ea..e1469a207 100644
--- a/apps/mobile/app/components/dialogs/progress/index.tsx
+++ b/apps/mobile/app/components/dialogs/progress/index.tsx
@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { View } from "react-native";
 import { eSendEvent, eSubscribeEvent } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogContainer from "../../dialog/dialog-container";
@@ -131,7 +131,7 @@ export default function Progress() {
               textAlign: "center"
             }}
             color={colors.primary.paragraph}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           >
             {data?.title}
           </Heading>
diff --git a/apps/mobile/app/components/dialogs/result/index.js b/apps/mobile/app/components/dialogs/result/index.js
index 1249ddcb8..490e11dd8 100644
--- a/apps/mobile/app/components/dialogs/result/index.js
+++ b/apps/mobile/app/components/dialogs/result/index.js
@@ -27,7 +27,7 @@ import {
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
@@ -78,7 +78,7 @@ const ResultDialog = () => {
         }}
       >
         <Heading
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           textBreakStrategy="balanced"
           style={{
             alignSelf: "center",
@@ -94,12 +94,12 @@ const ResultDialog = () => {
 
         <Paragraph
           color={colors.secondary.paragraph}
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
             alignSelf: "center",
             textAlign: "center",
             maxWidth: "80%",
-            lineHeight: SIZE.sm + 5
+            lineHeight: AppFontSize.sm + 5
           }}
         >
           {dialogData.paragraph}
@@ -134,7 +134,7 @@ const ResultDialog = () => {
               paddingHorizontal: 12
             }}
             onPress={close}
-            fontSize={SIZE.md + 2}
+            fontSize={AppFontSize.md + 2}
           />
         </View>
       </View>
diff --git a/apps/mobile/app/components/dialogs/result/pro-features.js b/apps/mobile/app/components/dialogs/result/pro-features.js
index 5222faed8..3bad10c5f 100644
--- a/apps/mobile/app/components/dialogs/result/pro-features.js
+++ b/apps/mobile/app/components/dialogs/result/pro-features.js
@@ -27,7 +27,7 @@ import {
   eCloseResultDialog,
   eOpenPremiumDialog
 } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
 export const ProFeatures = ({ count = 6 }) => {
@@ -69,11 +69,15 @@ export const ProFeatures = ({ count = 6 }) => {
               paddingHorizontal: 0,
               marginBottom: 10,
               alignItems: "center",
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               justifyContent: "flex-start"
             }}
           >
-            <Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
+            <Icon
+              size={AppFontSize.lg}
+              color={colors.primary.accent}
+              name="check"
+            />
             <Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
               {item.content}
             </Paragraph>
@@ -86,7 +90,7 @@ export const ProFeatures = ({ count = 6 }) => {
           await sleep(300);
           eSendEvent(eOpenPremiumDialog);
         }}
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         style={{
           textDecorationLine: "underline",
           color: colors.secondary.paragraph
diff --git a/apps/mobile/app/components/header/index.tsx b/apps/mobile/app/components/header/index.tsx
index c55443ea3..eeef627c4 100644
--- a/apps/mobile/app/components/header/index.tsx
+++ b/apps/mobile/app/components/header/index.tsx
@@ -28,7 +28,7 @@ import {
 import { RouteName } from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { eScrollEvent } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { IconButtonProps } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
@@ -121,7 +121,7 @@ export const Header = ({
               : strings.searchInRoute(title)}
           </Paragraph>
         ) : (
-          <Heading size={SIZE.lg}>{title}</Heading>
+          <Heading size={AppFontSize.lg}>{title}</Heading>
         )}
 
         <RightMenus rightButton={rightButton} />
diff --git a/apps/mobile/app/components/header/title.tsx b/apps/mobile/app/components/header/title.tsx
index 5c38a5c3e..922440ef4 100644
--- a/apps/mobile/app/components/header/title.tsx
+++ b/apps/mobile/app/components/header/title.tsx
@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { eScrollEvent } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Tag from "../ui/tag";
 import Heading from "../ui/typography/heading";
 
@@ -75,7 +75,7 @@ export const Title = ({
       {!visible ? (
         <Heading
           numberOfLines={1}
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           style={{
             flexWrap: "wrap",
             marginTop: Platform.OS === "ios" ? -1 : 0
@@ -83,7 +83,7 @@ export const Title = ({
           color={accentColor || colors.primary.heading}
         >
           {isTag ? (
-            <Heading size={SIZE.xl} color={colors.primary.accent}>
+            <Heading size={AppFontSize.xl} color={colors.primary.accent}>
               #
             </Heading>
           ) : null}
diff --git a/apps/mobile/app/components/intro/index.js b/apps/mobile/app/components/intro/index.tsx
similarity index 66%
rename from apps/mobile/app/components/intro/index.js
rename to apps/mobile/app/components/intro/index.tsx
index f4076ed46..8bda34557 100644
--- a/apps/mobile/app/components/intro/index.js
+++ b/apps/mobile/app/components/intro/index.tsx
@@ -23,31 +23,27 @@ import React from "react";
 import { Linking, ScrollView, useWindowDimensions, View } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
-import SettingsService from "../../services/settings";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { getElevationStyle } from "../../utils/elevation";
-import { eOpenLoginDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
-import { AuthMode } from "../auth";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import SettingsService from "../../services/settings";
+import { AuthMode } from "../auth/common";
 
-const Intro = ({ navigation }) => {
+const Intro = () => {
   const { colors } = useThemeColors();
   const { width, height } = useWindowDimensions();
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const insets = useGlobalSafeAreaInsets();
+  const isTablet = width > 600;
+
   const renderItem = React.useCallback(
-    ({ item }) => (
+    ({ item }: { item: (typeof strings.introData)[0] }) => (
       <View
         style={{
           justifyContent: "center",
-          width: deviceMode !== "mobile" ? width / 2 : width,
-          paddingHorizontal:
-            deviceMode !== "mobile" ? (width / 2) * 0.05 : width * 0.05
+          width: isTablet ? width / 2 : width,
+          paddingHorizontal: isTablet ? (width / 2) * 0.05 : width * 0.05
         }}
       >
         <View
@@ -88,21 +84,21 @@ const Intro = ({ navigation }) => {
                 marginBottom: 5
               }}
               extraBold
-              size={SIZE.xxl}
+              size={AppFontSize.xxl}
             >
               {heading()}
             </Heading>
           ))}
 
           {item.body ? (
-            <Paragraph size={SIZE.sm}>{item.body()}</Paragraph>
+            <Paragraph size={AppFontSize.sm}>{item.body()}</Paragraph>
           ) : null}
 
           {item.tesimonial ? (
             <Paragraph
               style={{
                 fontStyle: "italic",
-                fontSize: SIZE.lg
+                fontSize: AppFontSize.lg
               }}
               onPress={() => {
                 Linking.openURL(item.link);
@@ -114,31 +110,37 @@ const Intro = ({ navigation }) => {
         </View>
       </View>
     ),
-    [colors.primary.accent, colors.secondary.background, deviceMode, width]
+    [colors.primary.accent, colors.secondary.background, isTablet, width]
   );
 
   return (
     <ScrollView
       testID="notesnook.splashscreen"
       style={{
-        width: "100%"
+        width: "100%",
+        backgroundColor: colors.primary.background
       }}
     >
       <View
-        style={{
-          width: deviceMode !== "mobile" ? width / 2 : "100%",
-          backgroundColor: colors.secondary.background,
-          borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
-          alignSelf: deviceMode !== "mobile" ? "center" : undefined,
-          borderWidth: deviceMode !== "mobile" ? 1 : null,
-          borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
-          borderRadius: deviceMode !== "mobile" ? 20 : null,
-          marginTop: deviceMode !== "mobile" ? 50 : null,
-          paddingTop: insets.top + 10,
-          paddingBottom: insets.top + 10,
-          minHeight: height * 0.7 - (insets.top + insets.bottom)
-        }}
+        style={[
+          {
+            width: "100%",
+            backgroundColor: colors.secondary.background,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.primary.border,
+            paddingTop: insets.top + 10,
+            paddingBottom: insets.top + 10,
+            minHeight: height * 0.7 - (insets.top + insets.bottom)
+          },
+          isTablet && {
+            width: width / 2,
+            alignSelf: "center",
+            borderWidth: 1,
+            borderColor: colors.primary.border,
+            borderRadius: 20,
+            marginTop: 50
+          }
+        ]}
       >
         <SwiperFlatList
           autoplay
@@ -170,23 +172,12 @@ const Intro = ({ navigation }) => {
         <Button
           width={250}
           onPress={async () => {
-            eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
-            setTimeout(() => {
-              SettingsService.set({
-                introCompleted: true
-              });
-              Navigation.replace("Notes", {
-                canGoBack: false
-              });
-            }, 1000);
+            SettingsService.set({ introCompleted: true });
+            Navigation.push("Auth", {
+              mode: AuthMode.welcomeSignup
+            });
           }}
-          style={{
-            paddingHorizontal: 24,
-            alignSelf: "center",
-            ...getElevationStyle(5),
-            borderRadius: 100
-          }}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.md}
           type="accent"
           title={strings.getStarted()}
         />
diff --git a/apps/mobile/app/components/intro/welcome.js b/apps/mobile/app/components/intro/welcome.js
deleted file mode 100644
index 3760b3651..000000000
--- a/apps/mobile/app/components/intro/welcome.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 from "react";
-import Animated, { FadeInDown } from "react-native-reanimated";
-import { DDS } from "../../services/device-detection";
-import { eSendEvent } from "../../services/event-manager";
-import Navigation from "../../services/navigation";
-import SettingsService from "../../services/settings";
-import { useThemeColors } from "@notesnook/theme";
-import { getElevationStyle } from "../../../utils/elevation";
-import {
-  eCloseLoading,
-  eOpenLoading,
-  eOpenLoginDialog
-} from "../../utils/events";
-import { SIZE } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth";
-import { Button } from "../ui/button";
-import { SvgView } from "../ui/svg";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-const IMAGE = (color) =>
-  `<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="1100.50064" height="691.70682" viewBox="0 0 1100.50064 691.70682" xmlns:xlink="http://www.w3.org/1999/xlink"><title>two_factor_authentication</title><path d="M1150.25032,388.23743h-1.85859V337.32194a29.4685,29.4685,0,0,0-29.46859-29.46853H1011.05186a29.4685,29.4685,0,0,0-29.46859,29.46853V616.64827a29.46851,29.46851,0,0,0,29.46859,29.46854h107.87128a29.46851,29.46851,0,0,0,29.46859-29.46854V424.47994h1.85859Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M1142.121,339.05342v278.92a22.01111,22.01111,0,0,1-22.01,22.01h-108.39a22.00248,22.00248,0,0,1-22-22.01v-278.92a22.00031,22.00031,0,0,1,22-22h13.15a10.4608,10.4608,0,0,0,9.68,14.4h61.8a10.44027,10.44027,0,0,0,9.67993-14.4H1120.111A22.00894,22.00894,0,0,1,1142.121,339.05342Z" transform="translate(-49.74968 -104.14659)" fill="#d0cde1"/><rect x="945.85129" y="355.70682" width="126" height="34" fill="${color}"/><path d="M1126.601,487.85341h-122a3.00328,3.00328,0,0,1-3-3v-30a3.00328,3.00328,0,0,1,3-3h122a3.00328,3.00328,0,0,1,3,3v30A3.00328,3.00328,0,0,1,1126.601,487.85341Zm-122-34a1.001,1.001,0,0,0-1,1v30a1.00067,1.00067,0,0,0,1,1h122a1.00067,1.00067,0,0,0,1-1v-30a1.001,1.001,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="959.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="981.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1003.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1025.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1047.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><path d="M1142.121,589.61342v28.36a22.01111,22.01111,0,0,1-22.01,22.01h-108.39a22.00248,22.00248,0,0,1-22-22.01v-130.46Z" transform="translate(-49.74968 -104.14659)" opacity="0.1"/><rect x="99.85129" y="459.70682" width="473" height="232" fill="#d0cde1"/><path d="M502.351,795.85341H151.601a2.00591,2.00591,0,0,1-2-2v-228a2.00587,2.00587,0,0,1,2-2h4.44Z" transform="translate(-49.74968 -104.14659)" opacity="0.1"/><rect x="318.85129" y="490.70682" width="732.99951" height="2" fill="#3f3d56"/><path d="M600.34268,108.46435H390.853v-4.31776H295.86217v4.31776H85.5089a14.17039,14.17039,0,0,0-14.1704,14.1704V409.4906a14.17043,14.17043,0,0,0,14.1704,14.17045H600.34268a14.17044,14.17044,0,0,0,14.1704-14.17045V122.63475A14.17039,14.17039,0,0,0,600.34268,108.46435Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="40.59128" y="29.35679" width="505.16998" height="284.98004" fill="#d0cde1"/><circle cx="292.74433" cy="16.4075" r="5.18132" fill="${color}"/><path d="M240.601,239.85341h-12a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h12a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,240.601,239.85341Zm-12-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h12a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="176.85129" y="133.70682" width="228" height="2" fill="#3f3d56"/><rect x="345.85129" y="188.70682" width="53" height="16" fill="${color}"/><path d="M452.601,304.85341h-49a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h49a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,452.601,304.85341Zm-49-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h49a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="703.85129" y="206.70682" width="100" height="70" fill="${color}"/><path d="M863.601,375.35341h-96a4.00427,4.00427,0,0,1-4-4v-66a4.00427,4.00427,0,0,1,4-4h96a4.00426,4.00426,0,0,1,4,4v66A4.00426,4.00426,0,0,1,863.601,375.35341Zm-96-70v66H863.6039l-.00293-66Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M852.601,302.85341h-4a33,33,0,1,0-66,0h-4a37,37,0,1,1,74,0Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M825.601,330.35341a10.00023,10.00023,0,1,0-15.29412,8.47258V349.5593a5.29411,5.29411,0,0,0,5.29412,5.29411h0a5.29411,5.29411,0,0,0,5.29411-5.29411V338.826A9.98327,9.98327,0,0,0,825.601,330.35341Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="284.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="306.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="328.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="350.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><rect x="372.35129" y="562.70682" width="16" height="2" fill="#3f3d56"/><path d="M643.60059,778.85352H174.60107a4.00428,4.00428,0,0,1-4-4v-228a4.00427,4.00427,0,0,1,4-4H643.60059a4.004,4.004,0,0,1,4,4v228A4.004,4.004,0,0,1,643.60059,778.85352Zm-468.99952-232v228H643.60352l-.00293-228Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><circle cx="145.85129" cy="470.70682" r="6" fill="#3f3d56"/><circle cx="166.85129" cy="470.70682" r="6" fill="#3f3d56"/><circle cx="187.85129" cy="470.70682" r="6" fill="#3f3d56"/><path d="M453.601,680.85341h-135a3.00328,3.00328,0,0,1-3-3v-34a3.00328,3.00328,0,0,1,3-3h135a3.00328,3.00328,0,0,1,3,3v34A3.00328,3.00328,0,0,1,453.601,680.85341Zm-135-38a1.001,1.001,0,0,0-1,1v34a1.001,1.001,0,0,0,1,1h135a1.001,1.001,0,0,0,1-1v-34a1.001,1.001,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><circle cx="437.85129" cy="559.70682" r="18" fill="${color}"/><path d="M493.601,679.85341a19,19,0,1,1,19-19A19.02162,19.02162,0,0,1,493.601,679.85341Zm0-36a17,17,0,1,0,17,17A17.019,17.019,0,0,0,493.601,643.85341Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><polygon points="444.118 563.803 434.437 554.121 437.265 551.293 443.584 557.611 461.216 532.555 464.487 534.858 444.118 563.803" fill="#3f3d56"/><polygon points="433.761 314.337 40.591 314.337 40.591 50.947 433.761 314.337" opacity="0.1"/><path d="M628.69739,413.2984H579.39527v-3.55218a.7043.7043,0,0,0-.70431-.70432H561.78737a.70429.70429,0,0,0-.70431.70432v3.55218H550.51832v-3.55218a.7043.7043,0,0,0-.70432-.70432H532.91042a.7043.7043,0,0,0-.70432.70432v3.55218H521.64136v-3.55218a.70429.70429,0,0,0-.70431-.70432H504.03347a.7043.7043,0,0,0-.70432.70432v3.55218H492.76441v-3.55218a.7043.7043,0,0,0-.70432-.70432H475.15651a.70429.70429,0,0,0-.70431.70432v3.55218H463.88746v-3.55218a.7043.7043,0,0,0-.70432-.70432H446.27956a.7043.7043,0,0,0-.70432.70432v3.55218H435.0105v-3.55218a.70429.70429,0,0,0-.70431-.70432H417.4026a.7043.7043,0,0,0-.70431.70432v3.55218H406.13355v-3.55218a.7043.7043,0,0,0-.70432-.70432H273.01784a.7043.7043,0,0,0-.70432.70432v3.55218H261.74878v-3.55218a.7043.7043,0,0,0-.70432-.70432H244.14088a.70429.70429,0,0,0-.70431.70432v3.55218H232.87183v-3.55218a.7043.7043,0,0,0-.70432-.70432H215.26393a.7043.7043,0,0,0-.70432.70432v3.55218H203.99487v-3.55218a.70429.70429,0,0,0-.70431-.70432H186.387a.7043.7043,0,0,0-.70431.70432v3.55218H175.11792v-3.55218a.7043.7043,0,0,0-.70432-.70432H157.51a.7043.7043,0,0,0-.70432.70432v3.55218H146.241v-3.55218a.7043.7043,0,0,0-.70432-.70432H128.63307a.7043.7043,0,0,0-.70432.70432v3.55218H117.364v-3.55218a.7043.7043,0,0,0-.70431-.70432H99.75611a.70429.70429,0,0,0-.70431.70432v3.55218H66.65326A16.90359,16.90359,0,0,0,49.74968,430.202v7.6434a16.90358,16.90358,0,0,0,16.90358,16.90354H628.69739A16.90358,16.90358,0,0,0,645.601,437.84539V430.202A16.90359,16.90359,0,0,0,628.69739,413.2984Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M474.601,321.85341h-264a3.00328,3.00328,0,0,1-3-3v-110a3.00328,3.00328,0,0,1,3-3h264a3.00328,3.00328,0,0,1,3,3v110A3.00328,3.00328,0,0,1,474.601,321.85341Zm-264-114a1.0013,1.0013,0,0,0-1,1v110a1.0013,1.0013,0,0,0,1,1h264a1.0013,1.0013,0,0,0,1-1v-110a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M240.601,269.85341h-12a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h12a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,240.601,269.85341Zm-12-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h12a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="176.85129" y="163.70682" width="228" height="2" fill="#3f3d56"/><rect x="264.85129" y="269.70682" width="732.99951" height="2" fill="#3f3d56"/><circle cx="264.85129" cy="269.70682" r="14" fill="#3f3d56"/><circle cx="997.85129" cy="271.70682" r="11" fill="#3f3d56"/><circle cx="1051.85129" cy="492.70682" r="11" fill="#3f3d56"/><circle cx="321.85129" cy="492.70682" r="11" fill="#3f3d56"/></svg>`;
-
-export const WelcomeNotice = () => {
-  const { colors } = useThemeColors();
-  return (
-    <Animated.View
-      entering={FadeInDown}
-      style={{
-        padding: 12,
-        alignItems: "center",
-        justifyContent: "center",
-        width: DDS.isTab ? "50%" : "95%",
-        alignSelf: "center"
-      }}
-    >
-      <SvgView width={200} height={200} src={IMAGE(colors.primary.accent)} />
-
-      <Heading>100% encrypted notes</Heading>
-      <Paragraph
-        style={{
-          textAlign: "center",
-          width: "90%"
-        }}
-        size={SIZE.md}
-      >
-        Notesnook encrypts everything on your device before syncing. This means
-        that no one can read your notes except you. Not even us.
-      </Paragraph>
-
-      <Button
-        fontSize={SIZE.md}
-        height={45}
-        width={250}
-        onPress={async () => {
-          eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
-          setTimeout(() => {
-            SettingsService.set({
-              introCompleted: true
-            });
-            Navigation.replace("Notes", {
-              canGoBack: false
-            });
-          }, 1000);
-        }}
-        style={{
-          paddingHorizontal: 24,
-          alignSelf: "center",
-          borderRadius: 100,
-          ...getElevationStyle(5),
-          marginTop: 30
-        }}
-        type="accent"
-        title="Create your account"
-      />
-
-      <Button
-        title="Skip for now"
-        onPress={async () => {
-          eSendEvent(eOpenLoading);
-          await sleep(1000);
-          SettingsService.set({
-            introCompleted: true
-          });
-          Navigation.replace("Notes", {
-            canGoBack: false
-          });
-          await sleep(1000);
-          eSendEvent(eCloseLoading);
-        }}
-        iconSize={20}
-        type="plain"
-        iconPosition="right"
-        icon="chevron-right"
-        height={25}
-        iconStyle={{
-          marginTop: 2
-        }}
-        style={{
-          paddingHorizontal: 6,
-          marginTop: 10
-        }}
-      />
-    </Animated.View>
-  );
-};
diff --git a/apps/mobile/app/components/list-items/headers/notebook-header.tsx b/apps/mobile/app/components/list-items/headers/notebook-header.tsx
index 8f62c336b..e19cf718d 100644
--- a/apps/mobile/app/components/list-items/headers/notebook-header.tsx
+++ b/apps/mobile/app/components/list-items/headers/notebook-header.tsx
@@ -23,7 +23,7 @@ import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import AppIcon from "../../ui/AppIcon";
 import Heading from "../../ui/typography/heading";
@@ -41,7 +41,7 @@ export const NotebookHeader = ({
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
-        marginVertical: DefaultAppStyles.GAP,
+        marginTop: DefaultAppStyles.GAP,
         backgroundColor: colors.secondary.background
       }}
     >
@@ -52,14 +52,16 @@ export const NotebookHeader = ({
           paddingVertical: 25
         }}
       >
-        <AppIcon name="notebook" size={SIZE.xxl} />
-        <Heading size={SIZE.lg}>{notebook.title}</Heading>
+        <AppIcon name="notebook" size={AppFontSize.xxl} />
 
-        {notebook.description ? (
-          <Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
-            {notebook.description}
-          </Paragraph>
-        ) : null}
+        <View>
+          <Heading size={AppFontSize.lg}>{notebook.title}</Heading>
+          {notebook.description ? (
+            <Paragraph size={AppFontSize.sm} color={colors.primary.paragraph}>
+              {notebook.description}
+            </Paragraph>
+          ) : null}
+        </View>
 
         <View
           style={{
@@ -67,11 +69,11 @@ export const NotebookHeader = ({
             gap: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
+          <Paragraph size={AppFontSize.xxs} color={colors.secondary.paragraph}>
             {strings.notes(totalNotes || 0)}
           </Paragraph>
 
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xxs}>
             {getFormattedDate(notebook.dateModified, "date-time")}
           </Paragraph>
         </View>
diff --git a/apps/mobile/app/components/list-items/headers/section-header.tsx b/apps/mobile/app/components/list-items/headers/section-header.tsx
index f82e17aab..ecd51a28c 100644
--- a/apps/mobile/app/components/list-items/headers/section-header.tsx
+++ b/apps/mobile/app/components/list-items/headers/section-header.tsx
@@ -21,12 +21,12 @@ import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { useWindowDimensions, View } from "react-native";
+import { View } from "react-native";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import Sort from "../../sheets/sort";
 import { IconButton } from "../../ui/icon-button";
@@ -56,8 +56,6 @@ export const SectionHeader = React.memo<
     onOpenJumpToDialog
   }: SectionHeaderProps) {
     const { colors } = useThemeColors();
-    const { fontScale } = useWindowDimensions();
-    const groupBy = strings.groupByStrings[groupOptions.groupBy]();
     const isCompactModeEnabled = useIsCompactModeEnabled(
       dataType as "note" | "notebook"
     );
@@ -66,8 +64,7 @@ export const SectionHeader = React.memo<
       <View
         style={{
           width: "100%",
-          paddingHorizontal: DefaultAppStyles.GAP,
-          marginVertical: DefaultAppStyles.GAP
+          paddingHorizontal: DefaultAppStyles.GAP
         }}
       >
         <View
@@ -79,7 +76,7 @@ export const SectionHeader = React.memo<
             justifyContent: "space-between",
             borderBottomWidth: 1,
             borderColor: colors.primary.border,
-            paddingBottom: DefaultAppStyles.GAP_VERTICAL
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <Pressable
@@ -94,14 +91,16 @@ export const SectionHeader = React.memo<
             }}
           >
             <Heading
-              size={SIZE.sm}
+              size={AppFontSize.xxs}
               style={{
                 alignSelf: "center",
                 textAlignVertical: "center"
               }}
               color={colors.primary.accent}
             >
-              {!item.title || item.title === "" ? strings.pinned() : item.title}
+              {!item.title || item.title === ""
+                ? strings.pinned().toUpperCase()
+                : item.title.toUpperCase()}
             </Heading>
           </Pressable>
 
@@ -120,6 +119,7 @@ export const SectionHeader = React.memo<
                       ? "sort-ascending"
                       : "sort-descending"
                   }
+                  color={colors.secondary.icon}
                   onPress={() => {
                     if (!screen) return;
                     presentSheet({
@@ -130,7 +130,7 @@ export const SectionHeader = React.memo<
                     width: 25,
                     height: 25
                   }}
-                  size={SIZE.lg - 2}
+                  size={AppFontSize.lg - 2}
                 />
                 <IconButton
                   hidden={
@@ -156,19 +156,20 @@ export const SectionHeader = React.memo<
                         : "normal"
                     });
                   }}
-                  size={SIZE.lg - 2}
+                  size={AppFontSize.lg - 2}
                 />
               </>
             ) : null}
 
-            <IconButton
+            {/* <IconButton
               style={{
                 width: 25,
                 height: 25
               }}
+              color={colors.secondary.icon}
               name={"chevron-down"}
               size={SIZE.lg - 2}
-            />
+            /> */}
           </View>
         </View>
       </View>
diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx
index 006ae8343..e66227019 100644
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -32,9 +32,13 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 
-import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
+import {
+  getFormattedDate,
+  NotebooksWithDateEdited,
+  TagsWithDateEdited
+} from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { notesnook } from "../../../../e2e/test.ids";
 import useIsSelected from "../../../hooks/use-selected";
@@ -48,6 +52,7 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import dayjs from "dayjs";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -97,11 +102,27 @@ const NoteItem = ({
           flexShrink: 1
         }}
       >
+        {compactMode ? null : (
+          <Paragraph
+            style={{
+              fontSize: AppFontSize.xxs,
+              color: colors.secondary.paragraph
+            }}
+          >
+            {getFormattedDate(
+              date,
+              dayjs(date).isBefore(dayjs().subtract(1, "day").hour(23))
+                ? "date"
+                : "time"
+            )}
+          </Paragraph>
+        )}
+
         {compactMode ? (
           <Paragraph
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             style={{
               paddingRight: 10
             }}
@@ -112,7 +133,7 @@ const NoteItem = ({
           <Heading
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             style={{
               paddingRight: 10
             }}
@@ -142,7 +163,7 @@ const NoteItem = ({
               justifyContent: "flex-start",
               alignItems: "center",
               width: "100%",
-              marginTop: 5,
+              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
               columnGap: 8,
               rowGap: 4,
               flexWrap: "wrap"
@@ -153,7 +174,7 @@ const NoteItem = ({
                 {item.conflicted ? (
                   <Icon
                     name="alert-circle"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={colors.error.accent}
                   />
                 ) : null}
@@ -162,7 +183,7 @@ const NoteItem = ({
                   <Icon
                     testID="sync-off"
                     name="sync-off"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -171,20 +192,11 @@ const NoteItem = ({
                   <Icon
                     testID="pencil-lock"
                     name="pencil-lock"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
 
-                <TimeSince
-                  style={{
-                    fontSize: SIZE.xxs,
-                    color: colors.secondary.paragraph
-                  }}
-                  time={date}
-                  updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
-                />
-
                 {attachmentsCount > 0 ? (
                   <View
                     style={{
@@ -195,12 +207,12 @@ const NoteItem = ({
                   >
                     <Icon
                       name="attachment"
-                      size={SIZE.sm}
+                      size={AppFontSize.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
                       color={colors.secondary.paragraph}
-                      size={SIZE.xxs}
+                      size={AppFontSize.xxs}
                     >
                       {attachmentsCount}
                     </Paragraph>
@@ -211,7 +223,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-pinned"
                     name="pin-outline"
-                    size={SIZE.xs}
+                    size={AppFontSize.xs}
                     color={color?.colorCode || primaryColors.accent}
                   />
                 ) : null}
@@ -220,7 +232,7 @@ const NoteItem = ({
                   <Icon
                     name="lock"
                     testID="note-locked-icon"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -229,7 +241,7 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={SIZE.sm}
+                    size={AppFontSize.sm}
                     color="orange"
                   />
                 ) : null}
@@ -240,9 +252,9 @@ const NoteItem = ({
                     disabled
                     color={color?.colorCode}
                     textStyle={{
-                      fontSize: SIZE.xxxs
+                      fontSize: AppFontSize.xxxs
                     }}
-                    iconSize={SIZE.xxxs}
+                    iconSize={AppFontSize.xxxs}
                     style={{
                       height: "auto"
                     }}
@@ -271,11 +283,11 @@ const NoteItem = ({
                     >
                       <AppIcon
                         name="book-outline"
-                        size={SIZE.xxxs}
+                        size={AppFontSize.xxxs}
                         color={colors.secondary.icon}
                       />
                       <Paragraph
-                        size={SIZE.xxxs}
+                        size={AppFontSize.xxxs}
                         color={colors.secondary.paragraph}
                       >
                         {item.title}
@@ -298,7 +310,7 @@ const NoteItem = ({
                           }}
                         >
                           <Paragraph
-                            size={SIZE.xxxs}
+                            size={AppFontSize.xxxs}
                             color={colors.secondary.paragraph}
                           >
                             #{item.title}
@@ -312,7 +324,7 @@ const NoteItem = ({
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xxs}
+                  size={AppFontSize.xxs}
                   style={{
                     marginRight: 6
                   }}
@@ -326,7 +338,7 @@ const NoteItem = ({
 
                 <Paragraph
                   color={primaryColors.accent}
-                  size={SIZE.xxs}
+                  size={AppFontSize.xxs}
                   style={{
                     marginRight: 6
                   }}
@@ -352,7 +364,7 @@ const NoteItem = ({
                 style={{
                   marginRight: 6
                 }}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 color={colors.error.accent}
               />
             ) : null}
@@ -361,7 +373,7 @@ const NoteItem = ({
               <Icon
                 name="lock"
                 testID="note-locked-icon"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 6
                 }}
@@ -373,7 +385,7 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 6
                 }}
@@ -383,7 +395,7 @@ const NoteItem = ({
 
             <TimeSince
               style={{
-                fontSize: SIZE.xxs,
+                fontSize: AppFontSize.xxs,
                 color: colors.secondary.paragraph,
                 marginRight: 6
               }}
@@ -398,7 +410,7 @@ const NoteItem = ({
             <AppIcon
               name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
               color={selected ? colors.selected.icon : colors.primary.icon}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </>
         ) : (
@@ -406,7 +418,7 @@ const NoteItem = ({
             testID={notesnook.listitem.menu}
             color={colors.secondary.icon}
             name="dots-horizontal"
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             onPress={() => !noOpen && Properties.present(item)}
             style={{
               justifyContent: "center",
diff --git a/apps/mobile/app/components/list-items/notebook/index.tsx b/apps/mobile/app/components/list-items/notebook/index.tsx
index 1d6c788f0..132a88a06 100644
--- a/apps/mobile/app/components/list-items/notebook/index.tsx
+++ b/apps/mobile/app/components/list-items/notebook/index.tsx
@@ -25,7 +25,7 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
@@ -61,7 +61,7 @@ export const NotebookItem = ({
       >
         {compactMode ? (
           <Paragraph
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -71,7 +71,7 @@ export const NotebookItem = ({
           </Paragraph>
         ) : (
           <Heading
-            size={SIZE.md}
+            size={AppFontSize.md}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -83,7 +83,7 @@ export const NotebookItem = ({
 
         {!item.description || compactMode ? null : (
           <Paragraph
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={2}
             style={{
               flexWrap: "wrap"
@@ -100,14 +100,14 @@ export const NotebookItem = ({
               justifyContent: "flex-start",
               alignItems: "center",
               marginTop: 5,
-              height: SIZE.md + 2
+              height: AppFontSize.md + 2
             }}
           >
             {isTrash ? (
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -121,7 +121,7 @@ export const NotebookItem = ({
                 </Paragraph>
                 <Paragraph
                   color={colors.primary.accent}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -134,7 +134,7 @@ export const NotebookItem = ({
             ) : (
               <Paragraph
                 color={colors.secondary.paragraph}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 style={{
                   marginRight: 6
                 }}
@@ -144,7 +144,7 @@ export const NotebookItem = ({
             )}
             <Paragraph
               color={colors.secondary.paragraph}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               style={{
                 marginRight: 6
               }}
@@ -155,7 +155,7 @@ export const NotebookItem = ({
             {item.pinned ? (
               <Icon
                 name="pin-outline"
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 style={{
                   marginRight: 10,
                   marginTop: 2
@@ -176,7 +176,7 @@ export const NotebookItem = ({
           <>
             <Paragraph
               color={colors.primary.icon}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               style={{
                 marginRight: 6
               }}
@@ -190,7 +190,7 @@ export const NotebookItem = ({
           color={colors.primary.heading}
           name="dots-horizontal"
           testID={notesnook.ids.notebook.menu}
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => Properties.present(item)}
           style={{
             justifyContent: "center",
diff --git a/apps/mobile/app/components/list-items/reminder/index.tsx b/apps/mobile/app/components/list-items/reminder/index.tsx
index d24ed73f4..b4e4009bc 100644
--- a/apps/mobile/app/components/list-items/reminder/index.tsx
+++ b/apps/mobile/app/components/list-items/reminder/index.tsx
@@ -22,7 +22,7 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import ReminderSheet from "../../sheets/reminder";
 import { IconButton } from "../../ui/icon-button";
@@ -62,7 +62,7 @@ const ReminderItem = React.memo(
             style={{
               flexWrap: "wrap"
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             {item.title}
           </Heading>
@@ -89,7 +89,7 @@ const ReminderItem = React.memo(
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   flexDirection: "row",
                   paddingHorizontal: 6,
                   alignItems: "center",
@@ -102,11 +102,11 @@ const ReminderItem = React.memo(
               >
                 <Icon
                   name="bell-off-outline"
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                   color={colors.error.icon}
                 />
                 <Paragraph
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
@@ -118,7 +118,7 @@ const ReminderItem = React.memo(
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   flexDirection: "row",
                   paddingHorizontal: 6,
                   alignItems: "center",
@@ -131,11 +131,11 @@ const ReminderItem = React.memo(
               >
                 <Icon
                   name="reload"
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                   color={colors.primary.accent}
                 />
                 <Paragraph
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
@@ -147,7 +147,7 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               style={{
                 justifyContent: "flex-start",
                 height: 25,
@@ -160,7 +160,7 @@ const ReminderItem = React.memo(
           testID={notesnook.listitem.menu}
           color={colors.primary.paragraph}
           name="dots-horizontal"
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => Properties.present(item, isSheet)}
           style={{
             justifyContent: "center",
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/selection.tsx b/apps/mobile/app/components/list-items/selection-wrapper/selection.tsx
index 4994c0006..ef772d8e1 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/selection.tsx
+++ b/apps/mobile/app/components/list-items/selection-wrapper/selection.tsx
@@ -24,7 +24,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import useIsSelected from "../../../hooks/use-selected";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Item, TrashItem } from "@notesnook/core";
 
 export const SelectionIcon = ({ item }: { item: Item }) => {
@@ -52,7 +52,7 @@ export const SelectionIcon = ({ item }: { item: Item }) => {
     >
       {selected ? (
         <Icon
-          size={compactMode ? SIZE.xl - 2 : SIZE.xl}
+          size={compactMode ? AppFontSize.xl - 2 : AppFontSize.xl}
           color={selected ? colors.selected.accent : colors.primary.icon}
           name={"check"}
         />
diff --git a/apps/mobile/app/components/list-items/tag/index.tsx b/apps/mobile/app/components/list-items/tag/index.tsx
index 7c42b5e79..5436bf9f3 100644
--- a/apps/mobile/app/components/list-items/tag/index.tsx
+++ b/apps/mobile/app/components/list-items/tag/index.tsx
@@ -23,7 +23,7 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
@@ -60,9 +60,9 @@ const TagItem = React.memo(
             flexShrink: 1
           }}
         >
-          <Heading size={SIZE.md}>
+          <Heading size={AppFontSize.md}>
             <Heading
-              size={SIZE.md}
+              size={AppFontSize.md}
               style={{
                 color: colors.primary.accent
               }}
@@ -73,7 +73,7 @@ const TagItem = React.memo(
           </Heading>
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               marginTop: 5
             }}
@@ -85,7 +85,7 @@ const TagItem = React.memo(
         <IconButton
           color={colors.primary.heading}
           name="dots-horizontal"
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => {
             Properties.present(item);
           }}
diff --git a/apps/mobile/app/components/list/card.tsx b/apps/mobile/app/components/list/card.tsx
index 753246257..c47422e0c 100644
--- a/apps/mobile/app/components/list/card.tsx
+++ b/apps/mobile/app/components/list/card.tsx
@@ -21,16 +21,24 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Dimensions, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useMessageStore } from "../../stores/use-message-store";
-import { SIZE } from "../../utils/size";
+import { Message, useMessageStore } from "../../stores/use-message-store";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 
-export const Card = ({ color }: { color?: string }) => {
+export const Card = ({
+  color,
+  customMessage
+}: {
+  color?: string;
+  customMessage?: Omit<Message, "data">;
+}) => {
   const { colors } = useThemeColors();
   color = color ? color : colors.primary.accent;
-  const messageBoardState = useMessageStore((state) => state.message);
+  const messageBoardState = useMessageStore(
+    (state) => customMessage || state.message
+  );
   const announcements = useMessageStore((state) => state.announcements);
   const fontScale = Dimensions.get("window").fontScale;
 
@@ -40,7 +48,7 @@ export const Card = ({ color }: { color?: string }) => {
       style={{
         width: "100%",
         paddingHorizontal: DefaultAppStyles.GAP,
-        marginTop: DefaultAppStyles.GAP
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <Pressable
@@ -51,11 +59,7 @@ export const Card = ({ color }: { color?: string }) => {
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
-          paddingHorizontal: DefaultAppStyles.GAP_SMALL,
-          width: "100%",
-          backgroundColor: colors.secondary.background,
-          borderWidth: 1,
-          borderColor: colors.primary.border
+          width: "100%"
         }}
       >
         <View
@@ -75,7 +79,7 @@ export const Card = ({ color }: { color?: string }) => {
             }}
           >
             <Icon
-              size={SIZE.xxxl}
+              size={AppFontSize.xxxl}
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
@@ -95,11 +99,15 @@ export const Card = ({ color }: { color?: string }) => {
                 flexWrap: "nowrap",
                 flexShrink: 1
               }}
+              size={AppFontSize.xs}
               color={colors.primary.heading}
             >
               {messageBoardState.actionText}
             </Paragraph>
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
+            <Paragraph
+              color={colors.secondary.paragraph}
+              size={AppFontSize.xxs}
+            >
               {messageBoardState.message}
             </Paragraph>
           </View>
@@ -119,7 +127,7 @@ export const Card = ({ color }: { color?: string }) => {
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
-              size={SIZE.lg}
+              size={AppFontSize.lg}
             />
           </View>
         )}
diff --git a/apps/mobile/app/components/list/empty.tsx b/apps/mobile/app/components/list/empty.tsx
index 3632ac206..490f17112 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 useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { TTip, useTip } from "../../services/tip-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
@@ -109,7 +109,7 @@ export const Empty = React.memo(function Empty({
               }}
               style={{
                 alignSelf: "flex-start",
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 height: 40
               }}
             />
@@ -125,12 +125,12 @@ export const Empty = React.memo(function Empty({
             }}
           >
             <Heading>{placeholder?.title}</Heading>
-            <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
+            <Paragraph size={AppFontSize.sm} textBreakStrategy="balanced">
               {placeholder?.loading}
             </Paragraph>
             <Seperator />
             <ActivityIndicator
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={color || colors.primary.accent}
             />
           </View>
diff --git a/apps/mobile/app/components/list/reorderable-list.tsx b/apps/mobile/app/components/list/reorderable-list.tsx
index b6457825d..a2800e443 100644
--- a/apps/mobile/app/components/list/reorderable-list.tsx
+++ b/apps/mobile/app/components/list/reorderable-list.tsx
@@ -27,7 +27,7 @@ import {
 } from "react-native-drax";
 
 import { fluidTabsRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
 
@@ -78,13 +78,15 @@ function ReorderableList<T extends { id: string }>({
       return isHidden && !dragging ? null : (
         <View
           style={{
-            flexDirection: "row"
+            flexDirection: "row",
+            width: "100%"
           }}
         >
           <View
             style={{
+              opacity: isHidden ? 0.4 : 1,
               flexGrow: 1,
-              opacity: isHidden ? 0.4 : 1
+              flexShrink: 1
             }}
           >
             {renderDraggableItem(info, props)}
@@ -93,13 +95,12 @@ function ReorderableList<T extends { id: string }>({
             <IconButton
               name={!isHidden ? "minus" : "plus"}
               color={colors.primary.icon}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               top={0}
               bottom={0}
               onPress={() => {
                 const _hiddenItems = hiddenItemsState.slice();
                 const index = _hiddenItems.indexOf(info.item.id);
-
                 if (index === -1) {
                   _hiddenItems.push(info.item?.id);
                 } else {
diff --git a/apps/mobile/app/components/merge-conflicts/index.js b/apps/mobile/app/components/merge-conflicts/index.js
index 647bbd790..7a01da901 100644
--- a/apps/mobile/app/components/merge-conflicts/index.js
+++ b/apps/mobile/app/components/merge-conflicts/index.js
@@ -38,7 +38,7 @@ import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import BaseDialog from "../dialog/base-dialog";
 import DialogButtons from "../dialog/dialog-buttons";
 import DialogContainer from "../dialog/dialog-container";
@@ -164,7 +164,7 @@ const MergeConflicts = () => {
           <Paragraph
             style={{ flexWrap: "wrap" }}
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
           >
             <Text
               style={{
@@ -203,7 +203,7 @@ const MergeConflicts = () => {
                 borderRadius: 100,
                 paddingHorizontal: 12
               }}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
             />
           ) : null}
           <View style={{ width: 10 }} />
@@ -220,7 +220,7 @@ const MergeConflicts = () => {
                 borderRadius: 100,
                 paddingHorizontal: 12
               }}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               color={colors.error.paragraph}
               onPress={() => {
                 setDialogVisible(true);
@@ -238,7 +238,7 @@ const MergeConflicts = () => {
                   marginLeft: 10
                 }}
                 type="accent"
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 title={
                   keeping && !isDiscarded ? strings.undo() : strings.keep()
                 }
diff --git a/apps/mobile/app/components/note-history/index.tsx b/apps/mobile/app/components/note-history/index.tsx
index 1bbd832db..e688eafee 100644
--- a/apps/mobile/app/components/note-history/index.tsx
+++ b/apps/mobile/app/components/note-history/index.tsx
@@ -30,7 +30,7 @@ import { db } from "../../common/database";
 import { useDBItem } from "../../hooks/use-db-item";
 import { presentSheet } from "../../services/event-manager";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import DialogHeader from "../dialog/dialog-header";
 import SheetProvider from "../sheet-provider";
 import { Pressable } from "../ui/pressable";
@@ -97,7 +97,7 @@ const HistoryItem = ({
       {!item ? null : (
         <>
           <Paragraph>{getDate(item.dateCreated, item.dateModified)}</Paragraph>
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
             {getTimeAgo(item.dateModified)}
           </Paragraph>
         </>
@@ -170,7 +170,7 @@ export default function NoteHistory({
             >
               {_loading ? (
                 <ActivityIndicator
-                  size={SIZE.xl}
+                  size={AppFontSize.xl}
                   color={colors.primary.accent}
                 />
               ) : (
@@ -187,7 +187,7 @@ export default function NoteHistory({
         />
       </View>
       <Paragraph
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         color={colors.secondary.paragraph}
         style={{
           alignSelf: "center"
diff --git a/apps/mobile/app/components/premium/component.js b/apps/mobile/app/components/premium/component.js
index 952657a87..406aa3355 100644
--- a/apps/mobile/app/components/premium/component.js
+++ b/apps/mobile/app/components/premium/component.js
@@ -17,6 +17,7 @@ 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 { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { ActivityIndicator, Platform, ScrollView, View } from "react-native";
 import { LAUNCH_ROCKET } from "../../assets/images/assets";
@@ -24,17 +25,13 @@ import { db } from "../../common/database";
 import { usePricing } from "../../hooks/use-pricing";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
 import { getElevationStyle } from "../../utils/elevation";
-import {
-  eClosePremiumDialog,
-  eCloseSheet,
-  eOpenLoginDialog
-} from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { eClosePremiumDialog, eCloseSheet } from "../../utils/events";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth";
+import { AuthMode } from "../auth/common";
 import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
@@ -66,9 +63,9 @@ export const Component = ({ close, promo }) => {
       });
     } else {
       close();
-      setTimeout(() => {
-        eSendEvent(eOpenLoginDialog, AuthMode.trialSignup);
-      }, 400);
+      Navigation.navigate("Auth", {
+        mode: AuthMode.trialSignup
+      });
     }
   };
 
@@ -137,14 +134,14 @@ export const Component = ({ close, promo }) => {
 
         <Heading
           key="heading"
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           style={{
             alignSelf: "center",
             paddingTop: 20
           }}
         >
           Notesnook{" "}
-          <Heading size={SIZE.lg} color={colors.primary.accent}>
+          <Heading size={AppFontSize.lg} color={colors.primary.accent}>
             Pro
           </Heading>
         </Heading>
@@ -154,7 +151,7 @@ export const Component = ({ close, promo }) => {
             style={{
               marginBottom: 20
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
             color={colors.primary.accent}
           />
         ) : (
@@ -163,7 +160,7 @@ export const Component = ({ close, promo }) => {
               alignSelf: "center",
               marginBottom: 20
             }}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             (
             {Platform.OS === "android"
@@ -176,7 +173,7 @@ export const Component = ({ close, promo }) => {
 
         <Paragraph
           key="description"
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
             paddingHorizontal: 12,
             textAlign: "center",
@@ -231,7 +228,7 @@ export const Component = ({ close, promo }) => {
         {!user || userCanRequestTrial ? (
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               alignSelf: "center",
               textAlign: "center",
@@ -242,7 +239,7 @@ export const Component = ({ close, promo }) => {
             {user
               ? 'On clicking "Try free for 14 days", your free trial will be activated.'
               : "After sign up you will be asked to activate your free trial."}{" "}
-            <Paragraph size={SIZE.xs} style={{ fontWeight: "bold" }}>
+            <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
               No credit card is required.
             </Paragraph>
           </Paragraph>
diff --git a/apps/mobile/app/components/premium/expiring.js b/apps/mobile/app/components/premium/expiring.js
index 23532328f..0b8eb63db 100644
--- a/apps/mobile/app/components/premium/expiring.js
+++ b/apps/mobile/app/components/premium/expiring.js
@@ -32,7 +32,7 @@ import {
   eOpenResultDialog,
   eOpenTrialEndingDialog
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
 import DialogContainer from "../dialog/dialog-container";
@@ -127,7 +127,7 @@ export const Expiring = () => {
                         paddingTop: 0,
                         paddingBottom: 20
                       }}
-                      size={SIZE.md + 2}
+                      size={AppFontSize.md + 2}
                     >
                       Upgrade now to continue using all the pro features after
                       your trial ends
@@ -143,7 +143,7 @@ export const Expiring = () => {
                     await sleep(300);
                     eSendEvent(eOpenPremiumDialog, promo);
                   }}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     textDecorationLine: "underline",
                     color: colors.secondary.paragraph,
@@ -176,7 +176,7 @@ export const Expiring = () => {
                     promo?.discount > 30 ? null : promo
                   );
                 }}
-                fontSize={SIZE.md + 2}
+                fontSize={AppFontSize.md + 2}
                 style={{
                   marginBottom: status.extend ? 0 : 10,
                   marginTop: 10,
@@ -201,7 +201,7 @@ export const Expiring = () => {
                       button: "Continue"
                     });
                   }}
-                  fontSize={SIZE.xs}
+                  fontSize={AppFontSize.xs}
                   height={30}
                   style={{
                     marginBottom: 10
diff --git a/apps/mobile/app/components/premium/feature.js b/apps/mobile/app/components/premium/feature.js
index 768846387..6c34e362e 100644
--- a/apps/mobile/app/components/premium/feature.js
+++ b/apps/mobile/app/components/premium/feature.js
@@ -21,7 +21,7 @@ import React from "react";
 import { Text, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { ProTag } from "./pro-tag";
 
@@ -53,7 +53,7 @@ export const FeatureBlock = ({
           marginLeft: 5,
           flexShrink: 1
         }}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
       >
         {content}
       </Paragraph>
@@ -65,12 +65,12 @@ export const FeatureBlock = ({
         justifyContent: "center",
         padding: 10,
         marginRight: 10,
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         minWidth: 100
       }}
     >
-      <Icon color={colors.primary.icon} name={icon} size={SIZE.xl} />
-      <Paragraph size={SIZE.md}>
+      <Icon color={colors.primary.icon} name={icon} size={AppFontSize.xl} />
+      <Paragraph size={AppFontSize.md}>
         <Text style={{ color: colors.primary.accent }}>{highlight}</Text>
         {content ? "\n" + content : null}
       </Paragraph>
@@ -78,7 +78,7 @@ export const FeatureBlock = ({
       {pro ? (
         <>
           <View style={{ height: 5 }} />
-          <ProTag width={50} size={SIZE.xs} background={proTagBg} />
+          <ProTag width={50} size={AppFontSize.xs} background={proTagBg} />
         </>
       ) : (
         <View
diff --git a/apps/mobile/app/components/premium/group.js b/apps/mobile/app/components/premium/group.js
index cdb27352a..52bb8b4c8 100644
--- a/apps/mobile/app/components/premium/group.js
+++ b/apps/mobile/app/components/premium/group.js
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { ScrollView, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { FeatureBlock } from "./feature";
@@ -33,18 +33,25 @@ export const Group = ({ item, index }) => {
     <View
       style={{
         paddingHorizontal: 12,
-        backgroundColor: index % 2 !== 0 ? colors.primary.background : colors.secondary.background,
+        backgroundColor:
+          index % 2 !== 0
+            ? colors.primary.background
+            : colors.secondary.background,
         paddingVertical: 40
       }}
     >
       {item?.pro ? (
         <ProTag
-          size={SIZE.sm}
-          background={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
+          size={AppFontSize.sm}
+          background={
+            index % 2 === 0
+              ? colors.primary.background
+              : colors.secondary.background
+          }
         />
       ) : null}
       <Heading>{item.title}</Heading>
-      <Paragraph size={SIZE.md}>{item.detail}</Paragraph>
+      <Paragraph size={AppFontSize.md}>{item.detail}</Paragraph>
 
       {item.features && (
         <ScrollView
@@ -60,7 +67,11 @@ export const Group = ({ item, index }) => {
               {...item}
               detail={item.detail}
               pro={item.pro}
-              proTagBg={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
+              proTagBg={
+                index % 2 === 0
+                  ? colors.primary.background
+                  : colors.secondary.background
+              }
             />
           ))}
         </ScrollView>
@@ -70,7 +81,7 @@ export const Group = ({ item, index }) => {
           style={{
             marginTop: 10
           }}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           color={colors.secondary.paragraph}
         >
           {item.info}
diff --git a/apps/mobile/app/components/premium/offer.js b/apps/mobile/app/components/premium/offer.js
index 365f5d261..7a5f8dc40 100644
--- a/apps/mobile/app/components/premium/offer.js
+++ b/apps/mobile/app/components/premium/offer.js
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 
 export const Offer = ({
@@ -36,7 +36,7 @@ export const Offer = ({
         textAlign: "center",
         paddingVertical: padding
       }}
-      size={SIZE.xxxl}
+      size={AppFontSize.xxxl}
     >
       GET {off}
       <Text style={{ color: colors.primary.accent }}>%</Text> OFF!{"\n"}
diff --git a/apps/mobile/app/components/premium/premium-toast.js b/apps/mobile/app/components/premium/premium-toast.js
index 2cc726f3c..cb128d030 100644
--- a/apps/mobile/app/components/premium/premium-toast.js
+++ b/apps/mobile/app/components/premium/premium-toast.js
@@ -35,7 +35,7 @@ import {
   eOpenPremiumDialog,
   eShowGetPremium
 } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
@@ -120,7 +120,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
               flexWrap: "wrap"
             }}
             color={colors.primary.accent}
-            size={SIZE.md}
+            size={AppFontSize.md}
           >
             {msg.title}
           </Heading>
@@ -129,7 +129,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
             style={{
               flexWrap: "wrap"
             }}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             color={colors.primary.paragraph}
           >
             {msg.desc}
diff --git a/apps/mobile/app/components/premium/pricing-item.tsx b/apps/mobile/app/components/premium/pricing-item.tsx
index 53dfcf6f8..4b6457760 100644
--- a/apps/mobile/app/components/premium/pricing-item.tsx
+++ b/apps/mobile/app/components/premium/pricing-item.tsx
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Platform, View } from "react-native";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -59,13 +59,13 @@ export const PricingItem = ({
     >
       {!compact && (
         <View>
-          <Heading size={SIZE.lg - 2}>
+          <Heading size={AppFontSize.lg - 2}>
             {product?.type === "yearly" || product?.offerType === "yearly"
               ? "Yearly"
               : "Monthly"}
           </Heading>
           {product?.info && (
-            <Paragraph size={SIZE.xs}>{product.info}</Paragraph>
+            <Paragraph size={AppFontSize.xs}>{product.info}</Paragraph>
           )}
         </View>
       )}
@@ -75,13 +75,13 @@ export const PricingItem = ({
           style={{
             textDecorationLine: strikethrough ? "line-through" : undefined
           }}
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           <Heading
             style={{
               textDecorationLine: strikethrough ? "line-through" : undefined
             }}
-            size={SIZE.lg - 2}
+            size={AppFontSize.lg - 2}
           >
             {Platform.OS === "android"
               ? (product.data as RNIap.SubscriptionAndroid | undefined)
diff --git a/apps/mobile/app/components/premium/pricing-plans.tsx b/apps/mobile/app/components/premium/pricing-plans.tsx
index f0f7b3336..929792c54 100644
--- a/apps/mobile/app/components/premium/pricing-plans.tsx
+++ b/apps/mobile/app/components/premium/pricing-plans.tsx
@@ -17,6 +17,8 @@ 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, { useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, Platform, Text, View } from "react-native";
 import * as RNIap from "react-native-iap";
@@ -27,18 +29,19 @@ import {
   presentSheet,
   ToastManager
 } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import {
   eClosePremiumDialog,
   eCloseSheet,
-  eCloseSimpleDialog,
-  eOpenLoginDialog
+  eCloseSimpleDialog
 } from "../../utils/events";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
+import { AuthMode } from "../auth/common";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
 import { presentDialog } from "../dialog/functions";
@@ -47,8 +50,6 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
 import { PricingItem } from "./pricing-item";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { strings } from "@notesnook/intl";
 
 const UUID_PREFIX = "0bdaea";
 const UUID_VERSION = "4";
@@ -290,7 +291,7 @@ export const PricingPlans = ({
             style={{
               alignSelf: "center"
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           >
             {(Platform.OS === "android"
               ? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
@@ -373,7 +374,7 @@ export const PricingPlans = ({
               <Heading
                 style={{
                   paddingTop: 15,
-                  fontSize: SIZE.lg
+                  fontSize: AppFontSize.lg
                 }}
               >
                 Special offer for you
@@ -390,7 +391,7 @@ export const PricingPlans = ({
                     alignSelf: "center",
                     textAlign: "center"
                   }}
-                  size={SIZE.xxl}
+                  size={AppFontSize.xxl}
                 >
                   {Platform.OS === "android"
                     ? (product.data as RNIap.SubscriptionAndroid)
@@ -411,7 +412,7 @@ export const PricingPlans = ({
                       alignSelf: "center",
                       textAlign: "center"
                     }}
-                    size={SIZE.md}
+                    size={AppFontSize.md}
                   >
                     then {getStandardPrice()} {product?.offerType}.
                   </Paragraph>
@@ -557,9 +558,9 @@ export const PricingPlans = ({
                     onPress={() => {
                       eSendEvent(eClosePremiumDialog);
                       eSendEvent(eCloseSheet);
-                      setTimeout(() => {
-                        eSendEvent(eOpenLoginDialog, 1);
-                      }, 400);
+                      Navigation.navigate("Auth", {
+                        mode: AuthMode.login
+                      });
                     }}
                     title={"Sign up for free"}
                     type="accent"
@@ -574,7 +575,7 @@ export const PricingPlans = ({
                   promo &&
                   !promo.promoCode.startsWith("com.streetwriters.notesnook") ? (
                     <Paragraph
-                      size={SIZE.md}
+                      size={AppFontSize.md}
                       textBreakStrategy="balanced"
                       style={{
                         alignSelf: "center",
@@ -629,7 +630,7 @@ export const PricingPlans = ({
       {!user || !upgrade ? (
         <Paragraph
           color={colors.secondary.paragraph}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           style={{
             alignSelf: "center",
             textAlign: "center",
@@ -640,7 +641,7 @@ export const PricingPlans = ({
           {user
             ? 'On clicking "Try free for 14 days", your free trial will be activated.'
             : "After sign up you will be asked to activate your free trial."}{" "}
-          <Paragraph size={SIZE.xs} style={{ fontWeight: "bold" }}>
+          <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
             No credit card is required.
           </Paragraph>
         </Paragraph>
@@ -651,7 +652,7 @@ export const PricingPlans = ({
           {Platform.OS === "ios" ? (
             <Paragraph
               textBreakStrategy="balanced"
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
@@ -665,7 +666,7 @@ export const PricingPlans = ({
             </Paragraph>
           ) : (
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
@@ -685,7 +686,7 @@ export const PricingPlans = ({
             }}
           >
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
               style={{
                 maxWidth: "100%",
@@ -694,7 +695,7 @@ export const PricingPlans = ({
             >
               By subscribing, you agree to our{" "}
               <Paragraph
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 onPress={() => {
                   openLinkInBrowser("https://notesnook.com/tos")
                     .catch(() => {})
@@ -709,7 +710,7 @@ export const PricingPlans = ({
               </Paragraph>
               and{" "}
               <Paragraph
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 onPress={() => {
                   openLinkInBrowser("https://notesnook.com/privacy")
                     .catch(() => {})
diff --git a/apps/mobile/app/components/properties/color-tags.tsx b/apps/mobile/app/components/properties/color-tags.tsx
index 80e0424f7..b1b4c3ec7 100644
--- a/apps/mobile/app/components/properties/color-tags.tsx
+++ b/apps/mobile/app/components/properties/color-tags.tsx
@@ -31,7 +31,7 @@ import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { refreshNotesPage } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import ColorPicker from "../dialogs/color-picker";
 import { Button } from "../ui/button";
 import NativeTooltip from "../../utils/tooltip";
@@ -85,7 +85,12 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
       }}
     >
       {isLinked ? (
-        <Icon testID="icon-check" name="check" color="white" size={SIZE.lg} />
+        <Icon
+          testID="icon-check"
+          name="check"
+          color="white"
+          size={AppFontSize.lg}
+        />
       ) : null}
     </Pressable>
   );
@@ -151,7 +156,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
                 icon="plus"
                 iconPosition="right"
                 height={30}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 style={{
                   marginRight: 5,
                   borderRadius: 100,
@@ -178,7 +183,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   testID="icon-plus"
                   name="plus"
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               </Pressable>
             )
diff --git a/apps/mobile/app/components/properties/date-meta.js b/apps/mobile/app/components/properties/date-meta.js
index 94d4a46fb..2b36e2d87 100644
--- a/apps/mobile/app/components/properties/date-meta.js
+++ b/apps/mobile/app/components/properties/date-meta.js
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
@@ -47,10 +47,10 @@ export const DateMeta = ({ item }) => {
           paddingVertical: 3
         }}
       >
-        <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
           {strings.dateDescFromKey(key)}
         </Paragraph>
-        <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+        <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
           {getFormattedDate(item[key], "date-time")}
         </Paragraph>
       </View>
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index f26e748f8..3c59a215a 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -27,7 +27,7 @@ import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { ColorValues } from "../../utils/colors";
 import { eOnLoadNote } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
@@ -39,6 +39,7 @@ import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { TagStrip, Tags } from "./tags";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { DefaultAppStyles } from "../../utils/styles";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -81,13 +82,14 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
       data={[0]}
       keyExtractor={() => "properties-scroll-item"}
       renderItem={() => (
-        <View>
+        <View
+          style={{
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
           <View
             style={{
-              paddingHorizontal: 12,
-              marginTop: 5,
-              zIndex: 10,
-              marginBottom: 5
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
             <View
@@ -119,12 +121,12 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                 ) : item.type === "tag" ? (
                   <Icon
                     name="pound"
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     color={colors.primary.icon}
                   />
                 ) : null}
 
-                <Heading size={SIZE.lg}>{item.title}</Heading>
+                <Heading size={AppFontSize.lg}>{item.title}</Heading>
               </View>
 
               {item.type === "note" ? (
@@ -132,7 +134,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                   name="open-in-new"
                   type="plain"
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                   style={{
                     alignSelf: "flex-start"
                   }}
@@ -169,7 +171,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
                   backgroundColor: "transparent",
                   paddingHorizontal: 0
                 }}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
               />
             ) : null}
           </View>
@@ -184,15 +186,8 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             </>
           ) : null}
           {item.type === "note" ? (
-            <View
-              style={{
-                paddingHorizontal: 12
-              }}
-            >
-              <Notebooks note={item} close={close} />
-            </View>
+            <Notebooks note={item} close={close} />
           ) : null}
-
           <Items
             item={item}
             buttons={buttons}
diff --git a/apps/mobile/app/components/properties/items.tsx b/apps/mobile/app/components/properties/items.tsx
index 9606ce0ad..aa8636adf 100644
--- a/apps/mobile/app/components/properties/items.tsx
+++ b/apps/mobile/app/components/properties/items.tsx
@@ -20,13 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Item } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Dimensions, ScrollView, View } from "react-native";
+import { Dimensions, View } from "react-native";
+import SwiperFlatList from "react-native-swiper-flatlist";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { Action, ActionId, useActions } from "../../hooks/use-actions";
 import { useStoredRef } from "../../hooks/use-stored-ref";
 import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Button } from "../ui/button";
 import { Pressable } from "../ui/pressable";
@@ -66,6 +67,9 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "pin",
   "default-notebook",
   "add-shortcut",
+  "reorder",
+  "rename-color",
+  "rename-tag",
   "trash"
 ];
 
@@ -89,8 +93,8 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
 
   const columnItemWidth =
     deviceMode !== "mobile"
-      ? (width - 16) / columnItemsCount
-      : (width - 16) / columnItemsCount;
+      ? (width - DefaultAppStyles.GAP) / columnItemsCount
+      : (width - DefaultAppStyles.GAP) / columnItemsCount;
 
   const topBarItems = selectedActions
     .filter((item) => TOP_BAR_ITEMS.indexOf(item.id) > -1)
@@ -134,7 +138,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
           onPress={item.onPress}
           type={item.checked ? "shade" : "secondary"}
           style={{
-            height: columnItemWidth - 8,
+            height: columnItemWidth / 1.5,
             width: columnItemWidth - 8,
             borderRadius: 10,
             justifyContent: "center",
@@ -145,7 +149,13 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
           <Icon
             allowFontScaling
             name={item.icon}
-            size={DDS.isTab ? SIZE.xxl : shouldShrink ? SIZE.xxl : SIZE.lg}
+            size={
+              DDS.isTab
+                ? AppFontSize.xxl
+                : shouldShrink
+                ? AppFontSize.xxl
+                : AppFontSize.lg
+            }
             color={
               item.checked
                 ? item.activeColor || colors.primary.accent
@@ -157,7 +167,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
         </Pressable>
 
         <Paragraph
-          size={SIZE.xxs}
+          size={AppFontSize.xxs}
           textBreakStrategy="simple"
           style={{ textAlign: "center" }}
         >
@@ -189,7 +199,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
         title={item.title}
         icon={item.icon}
         type={item.checked ? "inverted" : "plain"}
-        fontSize={SIZE.sm}
+        fontSize={AppFontSize.sm}
         style={{
           borderRadius: 0,
           justifyContent: "flex-start",
@@ -218,24 +228,21 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
           key={item.id}
           testID={"icon-" + item.id}
           style={{
-            alignSelf: "flex-start",
-            paddingHorizontal: 0,
-            flex: 1
+            width: columnItemWidth - 8
           }}
         >
           <View
             style={{
-              height: topBarItemHeight,
+              height: columnItemWidth / 2,
+              width: columnItemWidth - DefaultAppStyles.GAP_SMALL,
               justifyContent: "center",
-              alignItems: "center",
-              marginBottom: DDS.isTab ? 7 : 3.5,
-              borderRadius: 100
+              alignItems: "center"
             }}
           >
             <Icon
               name={item.icon}
               allowFontScaling
-              size={DDS.isTab ? SIZE.xxl : SIZE.md + 4}
+              size={DDS.isTab ? AppFontSize.xxl : AppFontSize.md + 4}
               color={
                 item.checked
                   ? item.activeColor || colors.primary.accent
@@ -248,7 +255,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
 
           <Paragraph
             textBreakStrategy="simple"
-            size={SIZE.xxs}
+            size={AppFontSize.xxs}
             style={{ textAlign: "center" }}
           >
             {item.title}
@@ -260,42 +267,79 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
       colors.error.icon,
       colors.primary.accent,
       colors.secondary.icon,
-      topBarItemHeight,
+      columnItemWidth,
       topBarSorting
     ]
   );
 
-  return item.type === "note" ? (
-    <>
-      <ScrollView
-        horizontal
-        style={{
-          paddingHorizontal: 16,
-          marginTop: 6,
-          marginBottom: 6
-        }}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={{
-          paddingRight: 25,
-          gap: 15
-        }}
-      >
-        {topBarItems.map(renderTopBarItem)}
-      </ScrollView>
+  const getTopBarItemChunksOfFour = () => {
+    const chunks = [];
+    for (let i = 0; i < topBarItems.length; i += 5) {
+      chunks.push(topBarItems.slice(i, i + 5));
+    }
+    return chunks;
+  };
 
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "wrap",
-          marginTop: 10,
-          gap: 5,
-          paddingHorizontal: DefaultAppStyles.GAP
-        }}
-      >
-        {bottomGridItems.map((item) => renderRowItem({ item }))}
-      </View>
-    </>
-  ) : (
-    <View>{columnItems.map(renderColumnItem)}</View>
+  return (
+    <View
+      style={{
+        gap: DefaultAppStyles.GAP
+      }}
+    >
+      {item.type === "note" ? (
+        <>
+          <View>
+            <SwiperFlatList
+              data={getTopBarItemChunksOfFour()}
+              autoplay={false}
+              showPagination
+              paginationStyleItemActive={{
+                borderRadius: 2,
+                backgroundColor: colors.selected.background,
+                height: 6,
+                marginHorizontal: 2
+              }}
+              paginationStyleItemInactive={{
+                borderRadius: 2,
+                backgroundColor: colors.secondary.background,
+                height: 6,
+                marginHorizontal: 2
+              }}
+              paginationStyle={{
+                position: "relative",
+                marginHorizontal: 2,
+                marginBottom: 0,
+                marginTop: DefaultAppStyles.GAP
+              }}
+              renderItem={({ item, index }) => (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    paddingHorizontal: DefaultAppStyles.GAP,
+                    gap: 5,
+                    width: width
+                  }}
+                >
+                  {item.map(renderTopBarItem)}
+                </View>
+              )}
+            />
+          </View>
+
+          <View
+            style={{
+              flexDirection: "row",
+              flexWrap: "wrap",
+              gap: 5,
+              paddingHorizontal: DefaultAppStyles.GAP
+            }}
+          >
+            {bottomGridItems.map((item) => renderRowItem({ item }))}
+          </View>
+        </>
+      ) : (
+        <View>{columnItems.map(renderColumnItem)}</View>
+      )}
+    </View>
   );
 };
diff --git a/apps/mobile/app/components/properties/notebooks.js b/apps/mobile/app/components/properties/notebooks.js
index baf884402..dbce653d2 100644
--- a/apps/mobile/app/components/properties/notebooks.js
+++ b/apps/mobile/app/components/properties/notebooks.js
@@ -25,7 +25,7 @@ import { db } from "../../common/database";
 import NotebookScreen from "../../screens/notebook";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eClearEditor } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { Pressable } from "../ui/pressable";
@@ -72,7 +72,7 @@ export default function Notebooks({ note, close, full }) {
       <Icon
         name="book-outline"
         color={colors.primary.accent}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
         style={{
           marginRight: 5
         }}
@@ -82,7 +82,7 @@ export default function Notebooks({ note, close, full }) {
         style={{
           maxWidth: "50%"
         }}
-        size={SIZE.sm}
+        size={AppFontSize.sm}
       >
         {item.title}
       </Heading>
@@ -92,40 +92,46 @@ export default function Notebooks({ note, close, full }) {
   return noteNotebooks.length === 0 ? null : (
     <View
       style={{
-        width: "100%",
-        borderRadius: 10,
-        marginTop: 6
+        paddingHorizontal: 12
       }}
     >
-      {full
-        ? noteNotebooks.map(renderItem)
-        : noteNotebooks.slice(0, 1).map(renderItem)}
+      <View
+        style={{
+          width: "100%",
+          borderRadius: 10,
+          marginTop: 6
+        }}
+      >
+        {full
+          ? noteNotebooks.map(renderItem)
+          : noteNotebooks.slice(0, 1).map(renderItem)}
 
-      {noteNotebooks.length > 1 && !full ? (
-        <Button
-          title={strings.viewAllLinkedNotebooks()}
-          fontSize={SIZE.xs}
-          style={{
-            alignSelf: "flex-end",
-            marginRight: 12,
-            paddingHorizontal: 0,
-            backgroundColor: "transparent"
-          }}
-          type="plain"
-          textStyle={{
-            textDecorationLine: "underline"
-          }}
-          height={20}
-          onPress={() => {
-            presentSheet({
-              context: "properties",
-              component: (ref, close) => (
-                <Notebooks note={note} close={close} full={true} />
-              )
-            });
-          }}
-        />
-      ) : undefined}
+        {noteNotebooks.length > 1 && !full ? (
+          <Button
+            title={strings.viewAllLinkedNotebooks()}
+            fontSize={AppFontSize.xs}
+            style={{
+              alignSelf: "flex-end",
+              marginRight: 12,
+              paddingHorizontal: 0,
+              backgroundColor: "transparent"
+            }}
+            type="plain"
+            textStyle={{
+              textDecorationLine: "underline"
+            }}
+            height={20}
+            onPress={() => {
+              presentSheet({
+                context: "properties",
+                component: (ref, close) => (
+                  <Notebooks note={note} close={close} full={true} />
+                )
+              });
+            }}
+          />
+        ) : undefined}
+      </View>
     </View>
   );
 }
diff --git a/apps/mobile/app/components/properties/synced.js b/apps/mobile/app/components/properties/synced.js
index 7778fee23..64cdc4fbf 100644
--- a/apps/mobile/app/components/properties/synced.js
+++ b/apps/mobile/app/components/properties/synced.js
@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
@@ -40,8 +40,8 @@ export const Synced = ({ item, close }) => {
         padding: DefaultAppStyles.GAP_VERTICAL_SMALL,
         paddingHorizontal: DefaultAppStyles.GAP_SMALL
       }}
-      fontSize={SIZE.xxxs}
-      iconSize={SIZE.xs}
+      fontSize={AppFontSize.xxxs}
+      iconSize={AppFontSize.xs}
       icon="shield-key-outline"
       type="shade"
       title="Encrypted and synced"
diff --git a/apps/mobile/app/components/properties/tags.js b/apps/mobile/app/components/properties/tags.js
index 6e006f5ad..593ecd2c0 100644
--- a/apps/mobile/app/components/properties/tags.js
+++ b/apps/mobile/app/components/properties/tags.js
@@ -22,7 +22,7 @@ import { View } from "react-native";
 import { db } from "../../common/database";
 import { TaggedNotes } from "../../screens/notes/tagged";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import ManageTagsSheet from "../sheets/manage-tags";
 import { Button } from "../ui/button";
@@ -57,7 +57,7 @@ export const Tags = ({ item, close }) => {
         icon="plus"
         iconPosition="right"
         height={30}
-        fontSize={SIZE.sm - 1}
+        fontSize={AppFontSize.sm - 1}
         style={{
           height: 35,
           borderRadius: 100
@@ -117,7 +117,7 @@ const TagItem = ({ tag, close }) => {
       title={"#" + tag.title}
       type="plain"
       height={20}
-      fontSize={SIZE.xs}
+      fontSize={AppFontSize.xs}
       style={style}
       textStyle={{
         color: colors.secondary.paragraph
diff --git a/apps/mobile/app/components/selection-header/index.tsx b/apps/mobile/app/components/selection-header/index.tsx
index af13a1e43..80cb83f7d 100644
--- a/apps/mobile/app/components/selection-header/index.tsx
+++ b/apps/mobile/app/components/selection-header/index.tsx
@@ -37,7 +37,7 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { deleteItems } from "../../utils/functions";
 import { fluidTabsRef } from "../../utils/global-refs";
 import { updateNotebook } from "../../utils/notebooks";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { presentDialog } from "../dialog/functions";
@@ -164,7 +164,7 @@ export const SelectionHeader = React.memo(
                 .getState()
                 .setAll(allSelected ? [] : [...((await items?.ids()) || [])]);
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={allSelected ? colors.primary.accent : colors.primary.icon}
             name="select-all"
           />
@@ -276,7 +276,7 @@ export const SelectionHeader = React.memo(
               ].map((item) =>
                 !item.visible ? null : (
                   <IconButton
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     type="plain"
                     name={item.icon}
                     key={item.title}
@@ -293,7 +293,7 @@ export const SelectionHeader = React.memo(
         </View>
 
         <IconButton
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           onPress={() => {
             clearSelection();
           }}
diff --git a/apps/mobile/app/components/sheet-provider/index.js b/apps/mobile/app/components/sheet-provider/index.js
index c4f6e917a..91967d08c 100644
--- a/apps/mobile/app/components/sheet-provider/index.js
+++ b/apps/mobile/app/components/sheet-provider/index.js
@@ -27,7 +27,7 @@ import {
 } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet, eOpenSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import SheetWrapper from "../ui/sheet";
@@ -180,7 +180,7 @@ const SheetProvider = ({ context = "global" }) => {
               type="plain"
               key={v}
               textStyle={{ fontWeight: "normal" }}
-              fontSize={SIZE.sm}
+              fontSize={AppFontSize.sm}
               icon="check"
               width="100%"
               style={{
@@ -223,7 +223,7 @@ const SheetProvider = ({ context = "global" }) => {
                 marginBottom: 10
               }}
               width="100%"
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
             />
           ))}
 
@@ -234,14 +234,14 @@ const SheetProvider = ({ context = "global" }) => {
               marginTop: 10,
               textDecorationLine: "underline"
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             onPress={data.learnMorePress}
             color={colors.secondary.paragraph}
           >
             <Icon
               color={colors.primary.icon}
               name="information-outline"
-              size={SIZE.xs}
+              size={AppFontSize.xs}
             />{" "}
             {data.learnMore}
           </Paragraph>
diff --git a/apps/mobile/app/components/sheets/add-notebook/index.tsx b/apps/mobile/app/components/sheets/add-notebook/index.tsx
index 2821e7a88..81e4bbd57 100644
--- a/apps/mobile/app/components/sheets/add-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/add-notebook/index.tsx
@@ -35,7 +35,7 @@ import { useNotebookStore } from "../../../stores/use-notebook-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { eOnNotebookUpdated } from "../../../utils/events";
 import { getParentNotebookId } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
@@ -118,7 +118,7 @@ export const AddNotebookSheet = ({
         paddingHorizontal: 12
       }}
     >
-      <Heading size={SIZE.lg}>
+      <Heading size={AppFontSize.lg}>
         {notebook ? strings.editNotebook() : strings.newNotebook()}
       </Heading>
 
@@ -160,7 +160,7 @@ export const AddNotebookSheet = ({
         title={notebook ? strings.save() : strings.add()}
         type="accent"
         height={45}
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
           paddingHorizontal: 24,
           width: "100%"
diff --git a/apps/mobile/app/components/sheets/add-to/index.tsx b/apps/mobile/app/components/sheets/add-to/index.tsx
index 662945f7a..e6432692e 100644
--- a/apps/mobile/app/components/sheets/add-to/index.tsx
+++ b/apps/mobile/app/components/sheets/add-to/index.tsx
@@ -44,7 +44,7 @@ import { useRelationStore } from "../../../stores/use-relation-store";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { updateNotebook } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import SheetProvider from "../../sheet-provider";
@@ -314,7 +314,7 @@ const MoveNoteSheet = ({
               >
                 {loading ? (
                   <ActivityIndicator
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     color={colors.primary.accent}
                   />
                 ) : (
diff --git a/apps/mobile/app/components/sheets/add-to/notebook-item.tsx b/apps/mobile/app/components/sheets/add-to/notebook-item.tsx
index 3ad7df969..6c751677d 100644
--- a/apps/mobile/app/components/sheets/add-to/notebook-item.tsx
+++ b/apps/mobile/app/components/sheets/add-to/notebook-item.tsx
@@ -24,7 +24,7 @@ import { notesnook } from "../../../../e2e/test.ids";
 import { useTotalNotes } from "../../../hooks/use-db-item";
 import { useNotebook } from "../../../hooks/use-notebook";
 import useNavigationStore from "../../../stores/use-navigation-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
@@ -147,7 +147,7 @@ export const NotebookItem = ({
         >
           {nestedNotebooks?.placeholders.length ? (
             <IconButton
-              size={SIZE.xl}
+              size={AppFontSize.xl}
               color={isSelected ? colors.selected.icon : colors.primary.icon}
               onPress={() => {
                 if (!item?.id) return;
@@ -166,7 +166,7 @@ export const NotebookItem = ({
           ) : null}
 
           <IconButton
-            size={SIZE.xl}
+            size={AppFontSize.xl}
             color={
               isSelected
                 ? colors.selected.icon
@@ -198,7 +198,7 @@ export const NotebookItem = ({
             color={
               isFocused ? colors.selected.paragraph : colors.secondary.paragraph
             }
-            size={SIZE.sm}
+            size={AppFontSize.sm}
           >
             {item?.title}
           </Paragraph>
@@ -212,7 +212,7 @@ export const NotebookItem = ({
           }}
         >
           {item?.id && totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.sm} color={colors.secondary.paragraph}>
               {totalNotes(item?.id)}
             </Paragraph>
           ) : null}
@@ -238,7 +238,7 @@ export const NotebookItem = ({
             bottom={0}
             top={0}
             color={colors.primary.icon}
-            size={SIZE.xl}
+            size={AppFontSize.xl}
           />
         </View>
       </Pressable>
diff --git a/apps/mobile/app/components/sheets/editor-tabs/index.tsx b/apps/mobile/app/components/sheets/editor-tabs/index.tsx
index e52f56ea0..b89986cee 100644
--- a/apps/mobile/app/components/sheets/editor-tabs/index.tsx
+++ b/apps/mobile/app/components/sheets/editor-tabs/index.tsx
@@ -32,7 +32,7 @@ import {
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import { eUnlockNote } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
@@ -101,15 +101,15 @@ const TabItemComponent = (props: {
         {props.tab.session?.noteLocked ? (
           <>
             {props.tab.session?.locked ? (
-              <Icon size={SIZE.md} name="lock" />
+              <Icon size={AppFontSize.md} name="lock" />
             ) : (
-              <Icon size={SIZE.md} name="lock-open-outline" />
+              <Icon size={AppFontSize.md} name="lock-open-outline" />
             )}
           </>
         ) : null}
 
         {props.tab.session?.readonly ? (
-          <Icon size={SIZE.md} name="pencil-lock" />
+          <Icon size={AppFontSize.md} name="pencil-lock" />
         ) : null}
 
         <Paragraph
@@ -119,7 +119,7 @@ const TabItemComponent = (props: {
               : colors.primary.paragraph
           }
           numberOfLines={1}
-          size={SIZE.md}
+          size={AppFontSize.md}
         >
           {props.tab.session?.noteId
             ? item?.title || strings.untitledNote()
@@ -136,7 +136,7 @@ const TabItemComponent = (props: {
       >
         <IconButton
           name="pin"
-          size={SIZE.lg}
+          size={AppFontSize.lg}
           color={props.tab.pinned ? colors.primary.accent : colors.primary.icon}
           onPress={() => {
             useTabStore.getState().updateTab(props.tab.id, {
@@ -152,7 +152,7 @@ const TabItemComponent = (props: {
         {!props.tab?.pinned ? (
           <IconButton
             name="close"
-            size={SIZE.lg}
+            size={AppFontSize.lg}
             color={colors.primary.icon}
             onPress={() => {
               const isLastTab = useTabStore.getState().tabs.length === 1;
@@ -215,7 +215,7 @@ export default function EditorTabs({
           alignItems: "center"
         }}
       >
-        <Heading size={SIZE.lg}>{strings.tabs()}</Heading>
+        <Heading size={AppFontSize.lg}>{strings.tabs()}</Heading>
         <IconButton
           onPress={() => {
             useTabStore.getState().newTab();
diff --git a/apps/mobile/app/components/sheets/export-notes/index.tsx b/apps/mobile/app/components/sheets/export-notes/index.tsx
index 1b98ce670..e84df073e 100644
--- a/apps/mobile/app/components/sheets/export-notes/index.tsx
+++ b/apps/mobile/app/components/sheets/export-notes/index.tsx
@@ -41,7 +41,7 @@ import Exporter from "../../../services/exporter";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
-import { SIZE, ph, pv } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius, ph, pv } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
@@ -203,7 +203,7 @@ const ExportNotesSheet = ({
                 <View
                   style={{
                     backgroundColor: colors.primary.shade,
-                    borderRadius: 5,
+                    borderRadius: defaultBorderRadius,
                     height: 60,
                     width: 60,
                     justifyContent: "center",
@@ -215,7 +215,7 @@ const ExportNotesSheet = ({
                     color={
                       item.pro ? colors.primary.accent : colors.primary.icon
                     }
-                    size={SIZE.xxxl + 10}
+                    size={AppFontSize.xxxl + 10}
                   />
                 </View>
                 <View
@@ -224,7 +224,7 @@ const ExportNotesSheet = ({
                   }}
                 >
                   {!item.pro ? <ProTag size={12} /> : null}
-                  <Heading style={{ marginLeft: 10 }} size={SIZE.md}>
+                  <Heading style={{ marginLeft: 10 }} size={AppFontSize.md}>
                     {item.title}
                   </Heading>
                   {/* <Paragraph
@@ -294,7 +294,7 @@ const ExportNotesSheet = ({
                   }
                   type="accent"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: 10,
                     borderRadius: 100
@@ -323,7 +323,7 @@ const ExportNotesSheet = ({
                   title={strings.share()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: 10,
                     borderRadius: 100
@@ -351,7 +351,7 @@ const ExportNotesSheet = ({
                   title={strings.exportAgain()}
                   type="inverted"
                   width={250}
-                  fontSize={SIZE.md}
+                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: 10,
                     borderRadius: 100
@@ -384,7 +384,7 @@ ExportNotesSheet.present = async (ids?: string[], allNotes?: boolean) => {
 const styles = StyleSheet.create({
   container: {
     ...getElevationStyle(5),
-    borderRadius: 5,
+    borderRadius: defaultBorderRadius,
     paddingVertical: pv
   },
   buttonContainer: {
@@ -395,7 +395,7 @@ const styles = StyleSheet.create({
     paddingVertical: pv,
     paddingHorizontal: ph,
     marginTop: 10,
-    borderRadius: 5,
+    borderRadius: defaultBorderRadius,
     width: "100%",
     justifyContent: "center",
     alignItems: "center",
@@ -405,7 +405,7 @@ const styles = StyleSheet.create({
   buttonText: {
     //fontFamily: "sans-serif",
     color: "white",
-    fontSize: SIZE.sm,
+    fontSize: AppFontSize.sm,
     marginLeft: 5
   },
   overlay: {
diff --git a/apps/mobile/app/components/sheets/export-notes/share.jsx b/apps/mobile/app/components/sheets/export-notes/share.jsx
index 9843a89b4..fb032c945 100644
--- a/apps/mobile/app/components/sheets/export-notes/share.jsx
+++ b/apps/mobile/app/components/sheets/export-notes/share.jsx
@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import { ToastManager } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import { strings } from "@notesnook/intl";
 export const ShareComponent = ({ uri, name, padding }) => {
@@ -35,7 +35,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.open()}
         type="accent"
         width="100%"
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         onPress={async () => {
           FileViewer.open(uri, {
             showOpenWithDialog: true,
@@ -53,7 +53,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.share()}
         type="shade"
         width="100%"
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
           marginTop: 10
         }}
diff --git a/apps/mobile/app/components/sheets/github/issue.js b/apps/mobile/app/components/sheets/github/issue.js
index 6edd75fde..b0c99e8fe 100644
--- a/apps/mobile/app/components/sheets/github/issue.js
+++ b/apps/mobile/app/components/sheets/github/issue.js
@@ -28,7 +28,7 @@ import { ToastManager } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
 import { useUserStore } from "../../../stores/use-user-store";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
@@ -147,11 +147,11 @@ Logged in: ${user ? "yes" : "no"}`,
             style={{
               borderWidth: 1,
               borderColor: colors.primary.border,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               padding: 12,
               fontFamily: "OpenSans-Regular",
               marginBottom: 10,
-              fontSize: SIZE.md,
+              fontSize: AppFontSize.md,
               color: colors.primary.heading
             }}
             placeholderTextColor={colors.primary.placeholder}
@@ -180,18 +180,18 @@ Logged in: ${user ? "yes" : "no"}`,
             style={{
               borderWidth: 1,
               borderColor: colors.primary.border,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               padding: 12,
               fontFamily: "OpenSans-Regular",
               maxHeight: 200,
-              fontSize: SIZE.sm,
+              fontSize: AppFontSize.sm,
               marginBottom: 2.5,
               color: colors.primary.paragraph
             }}
             placeholderTextColor={colors.primary.placeholder}
           />
           <Paragraph
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >{`App version: ${getVersion()} Platform: ${
             Platform.OS
@@ -208,7 +208,7 @@ Logged in: ${user ? "yes" : "no"}`,
 
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             style={{
               marginTop: 10,
               textAlign: "center"
@@ -217,7 +217,9 @@ Logged in: ${user ? "yes" : "no"}`,
             {strings.issueNotice[0]()}{" "}
             <Text
               onPress={() => {
-                Linking.openURL("https://github.com/streetwriters/notesnook/issues");
+                Linking.openURL(
+                  "https://github.com/streetwriters/notesnook/issues"
+                );
               }}
               style={{
                 textDecorationLine: "underline",
diff --git a/apps/mobile/app/components/sheets/link-note/index.tsx b/apps/mobile/app/components/sheets/link-note/index.tsx
index 41a0d38ec..51904eeaf 100644
--- a/apps/mobile/app/components/sheets/link-note/index.tsx
+++ b/apps/mobile/app/components/sheets/link-note/index.tsx
@@ -33,7 +33,7 @@ import { db } from "../../../common/database";
 import { useDBItem } from "../../../hooks/use-db-item";
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import { presentSheet } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
@@ -122,7 +122,7 @@ const ListBlockItem = ({
 
         <View
           style={{
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             backgroundColor: colors.secondary.background,
             height: 25,
             minWidth: 25,
@@ -130,7 +130,7 @@ const ListBlockItem = ({
             justifyContent: "center"
           }}
         >
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
             {item.type.toUpperCase()}
           </Paragraph>
         </View>
@@ -254,7 +254,7 @@ export default function LinkNote(props: {
               gap: 10
             }}
           >
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+            <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
               {strings.linkNoteSelectedNote()}
             </Paragraph>
             <Pressable
@@ -284,7 +284,10 @@ export default function LinkNote(props: {
               >
                 <Paragraph numberOfLines={1}>{selectedNote?.title}</Paragraph>
 
-                <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+                <Paragraph
+                  color={colors.secondary.paragraph}
+                  size={AppFontSize.xs}
+                >
                   {strings.tapToDeselect()}
                 </Paragraph>
               </View>
@@ -296,7 +299,7 @@ export default function LinkNote(props: {
                   marginBottom: 12
                 }}
                 color={colors.secondary.paragraph}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
               >
                 {strings.linkNoteToSection()}
               </Paragraph>
diff --git a/apps/mobile/app/components/sheets/manage-tags/index.tsx b/apps/mobile/app/components/sheets/manage-tags/index.tsx
index 8f59fd62e..c8d3d916d 100644
--- a/apps/mobile/app/components/sheets/manage-tags/index.tsx
+++ b/apps/mobile/app/components/sheets/manage-tags/index.tsx
@@ -43,7 +43,7 @@ import {
 } from "../../../stores/item-selection-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { useTagStore } from "../../../stores/use-tag-store";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
@@ -250,7 +250,7 @@ const ManageTagsSheet = (props: {
         button={{
           icon: "magnify",
           color: colors.primary.accent,
-          size: SIZE.lg,
+          size: AppFontSize.lg,
           onPress: () => {}
         }}
         testID="tag-input"
@@ -284,10 +284,14 @@ const ManageTagsSheet = (props: {
           onPress={onSubmit}
           type="selected"
         >
-          <Heading size={SIZE.sm} color={colors.selected.heading}>
+          <Heading size={AppFontSize.sm} color={colors.selected.heading}>
             {strings.add()} {'"' + "#" + query + '"'}
           </Heading>
-          <Icon name="plus" color={colors.selected.icon} size={SIZE.lg} />
+          <Icon
+            name="plus"
+            color={colors.selected.icon}
+            size={AppFontSize.lg}
+          />
         </Pressable>
       ) : null}
 
@@ -403,13 +407,13 @@ const TagItem = ({
         />
       )}
       {tag ? (
-        <Paragraph size={SIZE.sm}>{"#" + tag?.title}</Paragraph>
+        <Paragraph size={AppFontSize.sm}>{"#" + tag?.title}</Paragraph>
       ) : (
         <View
           style={{
             width: 200,
             height: 30,
-            borderRadius: 5
+            borderRadius: defaultBorderRadius
           }}
         />
       )}
diff --git a/apps/mobile/app/components/sheets/move-notebook/index.tsx b/apps/mobile/app/components/sheets/move-notebook/index.tsx
index 14640ee3b..7e5ed1865 100644
--- a/apps/mobile/app/components/sheets/move-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/move-notebook/index.tsx
@@ -35,7 +35,7 @@ import {
   findRootNotebookId,
   getParentNotebookId
 } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { presentDialog } from "../../dialog/functions";
@@ -322,7 +322,7 @@ const NotebookItem = ({
                 false
               );
             }}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           />
         </View>
       </Pressable>
diff --git a/apps/mobile/app/components/sheets/move-notes/movenote.tsx b/apps/mobile/app/components/sheets/move-notes/movenote.tsx
index be32c8d8b..0f666769d 100644
--- a/apps/mobile/app/components/sheets/move-notes/movenote.tsx
+++ b/apps/mobile/app/components/sheets/move-notes/movenote.tsx
@@ -30,7 +30,7 @@ import { presentSheet } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { createItemSelectionStore } from "../../../stores/item-selection-store";
 import { updateNotebook } from "../../../utils/notebooks";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
@@ -131,7 +131,7 @@ export const MoveNotes = ({
         button={{
           icon: "magnify",
           color: colors.primary.accent,
-          size: SIZE.lg,
+          size: AppFontSize.lg,
           onPress: () => {}
         }}
         testID="search-input"
@@ -270,7 +270,7 @@ const SelectableNoteItem = React.memo(
                 <Paragraph
                   numberOfLines={1}
                   color={colors?.secondary.paragraph}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                 >
                   {item.headline}
                 </Paragraph>
diff --git a/apps/mobile/app/components/sheets/new-feature/index.tsx b/apps/mobile/app/components/sheets/new-feature/index.tsx
index 63a66153a..45028bb85 100644
--- a/apps/mobile/app/components/sheets/new-feature/index.tsx
+++ b/apps/mobile/app/components/sheets/new-feature/index.tsx
@@ -26,7 +26,7 @@ import { features } from "../../../features";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { eCloseSheet } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
@@ -56,7 +56,7 @@ const NewFeature = ({
         maxHeight: "100%"
       }}
     >
-      <Heading color={colors.secondary.heading} size={SIZE.md}>
+      <Heading color={colors.secondary.heading} size={AppFontSize.md}>
         {strings.newVersionHighlights(version)}
       </Heading>
 
@@ -74,7 +74,7 @@ const NewFeature = ({
               marginBottom: 10
             }}
           >
-            <Heading size={SIZE.lg - 2}>{item.title}</Heading>
+            <Heading size={AppFontSize.lg - 2}>{item.title}</Heading>
             <Paragraph selectable>{item.body}</Paragraph>
           </View>
         ))}
diff --git a/apps/mobile/app/components/sheets/notebook-sheet/index.tsx b/apps/mobile/app/components/sheets/notebook-sheet/index.tsx
index 6649c5184..b1d57bffe 100644
--- a/apps/mobile/app/components/sheets/notebook-sheet/index.tsx
+++ b/apps/mobile/app/components/sheets/notebook-sheet/index.tsx
@@ -43,7 +43,7 @@ import { useSelectionStore } from "../../../stores/use-selection-store";
 import { eOnNotebookUpdated } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
 import { findRootNotebookId } from "../../../utils/notebooks";
-import { SIZE, normalize } from "../../../utils/size";
+import { AppFontSize, normalize } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
@@ -264,7 +264,7 @@ export const NotebookSheet = () => {
               width: normalize(50)
             }}
           >
-            <Icon name="plus" color="white" size={SIZE.xxl} />
+            <Icon name="plus" color="white" size={AppFontSize.xxl} />
           </View>
         </Pressable>
       </View>
@@ -283,7 +283,7 @@ export const NotebookSheet = () => {
             alignItems: "center"
           }}
         >
-          <Paragraph size={SIZE.xs} color={colors.primary.icon}>
+          <Paragraph size={AppFontSize.xs} color={colors.primary.icon}>
             {strings.notebooks()}
           </Paragraph>
           <View
@@ -539,7 +539,7 @@ const NotebookItem = ({
         >
           {nestedNotebooks?.placeholders.length ? (
             <IconButton
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={isSelected ? colors.selected.icon : colors.primary.icon}
               onPress={() => {
                 if (!item?.id) return;
@@ -566,7 +566,7 @@ const NotebookItem = ({
 
           {enabled ? (
             <IconButton
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               color={isSelected ? colors.selected.icon : colors.primary.icon}
               top={0}
               left={0}
@@ -589,7 +589,7 @@ const NotebookItem = ({
             color={
               isFocused ? colors.selected.paragraph : colors.secondary.paragraph
             }
-            size={SIZE.sm}
+            size={AppFontSize.sm}
           >
             {item?.title}
           </Paragraph>
@@ -603,7 +603,7 @@ const NotebookItem = ({
           }}
         >
           {item?.id && totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
+            <Paragraph size={AppFontSize.sm} color={colors.secondary.paragraph}>
               {totalNotes(item?.id)}
             </Paragraph>
           ) : null}
@@ -622,7 +622,7 @@ const NotebookItem = ({
             bottom={0}
             top={0}
             color={colors.primary.icon}
-            size={SIZE.xl}
+            size={AppFontSize.xl}
           />
         </View>
       </Pressable>
diff --git a/apps/mobile/app/components/sheets/progress/index.tsx b/apps/mobile/app/components/sheets/progress/index.tsx
index 6858bab59..102fa3536 100644
--- a/apps/mobile/app/components/sheets/progress/index.tsx
+++ b/apps/mobile/app/components/sheets/progress/index.tsx
@@ -22,7 +22,7 @@ import { View } from "react-native";
 import useSyncProgress from "../../../hooks/use-sync-progress";
 import { presentSheet } from "../../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import Seperator from "../../ui/seperator";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
@@ -52,7 +52,7 @@ export const Progress = () => {
         paddingBottom: 15
       }}
     >
-      <Heading size={SIZE.lg}>{strings.syncingHeading()}</Heading>
+      <Heading size={AppFontSize.lg}>{strings.syncingHeading()}</Heading>
       <Paragraph>{strings.syncingDesc()}</Paragraph>
       <Seperator />
       <View
diff --git a/apps/mobile/app/components/sheets/publish-note/index.tsx b/apps/mobile/app/components/sheets/publish-note/index.tsx
index 042c7b6e7..9e3a5ee94 100644
--- a/apps/mobile/app/components/sheets/publish-note/index.tsx
+++ b/apps/mobile/app/components/sheets/publish-note/index.tsx
@@ -27,7 +27,7 @@ import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
 import { useThemeColors } from "@notesnook/theme";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -158,7 +158,7 @@ const PublishNoteSheet = ({
                 marginTop: 10,
                 backgroundColor: colors.secondary.background,
                 padding: 12,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               <View
@@ -167,8 +167,10 @@ const PublishNoteSheet = ({
                   flexShrink: 1
                 }}
               >
-                <Heading size={SIZE.md}>{strings.publishedAt()}:</Heading>
-                <Paragraph size={SIZE.sm} numberOfLines={1}>
+                <Heading size={AppFontSize.md}>
+                  {strings.publishedAt()}:
+                </Heading>
+                <Paragraph size={AppFontSize.sm} numberOfLines={1}>
                   {publishUrl}
                 </Paragraph>
                 <Paragraph
@@ -179,7 +181,7 @@ const PublishNoteSheet = ({
                       console.error(e);
                     }
                   }}
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   style={{
                     marginTop: 5,
                     color: colors.primary.paragraph
@@ -200,7 +202,7 @@ const PublishNoteSheet = ({
                   });
                 }}
                 color={colors.primary.accent}
-                size={SIZE.lg}
+                size={AppFontSize.lg}
                 name="content-copy"
               />
             </View>
@@ -218,7 +220,7 @@ const PublishNoteSheet = ({
               marginBottom: 10,
               backgroundColor: colors.secondary.background,
               paddingVertical: 12,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           >
@@ -228,7 +230,7 @@ const PublishNoteSheet = ({
                 setIsLocked(!isLocked);
               }}
               color={isLocked ? colors.selected.icon : colors.primary.icon}
-              size={SIZE.xl}
+              size={AppFontSize.xl}
               name={
                 isLocked
                   ? "check-circle-outline"
@@ -242,7 +244,9 @@ const PublishNoteSheet = ({
                 flexShrink: 1
               }}
             >
-              <Heading size={SIZE.md}>{strings.monographPassHeading()}</Heading>
+              <Heading size={AppFontSize.md}>
+                {strings.monographPassHeading()}
+              </Heading>
               <Paragraph>{strings.monographPassDesc()}</Paragraph>
             </View>
           </TouchableOpacity>
@@ -257,7 +261,7 @@ const PublishNoteSheet = ({
               alignItems: "center",
               backgroundColor: colors.secondary.background,
               paddingVertical: 12,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           >
             <IconButton
@@ -265,7 +269,7 @@ const PublishNoteSheet = ({
                 setSelfDestruct(!selfDestruct);
               }}
               color={selfDestruct ? colors.selected.icon : colors.primary.icon}
-              size={SIZE.xl}
+              size={AppFontSize.xl}
               name={
                 selfDestruct
                   ? "check-circle-outline"
@@ -279,7 +283,7 @@ const PublishNoteSheet = ({
                 flexShrink: 1
               }}
             >
-              <Heading size={SIZE.md}>
+              <Heading size={AppFontSize.md}>
                 {strings.monographSelfDestructHeading()}
               </Heading>
               <Paragraph>{strings.monographSelfDestructDesc()}</Paragraph>
@@ -318,7 +322,7 @@ const PublishNoteSheet = ({
                 <>
                   <Button
                     onPress={deletePublishedNote}
-                    fontSize={SIZE.md}
+                    fontSize={AppFontSize.md}
                     type="error"
                     title={strings.unpublish()}
                     style={{
@@ -330,7 +334,7 @@ const PublishNoteSheet = ({
               <Seperator half />
               <Button
                 onPress={publishNote}
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 style={{
                   width: isPublished ? "49%" : 250,
                   borderRadius: isPublished ? 5 : 100
@@ -345,7 +349,7 @@ const PublishNoteSheet = ({
 
       <Paragraph
         color={colors.secondary.paragraph}
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         style={{
           textAlign: "center",
           marginTop: 10,
diff --git a/apps/mobile/app/components/sheets/rate-app/index.js b/apps/mobile/app/components/sheets/rate-app/index.js
index b2c04c0b6..b27f10118 100644
--- a/apps/mobile/app/components/sheets/rate-app/index.js
+++ b/apps/mobile/app/components/sheets/rate-app/index.js
@@ -27,7 +27,7 @@ import { clearMessage } from "../../../services/message";
 import SettingsService from "../../../services/settings";
 import { STORE_LINK } from "../../../utils/constants";
 import { eCloseRateDialog, eOpenRateDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
@@ -87,12 +87,12 @@ const RateAppSheet = () => {
         }}
       >
         <Heading>{strings.rateAppHeading()}</Heading>
-        <Paragraph size={SIZE.md}>{strings.rateAppDesc()}</Paragraph>
+        <Paragraph size={AppFontSize.md}>{strings.rateAppDesc()}</Paragraph>
 
         <Seperator half />
         <Button
           onPress={rateApp}
-          fontSize={SIZE.md}
+          fontSize={AppFontSize.md}
           width="100%"
           type="accent"
           title={strings.rateApp()}
@@ -115,14 +115,14 @@ const RateAppSheet = () => {
               setVisible(false);
               clearMessage();
             }}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             type="error"
             width="48%"
             title={strings.never()}
           />
           <Button
             onPress={onClose}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             width="48%"
             type="secondary"
             title={strings.later()}
diff --git a/apps/mobile/app/components/sheets/recovery-key/index.jsx b/apps/mobile/app/components/sheets/recovery-key/index.jsx
index 4d331fd3e..1d06e770f 100644
--- a/apps/mobile/app/components/sheets/recovery-key/index.jsx
+++ b/apps/mobile/app/components/sheets/recovery-key/index.jsx
@@ -36,7 +36,7 @@ import {
 import { clearMessage } from "../../../services/message";
 import SettingsService from "../../../services/settings";
 import { eOpenRecoveryKeyDialog } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
@@ -235,14 +235,14 @@ class RecoveryKeySheet extends React.Component {
 
           <View
             style={{
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               padding: 12,
               marginTop: 10
             }}
           >
             <Paragraph
               color={colors.primary.paragraph}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
               numberOfLines={2}
               selectable
               style={{
@@ -294,7 +294,7 @@ class RecoveryKeySheet extends React.Component {
             title={strings.copyToClipboard()}
             width="100%"
             type="secondaryAccented"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
           />
           <Seperator />
           <Button
@@ -302,7 +302,7 @@ class RecoveryKeySheet extends React.Component {
             onPress={this.saveQRCODE}
             width="100%"
             type="secondaryAccented"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             icon="qrcode"
           />
           <Seperator />
@@ -312,7 +312,7 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="text"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
           />
           <Seperator />
 
@@ -322,13 +322,13 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="cloud"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
           />
           <Seperator />
 
           <Paragraph
             color={colors.secondary.paragraph}
-            size={SIZE.sm}
+            size={AppFontSize.sm}
             numberOfLines={2}
             style={{
               width: "100%",
@@ -343,7 +343,7 @@ class RecoveryKeySheet extends React.Component {
             title={strings.done()}
             width="100%"
             type="error"
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             onPress={this.close}
           />
         </View>
diff --git a/apps/mobile/app/components/sheets/references/index.tsx b/apps/mobile/app/components/sheets/references/index.tsx
index 35413fa2c..27c574eaa 100644
--- a/apps/mobile/app/components/sheets/references/index.tsx
+++ b/apps/mobile/app/components/sheets/references/index.tsx
@@ -35,7 +35,7 @@ import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { eOnLoadNote } from "../../../utils/events";
 import { fluidTabsRef } from "../../../utils/global-refs";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import SheetProvider from "../../sheet-provider";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
@@ -106,7 +106,7 @@ const ListBlockItem = ({
 
         <View
           style={{
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             backgroundColor: colors.secondary.background,
             width: 25,
             height: 25,
@@ -114,7 +114,7 @@ const ListBlockItem = ({
             justifyContent: "center"
           }}
         >
-          <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
             {item.type.toUpperCase()}
           </Paragraph>
         </View>
@@ -327,7 +327,7 @@ const ListNoteItem = ({
         }}
       >
         <IconButton
-          size={SIZE.xl}
+          size={AppFontSize.xl}
           onPress={() => {
             if (!item?.id) return;
             useExpandedStore.getState().setExpanded(item?.id);
@@ -354,7 +354,10 @@ const ListNoteItem = ({
           }}
         >
           {loading ? (
-            <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+            <ActivityIndicator
+              color={colors.primary.accent}
+              size={AppFontSize.lg}
+            />
           ) : (
             <>
               {listType === "linkedNotes" ? (
diff --git a/apps/mobile/app/components/sheets/relations-list/index.tsx b/apps/mobile/app/components/sheets/relations-list/index.tsx
index cc5a949da..4e54cd4c0 100644
--- a/apps/mobile/app/components/sheets/relations-list/index.tsx
+++ b/apps/mobile/app/components/sheets/relations-list/index.tsx
@@ -30,7 +30,7 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import DialogHeader from "../../dialog/dialog-header";
 import List from "../../list";
 import SheetProvider from "../../sheet-provider";
@@ -119,7 +119,7 @@ export const RelationsList = ({
             onPress={() => {
               onAdd?.();
             }}
-            fontSize={SIZE.sm}
+            fontSize={AppFontSize.sm}
             //  width="100%"
             type="inverted"
             icon="plus"
diff --git a/apps/mobile/app/components/sheets/reminder-notify/index.tsx b/apps/mobile/app/components/sheets/reminder-notify/index.tsx
index 5c0645ce7..e964c2b58 100644
--- a/apps/mobile/app/components/sheets/reminder-notify/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder-notify/index.tsx
@@ -29,7 +29,7 @@ import {
 } from "../../../services/event-manager";
 import Notifications from "../../../services/notifications";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import List from "../../list";
 import { Button } from "../../ui/button";
 import Heading from "../../ui/typography/heading";
@@ -135,7 +135,7 @@ export default function ReminderNotify({
           marginTop: 10
         }}
       >
-        <Paragraph size={SIZE.xs}>{strings.remindMeIn()}:</Paragraph>
+        <Paragraph size={AppFontSize.xs}>{strings.remindMeIn()}:</Paragraph>
         {QuickActions.map((item) => {
           return (
             <Button
@@ -143,7 +143,7 @@ export default function ReminderNotify({
               key={item.title}
               title={item.title}
               height={30}
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               style={{ marginLeft: 10, borderRadius: 100 }}
               onPress={() => onSnooze(item.time)}
             />
@@ -168,7 +168,7 @@ export default function ReminderNotify({
           <Paragraph
             style={{
               color: colors.secondary.paragraph,
-              fontSize: SIZE.xs,
+              fontSize: AppFontSize.xs,
               marginBottom: 10
             }}
           >
diff --git a/apps/mobile/app/components/sheets/reminder/index.tsx b/apps/mobile/app/components/sheets/reminder/index.tsx
index f9669e2d7..cf2e943f1 100644
--- a/apps/mobile/app/components/sheets/reminder/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder/index.tsx
@@ -31,7 +31,7 @@ import {
   ToastManager,
   presentSheet
 } from "../../../services/event-manager";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 
@@ -228,7 +228,7 @@ export default function ReminderSheet({
         maxHeight: "100%"
       }}
     >
-      <Heading size={SIZE.lg}>
+      <Heading size={AppFontSize.lg}>
         {reminder ? strings.editReminder() : strings.newReminder()}
       </Heading>
 
@@ -324,7 +324,7 @@ export default function ReminderSheet({
             style={{
               backgroundColor: colors.secondary.background,
               padding: 12,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginBottom: 12
             }}
           >
@@ -382,7 +382,7 @@ export default function ReminderSheet({
                       type={
                         selectedDays.indexOf(index) > -1 ? "selected" : "plain"
                       }
-                      fontSize={SIZE.sm - 1}
+                      fontSize={AppFontSize.sm - 1}
                       style={{
                         width: 40,
                         height: 40,
@@ -410,7 +410,7 @@ export default function ReminderSheet({
                           ? "selected"
                           : "plain"
                       }
-                      fontSize={SIZE.sm - 1}
+                      fontSize={AppFontSize.sm - 1}
                       style={{
                         width: 40,
                         height: 40,
@@ -480,7 +480,7 @@ export default function ReminderSheet({
                 title={date ? date.toLocaleDateString() : strings.selectDate()}
                 type={date ? "secondaryAccented" : "secondary"}
                 icon="calendar"
-                fontSize={SIZE.md}
+                fontSize={AppFontSize.md}
                 onPress={() => {
                   showDatePicker();
                 }}
@@ -493,7 +493,7 @@ export default function ReminderSheet({
         reminderMode === ReminderModes.Permanent ? null : (
           <View
             style={{
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               flexDirection: "row",
               paddingVertical: 6,
               paddingHorizontal: 12,
@@ -504,7 +504,10 @@ export default function ReminderSheet({
             }}
           >
             <>
-              <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
+              <Paragraph
+                size={AppFontSize.xs}
+                color={colors.secondary.paragraph}
+              >
                 {recurringMode === RecurringModes.Daily
                   ? strings.reminderRepeatStrings.day(
                       dayjs(date).format("hh:mm A")
@@ -598,7 +601,7 @@ export default function ReminderSheet({
         title={strings.save()}
         type="accent"
         height={45}
-        fontSize={SIZE.md}
+        fontSize={AppFontSize.md}
         style={{
           paddingHorizontal: 24,
           marginTop: 10,
diff --git a/apps/mobile/app/components/sheets/sort/index.tsx b/apps/mobile/app/components/sheets/sort/index.tsx
index fa303bb1a..cac0e6c19 100644
--- a/apps/mobile/app/components/sheets/sort/index.tsx
+++ b/apps/mobile/app/components/sheets/sort/index.tsx
@@ -31,16 +31,26 @@ import { db } from "../../../common/database";
 import { eSendEvent } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { RouteName } from "../../../stores/use-navigation-store";
+import { useNotebookStore } from "../../../stores/use-notebook-store";
+import { useTagStore } from "../../../stores/use-tag-store";
 import { GROUP, SORT } from "../../../utils/constants";
 import { eGroupOptionsUpdated, refreshNotesPage } from "../../../utils/events";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import AppIcon from "../../ui/AppIcon";
 import { Button } from "../../ui/button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
+const Sort = ({
+  type,
+  screen,
+  hideGroupOptions
+}: {
+  type: ItemType;
+  screen?: RouteName;
+  hideGroupOptions?: boolean;
+}) => {
   const { colors } = useThemeColors();
   const [groupOptions, setGroupOptions] = useState(
     db.settings.getGroupOptions(
@@ -54,7 +64,12 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
     await db.settings.setGroupOptions(groupType, _groupOptions);
     setGroupOptions(_groupOptions);
     setTimeout(() => {
-      Navigation.queueRoutesForUpdate(screen);
+      if (screen) Navigation.queueRoutesForUpdate(screen);
+      if (type === "notebook") {
+        useNotebookStore.getState().refresh();
+      } else if (type === "tag") {
+        useTagStore.getState().refresh();
+      }
       eSendEvent(eGroupOptionsUpdated, groupType);
       eSendEvent(refreshNotesPage);
     }, 1);
@@ -88,7 +103,7 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
         }}
       >
         <Heading
-          size={SIZE.md}
+          size={AppFontSize.md}
           style={{
             alignSelf: "center"
           }}
@@ -119,7 +134,7 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
           }
           height={30}
           iconPosition="right"
-          fontSize={SIZE.sm}
+          fontSize={AppFontSize.sm}
           type="plain"
           style={{
             paddingHorizontal: DefaultAppStyles.GAP_SMALL
@@ -135,95 +150,16 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
           borderBottomColor: colors.primary.border
         }}
       >
-        {groupOptions?.groupBy === "abc" ? (
-          <Button
-            type="secondary"
-            title={strings.title()}
-            height={40}
-            iconPosition="left"
-            icon={"check"}
-            buttonType={{ text: colors.primary.accent }}
-            fontSize={SIZE.sm}
-            iconSize={SIZE.md}
-          />
-        ) : (
-          Object.keys(SORT).map((item) =>
-            (item === "dueDate" && screen !== "Reminders") ||
-            (screen !== "Tags" &&
-              screen !== "Reminders" &&
-              item === "dateModified") ||
-            ((screen === "Tags" || screen === "Reminders") &&
-              item === "dateEdited") ? null : (
-              <Pressable
-                key={item}
-                type={groupOptions?.sortBy === item ? "selected" : "plain"}
-                noborder
-                style={{
-                  width: "100%",
-                  justifyContent: "space-between",
-                  height: 40,
-                  flexDirection: "row",
-                  borderRadius: 0,
-                  paddingHorizontal: DefaultAppStyles.GAP
-                }}
-                onPress={async () => {
-                  const _groupOptions: GroupOptions = {
-                    ...groupOptions,
-                    sortBy:
-                      type === "trash"
-                        ? "dateDeleted"
-                        : (item as SortOptions["sortBy"])
-                  };
-                  await updateGroupOptions(_groupOptions);
-                }}
-              >
-                <Paragraph>
-                  {strings.sortByStrings[
-                    item as keyof typeof strings.sortByStrings
-                  ]()}
-                </Paragraph>
-
-                {groupOptions.sortBy === item ? (
-                  <AppIcon
-                    size={SIZE.lg}
-                    name="check"
-                    color={colors.selected.accent}
-                  />
-                ) : null}
-              </Pressable>
-            )
-          )
-        )}
-      </View>
-
-      <>
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
-          }}
-        >
-          <Heading size={SIZE.md}>{strings.groupBy()}</Heading>
-        </View>
-
-        <View
-          style={{
-            borderRadius: 0,
-            flexDirection: "row",
-            flexWrap: "wrap"
-          }}
-        >
-          {Object.keys(GROUP).map((item) => (
+        {Object.keys(SORT).map((item) =>
+          (item === "dueDate" && screen !== "Reminders") ||
+          (screen !== "Tags" &&
+            screen !== "Reminders" &&
+            item === "dateModified") ||
+          ((screen === "Tags" || screen === "Reminders") &&
+            item === "dateEdited") ? null : (
             <Pressable
               key={item}
-              type={
-                groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
-                  ? "selected"
-                  : "plain"
-              }
+              type={groupOptions?.sortBy === item ? "selected" : "plain"}
               noborder
               style={{
                 width: "100%",
@@ -245,22 +181,87 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
               }}
             >
               <Paragraph>
-                {strings.groupByStrings[
-                  item as keyof typeof strings.groupByStrings
+                {strings.sortByStrings[
+                  item as keyof typeof strings.sortByStrings
                 ]()}
               </Paragraph>
 
-              {groupOptions.groupBy === item ? (
+              {groupOptions.sortBy === item ? (
                 <AppIcon
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                   name="check"
                   color={colors.selected.accent}
                 />
               ) : null}
             </Pressable>
-          ))}
-        </View>
-      </>
+          )
+        )}
+      </View>
+
+      {!hideGroupOptions ? (
+        <>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
+            }}
+          >
+            <Heading size={AppFontSize.md}>{strings.groupBy()}</Heading>
+          </View>
+
+          <View
+            style={{
+              borderRadius: 0,
+              flexDirection: "row",
+              flexWrap: "wrap"
+            }}
+          >
+            {Object.keys(GROUP).map((item) => (
+              <Pressable
+                key={item}
+                type={
+                  groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
+                    ? "selected"
+                    : "plain"
+                }
+                noborder
+                style={{
+                  width: "100%",
+                  justifyContent: "space-between",
+                  height: 40,
+                  flexDirection: "row",
+                  borderRadius: 0,
+                  paddingHorizontal: DefaultAppStyles.GAP
+                }}
+                onPress={async () => {
+                  const _groupOptions: GroupOptions = {
+                    ...groupOptions,
+                    groupBy: item as GroupOptions["groupBy"]
+                  };
+                  await updateGroupOptions(_groupOptions);
+                }}
+              >
+                <Paragraph>
+                  {strings.groupByStrings[
+                    item as keyof typeof strings.groupByStrings
+                  ]()}
+                </Paragraph>
+
+                {groupOptions.groupBy === item ? (
+                  <AppIcon
+                    size={AppFontSize.lg}
+                    name="check"
+                    color={colors.selected.accent}
+                  />
+                ) : null}
+              </Pressable>
+            ))}
+          </View>
+        </>
+      ) : null}
     </View>
   );
 };
diff --git a/apps/mobile/app/components/sheets/toc/index.tsx b/apps/mobile/app/components/sheets/toc/index.tsx
index 3bd241590..16d47d8b0 100644
--- a/apps/mobile/app/components/sheets/toc/index.tsx
+++ b/apps/mobile/app/components/sheets/toc/index.tsx
@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { presentSheet } from "../../../services/event-manager";
 import Heading from "../../ui/typography/heading";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
@@ -86,7 +86,7 @@ const TableOfContentsItem: React.FC<{
               ? colors.selected.paragraph
               : colors.primary.paragraph
           }
-          size={SIZE.md}
+          size={AppFontSize.md}
         >
           {item?.title || strings.newNote()}
         </Paragraph>
@@ -112,7 +112,7 @@ const TableOfContents = ({ toc, close }: TableOfContentsProps) => {
           alignItems: "center"
         }}
       >
-        <Heading size={SIZE.lg}>{strings.toc()}</Heading>
+        <Heading size={AppFontSize.lg}>{strings.toc()}</Heading>
       </View>
 
       <FlatList
diff --git a/apps/mobile/app/components/sheets/update/index.js b/apps/mobile/app/components/sheets/update/index.js
index 14646d2f7..541cbfd86 100644
--- a/apps/mobile/app/components/sheets/update/index.js
+++ b/apps/mobile/app/components/sheets/update/index.js
@@ -25,7 +25,7 @@ import Config from "react-native-config";
 import deviceInfoModule from "react-native-device-info";
 import { useThemeColors } from "@notesnook/theme";
 import { STORE_LINK } from "../../../utils/constants";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import { SvgView } from "../../ui/svg";
@@ -102,7 +102,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
             {!version ? (
               <>
                 <ProgressBarComponent
-                  size={SIZE.xxl}
+                  size={AppFontSize.xxl}
                   indeterminate={true}
                   color={colors.primary.accent}
                   borderWidth={0}
@@ -113,13 +113,13 @@ export const Update = ({ version: appVersion, fwdRef }) => {
                   style={{
                     marginTop: 5
                   }}
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                 >
                   {strings.checkNewVersion()}
                 </Paragraph>
               </>
             ) : (
-              <Paragraph size={SIZE.md}>{strings.noUpdates()}</Paragraph>
+              <Paragraph size={AppFontSize.md}>{strings.noUpdates()}</Paragraph>
             )}
           </View>
         </>
@@ -161,7 +161,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
               width: "100%"
             }}
           >
-            <Heading size={SIZE.md}>{strings.releaseNotes()}:</Heading>
+            <Heading size={AppFontSize.md}>{strings.releaseNotes()}:</Heading>
 
             {version.body ? (
               <Paragraph
diff --git a/apps/mobile/app/components/sheets/user/index.tsx b/apps/mobile/app/components/sheets/user/index.tsx
index 686139dc3..26ac215c0 100644
--- a/apps/mobile/app/components/sheets/user/index.tsx
+++ b/apps/mobile/app/components/sheets/user/index.tsx
@@ -27,14 +27,16 @@ import useSyncProgress from "../../../hooks/use-sync-progress";
 import { presentSheet } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { SyncStatus, useUserStore } from "../../../stores/use-user-store";
-import { SIZE } from "../../../utils/size";
+import { getObfuscatedEmail } from "../../../utils/functions";
+import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
+import { AuthMode } from "../../auth/common";
 import { Card } from "../../list/card";
 import AppIcon from "../../ui/AppIcon";
-import { Button } from "../../ui/button";
 import { Pressable } from "../../ui/pressable";
 import { TimeSince } from "../../ui/time-since";
 import Paragraph from "../../ui/typography/paragraph";
+import Sync from "../../../services/sync";
 
 export const UserSheet = () => {
   const ref = useSheetRef();
@@ -58,7 +60,6 @@ export const UserSheet = () => {
       style={{
         width: "100%",
         justifyContent: "center",
-        paddingHorizontal: DefaultAppStyles.GAP,
         gap: DefaultAppStyles.GAP
       }}
     >
@@ -66,19 +67,23 @@ export const UserSheet = () => {
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center"
+            alignItems: "center",
+            paddingHorizontal: DefaultAppStyles.GAP,
+            gap: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <Image
-            source={{
-              uri: userProfile?.profilePicture
-            }}
-            style={{
-              width: 40,
-              height: 40,
-              borderRadius: 10
-            }}
-          />
+          {userProfile?.profilePicture ? (
+            <Image
+              source={{
+                uri: userProfile?.profilePicture
+              }}
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: 10
+              }}
+            />
+          ) : null}
 
           <View
             style={{
@@ -87,27 +92,17 @@ export const UserSheet = () => {
               justifyContent: "space-between"
             }}
           >
-            <View style={{ marginLeft: 10 }}>
-              <Paragraph size={SIZE.xs}>{userProfile?.fullName}</Paragraph>
+            <View>
+              <Paragraph size={AppFontSize.xs}>
+                {userProfile?.fullName || getObfuscatedEmail(user.email)}
+              </Paragraph>
               <Paragraph
                 style={{
                   flexWrap: "wrap"
                 }}
-                size={SIZE.xxs}
+                size={AppFontSize.xxs}
                 color={colors.secondary.heading}
               >
-                <AppIcon
-                  name="checkbox-blank-circle"
-                  size={10}
-                  allowFontScaling
-                  color={
-                    !user || lastSyncStatus === SyncStatus.Failed
-                      ? colors.error.icon
-                      : isOffline
-                      ? colors.static.orange
-                      : colors.success.icon
-                  }
-                />{" "}
                 {!user ? (
                   strings.notLoggedIn()
                 ) : lastSynced && lastSynced !== "Never" ? (
@@ -122,7 +117,7 @@ export const UserSheet = () => {
                     {!syncing ? (
                       <TimeSince
                         style={{
-                          fontSize: SIZE.xxs,
+                          fontSize: AppFontSize.xxs,
                           color: colors.secondary.paragraph
                         }}
                         updateFrequency={30 * 1000}
@@ -133,13 +128,25 @@ export const UserSheet = () => {
                   </>
                 ) : (
                   strings.never()
-                )}
+                )}{" "}
+                <AppIcon
+                  name="checkbox-blank-circle"
+                  size={10}
+                  allowFontScaling
+                  color={
+                    !user || lastSyncStatus === SyncStatus.Failed
+                      ? colors.error.icon
+                      : isOffline
+                      ? colors.static.orange
+                      : colors.success.icon
+                  }
+                />
               </Paragraph>
             </View>
             {syncing ? (
               <ActivityIndicator
                 color={colors.primary.accent}
-                size={SIZE.xxl}
+                size={AppFontSize.xxl}
               />
             ) : null}
           </View>
@@ -150,11 +157,24 @@ export const UserSheet = () => {
             width: "100%"
           }}
         >
-          <Card />
+          <Card
+            customMessage={{
+              visible: true,
+              message: strings.notLoggedIn(),
+              actionText: strings.loginMessageActionText(),
+              icon: "account-outline",
+              onPress: () => {
+                ref.current?.hide();
+                Navigation.navigate("Auth", {
+                  mode: AuthMode.login
+                });
+              }
+            }}
+          />
         </View>
       )}
 
-      {user ? (
+      {/* {user ? (
         <View
           style={{
             paddingVertical: DefaultAppStyles.GAP_SMALL,
@@ -176,8 +196,10 @@ export const UserSheet = () => {
                 justifyContent: "space-between"
               }}
             >
-              <Paragraph size={SIZE.xxs}>{strings.storage()}</Paragraph>
-              <Paragraph size={SIZE.xxs}>50/100MB {strings.used()}</Paragraph>
+              <Paragraph size={AppFontSize.xxs}>{strings.storage()}</Paragraph>
+              <Paragraph size={AppFontSize.xxs}>
+                50/100MB {strings.used()}
+              </Paragraph>
             </View>
             <View
               style={{
@@ -209,10 +231,13 @@ export const UserSheet = () => {
             }}
           >
             <View>
-              <Paragraph size={SIZE.sm}>{strings.freePlan()}</Paragraph>
-              <Paragraph color={colors.secondary.paragraph} size={SIZE.xxxs}>
+              <Paragraph size={AppFontSize.sm}>{strings.freePlan()}</Paragraph>
+              <Paragraph
+                color={colors.secondary.paragraph}
+                size={AppFontSize.xxxs}
+              >
                 {strings.viewAllLimits()}
-                <AppIcon name="information" size={SIZE.xxxs} />
+                <AppIcon name="information" size={AppFontSize.xxxs} />
               </Paragraph>
             </View>
 
@@ -220,7 +245,7 @@ export const UserSheet = () => {
               title={strings.upgradeNow()}
               onPress={() => {}}
               type="accent"
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               style={{
                 paddingHorizontal: DefaultAppStyles.GAP_SMALL,
                 height: "auto",
@@ -229,7 +254,8 @@ export const UserSheet = () => {
             />
           </View>
         </View>
-      ) : null}
+      ) : null} */}
+
       <View
         style={{
           borderBottomWidth: 1,
@@ -245,9 +271,11 @@ export const UserSheet = () => {
       >
         {[
           {
-            icon: "account-outline",
-            title: strings.editProfile(),
-            onPress: () => {},
+            icon: "reload",
+            title: strings.syncNow(),
+            onPress: () => {
+              Sync.run();
+            },
             hidden: !user
           },
           {
@@ -255,7 +283,6 @@ export const UserSheet = () => {
             title: strings.settings(),
             onPress: () => {
               ref.current?.hide();
-              Navigation.closeDrawer();
               Navigation.navigate("Settings");
             }
           },
@@ -277,7 +304,7 @@ export const UserSheet = () => {
                 flexDirection: "row",
                 justifyContent: "flex-start",
                 gap: DefaultAppStyles.GAP_SMALL,
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
+                paddingHorizontal: DefaultAppStyles.GAP
               }}
               onPress={() => {
                 item.onPress();
@@ -286,7 +313,7 @@ export const UserSheet = () => {
               <AppIcon
                 color={colors.secondary.icon}
                 name={item.icon}
-                size={SIZE.xl}
+                size={AppFontSize.xl}
               />
               <Paragraph>{item.title}</Paragraph>
             </Pressable>
diff --git a/apps/mobile/app/components/side-menu/index.tsx b/apps/mobile/app/components/side-menu/index.tsx
index f23d67462..5c8e93df7 100644
--- a/apps/mobile/app/components/side-menu/index.tsx
+++ b/apps/mobile/app/components/side-menu/index.tsx
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import {
   NavigationState,
@@ -31,13 +31,17 @@ import {
 } from "react-native-tab-view";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
+import { useGroupOptions } from "../../hooks/use-group-options";
+import { presentSheet, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
-import { useUserStore } from "../../stores/use-user-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { deleteItems } from "../../utils/functions";
-import { rootNavigatorRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import { AddNotebookSheet } from "../sheets/add-notebook";
 import { MoveNotebookSheet } from "../sheets/move-notebook";
+import Sort from "../sheets/sort";
+import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHome } from "./side-menu-home";
@@ -47,6 +51,9 @@ import {
   useSideMenuNotebookSelectionStore,
   useSideMenuTagsSelectionStore
 } from "./stores";
+import { presentDialog } from "../dialog/functions";
+import { strings } from "@notesnook/intl";
+import { useTagStore } from "../../stores/use-tag-store";
 const renderScene = SceneMap({
   home: SideMenuHome,
   notebooks: SideMenuNotebooks,
@@ -70,10 +77,6 @@ export const SideMenu = React.memo(
       {
         key: "tags",
         title: "Tags"
-      },
-      {
-        key: "settings",
-        title: "Settings"
       }
     ]);
 
@@ -92,6 +95,7 @@ export const SideMenu = React.memo(
           onIndexChange={setIndex}
           swipeEnabled={false}
           animationEnabled={false}
+          lazy={true}
         />
       </SafeAreaView>
     );
@@ -99,78 +103,16 @@ export const SideMenu = React.memo(
   () => true
 );
 
-const SettingsIcon = (props: {
-  route: Route;
-  isFocused: boolean;
-  jumpTo: (routeName: string) => void;
-}) => {
-  const { colors } = useThemeColors();
-  const userProfile = useUserStore((state) => state.profile);
-  const user = useUserStore((state) => state.user);
-
-  return (
-    <Pressable
-      key={props.route.key}
-      onPress={() => {
-        rootNavigatorRef.navigate("Settings");
-        // if (!user) {
-        //   rootNavigatorRef.navigate("Settings");
-        //   return;
-        // }
-        // UserSheet.present();
-      }}
-      style={{
-        borderRadius: 10,
-        paddingVertical: 2,
-        width: "25%"
-      }}
-      type={props.isFocused ? "selected" : "plain"}
-    >
-      {userProfile?.profilePicture ? (
-        <Image
-          source={{
-            uri: userProfile?.profilePicture
-          }}
-          style={{
-            width: SIZE.lg,
-            height: SIZE.lg,
-            borderRadius: 100
-          }}
-        />
-      ) : (
-        <Icon
-          name="cog-outline"
-          color={props.isFocused ? colors.primary.accent : colors.primary.icon}
-          size={SIZE.lg}
-        />
-      )}
-
-      <Paragraph
-        color={
-          props.isFocused
-            ? colors.primary.paragraph
-            : colors.secondary.paragraph
-        }
-        style={{
-          opacity: props.isFocused ? 1 : 0.6
-        }}
-        size={SIZE.xxxs - 1}
-      >
-        {userProfile?.fullName
-          ? userProfile.fullName.split(" ")[0]
-          : props.route.title}
-      </Paragraph>
-    </Pressable>
-  );
-};
-
 const TabBar = (
   props: SceneRendererProps & {
     navigationState: NavigationState<Route>;
     options: Record<string, TabDescriptor<Route>> | undefined;
   }
 ) => {
-  const { colors } = useThemeColors();
+  const { colors, isDark } = useThemeColors();
+  const groupOptions = useGroupOptions(
+    props.navigationState.index === 1 ? "notebook" : "tags"
+  );
   const notebookSelectionEnabled = useSideMenuNotebookSelectionStore(
     (state) => state.enabled
   );
@@ -183,8 +125,6 @@ const TabBar = (
     switch (key) {
       case "home":
         return "home-outline";
-      case "settings":
-        return "cog-outline";
       case "notebooks":
         return "book-outline";
       case "tags":
@@ -202,7 +142,9 @@ const TabBar = (
         justifyContent: "space-between",
         backgroundColor: colors.primary.background,
         paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_SMALL
+        paddingVertical: DefaultAppStyles.GAP_SMALL,
+        borderTopWidth: 1,
+        borderTopColor: colors.primary.border
       }}
     >
       {isSelectionEnabled ? (
@@ -287,11 +229,11 @@ const TabBar = (
                 <Icon
                   name={item.icon}
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={SIZE.xxxs - 1}
+                  size={AppFontSize.xxxs - 1}
                 >
                   {item.title}
                 </Paragraph>
@@ -301,65 +243,159 @@ const TabBar = (
         </>
       ) : (
         <>
-          {props.navigationState.routes.map((route, index) => {
-            const isFocused = props.navigationState.index === index;
+          <View
+            style={{
+              flexDirection: "row",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            {props.navigationState.routes.map((route, index) => {
+              const isFocused = props.navigationState.index === index;
 
-            return route.key === "settings" ? (
-              <SettingsIcon
-                isFocused={isFocused}
-                jumpTo={props.jumpTo}
-                route={route}
-              />
-            ) : (
-              <Pressable
-                key={route.key}
-                onPress={() => {
-                  props.jumpTo(route.key);
-                  switch (route.key) {
-                    case "notebooks":
-                      Navigation.routeNeedsUpdate(
-                        "Notebooks",
-                        Navigation.routeUpdateFunctions.Notebooks
-                      );
-                      break;
-                    case "tags":
-                      Navigation.routeNeedsUpdate(
-                        "Tags",
-                        Navigation.routeUpdateFunctions.Tags
-                      );
-                      break;
-                    default:
-                      break;
+              return (
+                <Pressable
+                  key={route.key}
+                  onPress={() => {
+                    props.jumpTo(route.key);
+                    switch (route.key) {
+                      case "notebooks":
+                        Navigation.routeNeedsUpdate(
+                          "Notebooks",
+                          Navigation.routeUpdateFunctions.Notebooks
+                        );
+                        break;
+                      case "tags":
+                        Navigation.routeNeedsUpdate(
+                          "Tags",
+                          Navigation.routeUpdateFunctions.Tags
+                        );
+                        break;
+                      default:
+                        break;
+                    }
+                  }}
+                  style={{
+                    borderRadius: 10,
+                    opacity: isFocused ? 1 : 0.6,
+                    paddingVertical: 2,
+                    width: 40,
+                    height: 40
+                  }}
+                  type={isFocused ? "selected" : "plain"}
+                >
+                  <Icon
+                    name={getIcon(route.key)}
+                    color={
+                      isFocused ? colors.primary.accent : colors.primary.icon
+                    }
+                    size={AppFontSize.lg}
+                  />
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            {props.navigationState.index > 0 ? (
+              <>
+                <IconButton
+                  name="plus"
+                  size={AppFontSize.lg - 2}
+                  onPress={() => {
+                    if (props.navigationState.index === 1) {
+                      AddNotebookSheet.present();
+                    } else {
+                      presentDialog({
+                        title: strings.addTag(),
+                        paragraph: strings.addTagDesc(),
+                        input: true,
+                        positiveText: "Add",
+                        positivePress: async (tag) => {
+                          if (tag) {
+                            await db.tags.add({
+                              title: tag
+                            });
+                            useTagStore.getState().refresh();
+                            return true;
+                          }
+                          ToastManager.show({
+                            context: "local",
+                            type: "error",
+                            message: strings.allFieldsRequired()
+                          });
+                          return false;
+                        }
+                      });
+                    }
+                  }}
+                  style={{
+                    width: 35,
+                    height: 35
+                  }}
+                />
+
+                <IconButton
+                  name={
+                    groupOptions.sortDirection === "asc"
+                      ? "sort-ascending"
+                      : "sort-descending"
                   }
+                  color={colors.secondary.icon}
+                  onPress={() => {
+                    presentSheet({
+                      component: (
+                        <Sort
+                          type={
+                            props.navigationState.index === 1
+                              ? "notebook"
+                              : "tag"
+                          }
+                          hideGroupOptions
+                        />
+                      )
+                    });
+                  }}
+                  style={{
+                    width: 35,
+                    height: 35
+                  }}
+                  size={AppFontSize.lg - 2}
+                />
+
+                {/* <IconButton
+                  name="magnify"
+                  color={colors.secondary.icon}
+                  onPress={() => {}}
+                  style={{
+                    width: 35,
+                    height: 35
+                  }}
+                  size={SIZE.lg - 2}
+                /> */}
+              </>
+            ) : null}
+
+            {props.navigationState.index === 0 ? (
+              <IconButton
+                onPress={() => {
+                  useThemeStore.getState().setColorScheme();
                 }}
                 style={{
-                  borderRadius: 10,
-                  opacity: isFocused ? 1 : 0.6,
-                  paddingVertical: 2,
-                  width: "25%"
+                  width: 28,
+                  height: 28
                 }}
-                type={isFocused ? "selected" : "plain"}
-              >
-                <Icon
-                  name={getIcon(route.key)}
-                  color={
-                    isFocused ? colors.primary.accent : colors.primary.icon
-                  }
-                  size={SIZE.lg}
-                />
-                <Paragraph
-                  color={
-                    isFocused
-                      ? colors.primary.paragraph
-                      : colors.secondary.paragraph
-                  }
-                  size={SIZE.xxxs - 1}
-                >
-                  {route.title}
-                </Paragraph>
-              </Pressable>
-            );
-          })}
+                color={colors.primary.icon}
+                name={isDark ? "weather-night" : "weather-sunny"}
+                size={AppFontSize.lg - 2}
+              />
+            ) : null}
+          </View>
         </>
       )}
     </View>
diff --git a/apps/mobile/app/components/side-menu/menu-item.tsx b/apps/mobile/app/components/side-menu/menu-item.tsx
index 2590b927c..752e24a6a 100644
--- a/apps/mobile/app/components/side-menu/menu-item.tsx
+++ b/apps/mobile/app/components/side-menu/menu-item.tsx
@@ -31,7 +31,7 @@ import useNavigationStore, {
 import { useNoteStore } from "../../stores/use-notes-store";
 import { useTrashStore } from "../../stores/use-trash-store";
 import { SideMenuItem } from "../../utils/menu-items";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
@@ -138,13 +138,16 @@ function _MenuItem({
       style={{
         width: "100%",
         alignSelf: "center",
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         flexDirection: "row",
         paddingHorizontal: DefaultAppStyles.GAP_SMALL,
         justifyContent: "space-between",
         alignItems: "center",
         paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
+      onLayout={(e) => {
+        console.log(e.nativeEvent.layout);
+      }}
     >
       <View
         style={{
@@ -154,7 +157,7 @@ function _MenuItem({
         }}
       >
         {renderIcon ? (
-          renderIcon(item, SIZE.md)
+          renderIcon(item, AppFontSize.md)
         ) : (
           <Icon
             style={{
@@ -170,7 +173,7 @@ function _MenuItem({
                 ? colors.selected.paragraph
                 : colors.secondary.icon
             }
-            size={SIZE.md}
+            size={AppFontSize.md}
           />
         )}
 
@@ -178,7 +181,7 @@ function _MenuItem({
           color={
             isFocused ? colors.primary.paragraph : colors.secondary.paragraph
           }
-          size={SIZE.sm}
+          size={AppFontSize.sm}
         >
           {item.title}
         </Paragraph>
@@ -186,7 +189,7 @@ function _MenuItem({
 
       {menuItemCount > 0 ? (
         <Paragraph
-          size={SIZE.xxs}
+          size={AppFontSize.xxs}
           color={
             isFocused ? colors.primary.paragraph : colors.secondary.paragraph
           }
diff --git a/apps/mobile/app/components/side-menu/side-menu-header.tsx b/apps/mobile/app/components/side-menu/side-menu-header.tsx
index 316b5c36b..45cc00fec 100644
--- a/apps/mobile/app/components/side-menu/side-menu-header.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-header.tsx
@@ -18,14 +18,66 @@ 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 { useThemeStore } from "../../stores/use-theme-store";
-import { SIZE } from "../../utils/size";
+import { Image, View } from "react-native";
+import { NOTESNOOK_LOGO_SVG } from "../../assets/images/assets";
+import { useUserStore } from "../../stores/use-user-store";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import { UserSheet } from "../sheets/user";
+import AppIcon from "../ui/AppIcon";
 import { IconButton, IconButtonProps } from "../ui/icon-button";
+import { Pressable } from "../ui/pressable";
 import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 
+const SettingsIcon = () => {
+  const { colors } = useThemeColors();
+  const userProfile = useUserStore((state) => state.profile);
+
+  return (
+    <Pressable
+      onPress={() => {
+        UserSheet.present();
+      }}
+      style={{
+        width: 40,
+        height: 40
+      }}
+    >
+      {userProfile?.profilePicture ? (
+        <Image
+          source={{
+            uri: userProfile?.profilePicture
+          }}
+          style={{
+            width: 25,
+            height: 25,
+            borderRadius: 100
+          }}
+        />
+      ) : (
+        <AppIcon
+          name="cog-outline"
+          color={colors.primary.icon}
+          size={AppFontSize.lg}
+        />
+      )}
+
+      {/* <Paragraph
+        color={colors.secondary.paragraph}
+        style={{
+          opacity: 1
+        }}
+        size={SIZE.xxxs - 1}
+      >
+        {userProfile?.fullName
+          ? userProfile.fullName.split(" ")[0]
+          : strings.settings()}
+      </Paragraph> */}
+    </Pressable>
+  );
+};
+
 export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
   const { colors, isDark } = useThemeColors();
   return (
@@ -34,7 +86,10 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: DefaultAppStyles.GAP
+        borderBottomWidth: 1,
+        borderBottomColor: colors.primary.border,
+        paddingBottom: DefaultAppStyles.GAP,
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
@@ -52,26 +107,10 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
             borderRadius: 10
           }}
         >
-          <SvgView
-            width={28}
-            height={28}
-            src={`<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_24_33)">
-<path d="M1024 0H0V1024H1024V0Z" fill="black"/>
-<path d="M724.985 682.919C707.73 733.33 673.15 775.984 627.397 803.291C581.645 830.598 527.687 840.787 475.128 832.044C422.568 823.301 374.814 796.194 340.365 755.546C305.916 714.898 287.006 663.347 287 610.064V499.814L366.121 532.867V610.019C366.114 630.798 370.555 651.337 379.145 670.256C387.735 689.176 400.276 706.037 415.925 719.707C418.895 722.294 421.978 724.814 425.161 727.166C448.518 744.554 476.563 754.518 505.655 755.763C506.645 755.763 507.601 755.842 508.58 755.864C509.559 755.887 510.83 755.864 511.955 755.864C513.08 755.864 514.205 755.864 515.33 755.864C516.455 755.864 517.265 755.864 518.255 755.763C547.336 754.515 575.371 744.56 598.726 727.188C601.899 724.837 604.981 722.328 607.963 719.741C628.519 701.761 643.619 678.375 651.545 652.241L724.985 682.919Z" fill="white"/>
-<path d="M737 414V610.065C737 612.596 737 615.139 736.842 617.67L657.879 584.651V414C657.866 376.316 643.272 340.099 617.154 312.934C591.035 285.77 555.419 269.766 517.765 268.274C480.11 266.782 443.339 279.918 415.154 304.931C386.968 329.944 369.554 364.893 366.56 402.457C366.279 406.26 366.121 410.119 366.121 414V462.712L287 429.637V189H512C571.674 189 628.903 212.705 671.099 254.901C713.295 297.097 737 354.326 737 414Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_24_33">
-<rect width="1024" height="1024" rx="200" fill="white"/>
-</clipPath>
-</defs>
-</svg>
-`}
-          />
+          <SvgView width={28} height={28} src={NOTESNOOK_LOGO_SVG} />
         </View>
 
-        <Heading size={SIZE.lg}>Notesnook</Heading>
+        <Heading size={AppFontSize.lg}>Notesnook</Heading>
       </View>
 
       <View
@@ -90,22 +129,11 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
               height: 28
             }}
             color={colors.primary.icon}
-            size={SIZE.lg}
+            size={AppFontSize.lg}
           />
         ))}
 
-        <IconButton
-          onPress={() => {
-            useThemeStore.getState().setColorScheme();
-          }}
-          style={{
-            width: 28,
-            height: 28
-          }}
-          color={colors.primary.icon}
-          name={isDark ? "weather-night" : "weather-sunny"}
-          size={SIZE.lg}
-        />
+        <SettingsIcon />
       </View>
     </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 10c3eab4f..48566aa15 100644
--- a/apps/mobile/app/components/side-menu/side-menu-home.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-home.tsx
@@ -22,7 +22,6 @@ import React from "react";
 import { View } from "react-native";
 import { DraxProvider, DraxScrollView } from "react-native-drax";
 import { db } from "../../common/database";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { MenuItemsList } from "../../utils/menu-items";
@@ -51,15 +50,19 @@ export function SideMenuHome() {
         width: "100%",
         paddingTop: DefaultAppStyles.GAP_SMALL,
         backgroundColor: colors.primary.background,
-        gap: DefaultAppStyles.GAP,
-        paddingHorizontal: DefaultAppStyles.GAP
+        gap: DefaultAppStyles.GAP
       }}
     >
       <SideMenuHeader />
 
       {!isAppLoading && introCompleted ? (
         <DraxProvider>
-          <DraxScrollView nestedScrollEnabled={false}>
+          <DraxScrollView
+            nestedScrollEnabled={false}
+            style={{
+              paddingHorizontal: DefaultAppStyles.GAP
+            }}
+          >
             <ReorderableList
               onListOrderChanged={(data) => {
                 db.settings.setSideBarOrder("routes", data);
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
new file mode 100644
index 000000000..e8184ed75
--- /dev/null
+++ b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
@@ -0,0 +1,61 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+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 from "react";
+import { View } from "react-native";
+import { SideMenuHeader } from "./side-menu-header";
+import Paragraph from "../ui/typography/paragraph";
+import { AppFontSize } from "../../utils/size";
+import { useThemeColors } from "@notesnook/theme";
+import { DefaultAppStyles } from "../../utils/styles";
+
+type SideMenuListEmptyProps = {
+  placeholder: string;
+};
+
+export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
+  const { colors } = useThemeColors();
+  return (
+    <View
+      style={{
+        width: "100%",
+        height: "100%"
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: colors.primary.background,
+          paddingTop: DefaultAppStyles.GAP_SMALL
+        }}
+      >
+        <SideMenuHeader />
+      </View>
+      <View
+        style={{
+          alignItems: "center",
+          justifyContent: "center",
+          flexGrow: 1
+        }}
+      >
+        <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 2850782de..d33926d22 100644
--- a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
@@ -18,32 +18,33 @@ 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 { FlatList, ListRenderItemInfo, View } from "react-native";
+import { FlatList, TextInput, View } from "react-native";
 import { UseBoundStore } from "zustand";
 import { db } from "../../common/database";
 import { useTotalNotes } from "../../hooks/use-db-item";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import NotebookScreen from "../../screens/notebook";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import { TreeItem } from "../../stores/create-notebook-tree-stores";
 import { SelectionStore } from "../../stores/item-selection-store";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useNotebooks } from "../../stores/use-notebook-store";
 import { eOnNotebookUpdated } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Properties } from "../properties";
-import { AddNotebookSheet } from "../sheets/add-notebook";
 import AppIcon from "../ui/AppIcon";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { SideMenuHeader } from "./side-menu-header";
+import { SideMenuListEmpty } from "./side-menu-list-empty";
 import {
   useSideMenuNotebookExpandedStore,
   useSideMenuNotebookSelectionStore,
@@ -229,7 +230,7 @@ const NotebookItem = ({
           width: "100%",
           alignItems: "center",
           flexDirection: "row",
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           paddingRight: DefaultAppStyles.GAP_SMALL
         }}
       >
@@ -240,10 +241,12 @@ const NotebookItem = ({
           }}
         >
           <IconButton
-            size={SIZE.md}
+            size={AppFontSize.md}
             color={selected ? colors.selected.icon : colors.primary.icon}
             onPress={() => {
-              onToggleExpanded?.();
+              if (item.hasChildren) {
+                onToggleExpanded?.();
+              }
             }}
             top={0}
             left={0}
@@ -252,16 +255,22 @@ const NotebookItem = ({
             style={{
               width: 32,
               height: 32,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
-            name={expanded ? "chevron-down" : "chevron-right"}
+            name={
+              !item.hasChildren
+                ? "book-outline"
+                : expanded
+                ? "chevron-down"
+                : "chevron-right"
+            }
           />
 
           <Paragraph
             color={
               isFocused ? colors.selected.paragraph : colors.secondary.paragraph
             }
-            size={SIZE.xs}
+            size={AppFontSize.sm}
           >
             {notebook?.title}
           </Paragraph>
@@ -290,7 +299,10 @@ const NotebookItem = ({
         ) : (
           <>
             {totalNotes(notebook?.id) ? (
-              <Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
+              <Paragraph
+                size={AppFontSize.xxs}
+                color={colors.secondary.paragraph}
+              >
                 {totalNotes?.(notebook?.id)}
               </Paragraph>
             ) : null}
@@ -304,17 +316,36 @@ const NotebookItem = ({
 export const SideMenuNotebooks = () => {
   const tree = useSideMenuNotebookTreeStore((state) => state.tree);
   const [notebooks, loading] = useNotebooks();
-  const insets = useGlobalSafeAreaInsets();
-
+  const { colors } = useThemeColors();
+  const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
+  const searchTimer = React.useRef<NodeJS.Timeout>();
+  const lastQuery = React.useRef<string>();
   const loadRootNotebooks = React.useCallback(async () => {
-    if (!notebooks) return;
+    if (!filteredNotebooks) return;
     const _notebooks: Notebook[] = [];
-    for (let i = 0; i < notebooks.placeholders.length; i++) {
-      _notebooks[i] = (await notebooks?.item(i))?.item as Notebook;
+    for (let i = 0; i < filteredNotebooks.placeholders.length; i++) {
+      _notebooks[i] = (await filteredNotebooks?.item(i))?.item as Notebook;
     }
     useSideMenuNotebookTreeStore.getState().addNotebooks("root", _notebooks, 0);
+  }, [filteredNotebooks]);
+
+  const updateNotebooks = React.useCallback(() => {
+    if (lastQuery.current) {
+      db.lookup
+        .notebooks(lastQuery.current)
+        .sorted()
+        .then((filtered) => {
+          setFilteredNotebooks(filtered);
+        });
+    } else {
+      setFilteredNotebooks(notebooks);
+    }
   }, [notebooks]);
 
+  useEffect(() => {
+    updateNotebooks();
+  }, [updateNotebooks]);
+
   useEffect(() => {
     (async () => {
       if (!loading) {
@@ -352,34 +383,71 @@ export const SideMenuNotebooks = () => {
     });
   }, []);
 
-  const renderItem = React.useCallback((info: ListRenderItemInfo<TreeItem>) => {
-    return <NotebookItemWrapper index={info.index} item={info.item} />;
-  }, []);
+  const renderItem = React.useCallback(
+    (info: { item: TreeItem; index: number }) => {
+      return <NotebookItemWrapper index={info.index} item={info.item} />;
+    },
+    []
+  );
 
   return (
-    <FlatList
+    <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingTop: DefaultAppStyles.GAP_SMALL
+        height: "100%"
       }}
-      data={tree}
-      keyExtractor={(item) => item.notebook.id}
-      windowSize={3}
-      ListHeaderComponent={
-        <SideMenuHeader
-          rightButtons={[
-            {
-              name: "plus",
-              onPress: () => {
-                AddNotebookSheet.present();
-              }
-            }
-          ]}
+    >
+      {!notebooks || notebooks.placeholders.length === 0 ? (
+        <SideMenuListEmpty
+          placeholder={strings.emptyPlaceholders("notebook")}
         />
-      }
-      stickyHeaderIndices={[0]}
-      renderItem={renderItem}
-    />
+      ) : (
+        <>
+          <FlatList
+            data={tree}
+            bounces={false}
+            bouncesZoom={false}
+            overScrollMode="never"
+            ListHeaderComponent={
+              <View
+                style={{
+                  backgroundColor: colors.primary.background,
+                  paddingTop: DefaultAppStyles.GAP_SMALL
+                }}
+              >
+                <SideMenuHeader />
+              </View>
+            }
+            renderItem={renderItem}
+          />
+          <View
+            style={{
+              width: "100%",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              backgroundColor: colors.primary.background,
+              borderTopColor: colors.primary.border,
+              borderTopWidth: 1
+            }}
+          >
+            <TextInput
+              placeholder="Filter notebooks..."
+              style={{
+                fontFamily: "Inter-Regular",
+                fontSize: AppFontSize.xs
+              }}
+              cursorColor={colors.primary.accent}
+              onChangeText={async (value) => {
+                searchTimer.current && clearTimeout(searchTimer.current);
+                searchTimer.current = setTimeout(async () => {
+                  lastQuery.current = value;
+                  updateNotebooks();
+                }, 500);
+              }}
+              placeholderTextColor={colors.primary.placeholder}
+            />
+          </View>
+        </>
+      )}
+    </View>
   );
 };
 
@@ -390,6 +458,7 @@ const NotebookItemWrapper = ({
   item: TreeItem;
   index: number;
 }) => {
+  const { colors } = useThemeColors();
   const expanded = useSideMenuNotebookExpandedStore(
     (state) => state.expanded[item.notebook.id]
   );
@@ -425,26 +494,34 @@ const NotebookItemWrapper = ({
   }, [item.notebook.id]);
 
   return (
-    <NotebookItem
-      item={item}
-      index={index}
-      expanded={expanded}
-      onToggleExpanded={() => {
-        useSideMenuNotebookExpandedStore
-          .getState()
-          .setExpanded(item.notebook.id);
+    <View
+      style={{
+        paddingHorizontal: DefaultAppStyles.GAP,
+        marginTop: index === 0 ? DefaultAppStyles.GAP : 0
       }}
-      selected={selected}
-      selectionEnabled={selectionEnabled}
-      selectionStore={useSideMenuNotebookSelectionStore}
-      onItemUpdate={onItemUpdate}
-      focused={focused}
-      onPress={() => {
-        NotebookScreen.navigate(item.notebook, false);
-      }}
-      onLongPress={() => {
-        Properties.present(item.notebook, false);
-      }}
-    />
+    >
+      <NotebookItem
+        item={item}
+        index={index}
+        expanded={expanded}
+        onToggleExpanded={() => {
+          useSideMenuNotebookExpandedStore
+            .getState()
+            .setExpanded(item.notebook.id);
+        }}
+        selected={selected}
+        selectionEnabled={selectionEnabled}
+        selectionStore={useSideMenuNotebookSelectionStore}
+        onItemUpdate={onItemUpdate}
+        focused={focused}
+        onPress={() => {
+          NotebookScreen.navigate(item.notebook, false);
+          Navigation.closeDrawer();
+        }}
+        onLongPress={() => {
+          Properties.present(item.notebook, false);
+        }}
+      />
+    </View>
   );
 };
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 08dc407d5..f2357dd84 100644
--- a/apps/mobile/app/components/side-menu/side-menu-tags.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
@@ -20,22 +20,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Tag, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { View } from "react-native";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
-import { db } from "../../common/database";
+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 useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { TaggedNotes } from "../../screens/notes/tagged";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useTags } from "../../stores/use-tag-store";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Properties } from "../properties";
 import AppIcon from "../ui/AppIcon";
 import { Pressable } from "../ui/pressable";
 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>;
@@ -60,100 +62,120 @@ const TagItem = (props: {
     }
   }, [item]);
 
-  return item ? (
-    <Pressable
-      type={isSelected || isFocused ? "selected" : "transparent"}
-      onLongPress={() => {
-        Properties.present(item);
-      }}
-      testID={`tag-item-${props.id}`}
-      onPress={() => {
-        if (enabled) {
-          useSideMenuTagsSelectionStore
-            .getState()
-            .markAs(item, isSelected ? "deselected" : "selected");
-          if (
-            useSideMenuTagsSelectionStore.getState().getSelectedItemIds()
-              .length === 0
-          ) {
-            useSideMenuTagsSelectionStore.setState({
-              enabled: false
-            });
-          }
-        } else {
-          TaggedNotes.navigate(item, false);
-        }
-      }}
+  return (
+    <View
       style={{
-        justifyContent: "space-between",
-        width: "100%",
-        alignItems: "center",
-        flexDirection: "row",
-        borderRadius: 5,
-        paddingRight: DefaultAppStyles.GAP_SMALL
+        paddingHorizontal: DefaultAppStyles.GAP,
+        marginTop: (props.id as number) === 0 ? DefaultAppStyles.GAP : 0
       }}
     >
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center"
-        }}
-      >
-        <View
+      {item ? (
+        <Pressable
+          type={isSelected || isFocused ? "selected" : "transparent"}
+          onLongPress={() => {
+            Properties.present(item);
+          }}
+          testID={`tag-item-${props.id}`}
+          onPress={() => {
+            if (enabled) {
+              useSideMenuTagsSelectionStore
+                .getState()
+                .markAs(item, isSelected ? "deselected" : "selected");
+              if (
+                useSideMenuTagsSelectionStore.getState().getSelectedItemIds()
+                  .length === 0
+              ) {
+                useSideMenuTagsSelectionStore.setState({
+                  enabled: false
+                });
+              }
+            } else {
+              TaggedNotes.navigate(item, false);
+              Navigation.closeDrawer();
+            }
+          }}
           style={{
-            width: 32,
-            height: 32,
-            justifyContent: "center",
-            alignItems: "center"
+            justifyContent: "space-between",
+            width: "100%",
+            alignItems: "center",
+            flexDirection: "row",
+            borderRadius: defaultBorderRadius,
+            paddingRight: DefaultAppStyles.GAP_SMALL
           }}
         >
-          <AppIcon
-            size={SIZE.md}
-            color={isFocused ? colors.selected.icon : colors.secondary.icon}
-            name="pound"
-          />
-        </View>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center"
+            }}
+          >
+            <View
+              style={{
+                width: 32,
+                height: 32,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <AppIcon
+                size={AppFontSize.md}
+                color={isFocused ? colors.selected.icon : colors.secondary.icon}
+                name="pound"
+              />
+            </View>
 
-        <Paragraph
-          color={
-            isFocused ? colors.selected.paragraph : colors.secondary.paragraph
-          }
-          size={SIZE.xs}
-        >
-          {item?.title}
-        </Paragraph>
-      </View>
-
-      {enabled ? (
-        <View
-          style={{
-            width: 22,
-            height: 22,
-            justifyContent: "center",
-            alignItems: "center"
-          }}
-        >
-          <AppIcon
-            name={isSelected ? "checkbox-outline" : "checkbox-blank-outline"}
-            color={isSelected ? colors.selected.icon : colors.primary.icon}
-          />
-        </View>
-      ) : (
-        <>
-          {item?.id && totalNotes.totalNotes?.(item?.id) ? (
-            <Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
-              {totalNotes.totalNotes(item?.id)}
+            <Paragraph
+              color={
+                isFocused
+                  ? colors.selected.paragraph
+                  : colors.secondary.paragraph
+              }
+              size={AppFontSize.sm}
+            >
+              {item?.title}
             </Paragraph>
-          ) : null}
-        </>
-      )}
-    </Pressable>
-  ) : null;
+          </View>
+
+          {enabled ? (
+            <View
+              style={{
+                width: 22,
+                height: 22,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <AppIcon
+                name={
+                  isSelected ? "checkbox-outline" : "checkbox-blank-outline"
+                }
+                color={isSelected ? colors.selected.icon : colors.primary.icon}
+              />
+            </View>
+          ) : (
+            <>
+              {item?.id && totalNotes.totalNotes?.(item?.id) ? (
+                <Paragraph
+                  size={AppFontSize.xxs}
+                  color={colors.secondary.paragraph}
+                >
+                  {totalNotes.totalNotes(item?.id)}
+                </Paragraph>
+              ) : null}
+            </>
+          )}
+        </Pressable>
+      ) : null}
+    </View>
+  );
 };
 
 export const SideMenuTags = () => {
   const [tags] = useTags();
-  const insets = useGlobalSafeAreaInsets();
+  const { colors } = useThemeColors();
+  const [filteredTags, setFilteredTags] = React.useState(tags);
+  const searchTimer = React.useRef<NodeJS.Timeout>();
+  const lastQuery = React.useRef<string>();
 
   useEffect(() => {
     useSideMenuTagsSelectionStore.setState({
@@ -180,28 +202,91 @@ export const SideMenuTags = () => {
     });
   }, []);
 
+  const updateTags = React.useCallback(() => {
+    if (lastQuery.current) {
+      console.log("Looking up...", lastQuery.current);
+      db.lookup
+        .tags(lastQuery.current.trim())
+        .sorted()
+        .then(async (filtered) => {
+          setFilteredTags(filtered);
+        });
+    } else {
+      setFilteredTags(tags);
+    }
+  }, [tags]);
+
+  useEffect(() => {
+    updateTags();
+  }, [updateTags]);
+
   const renderItem = React.useCallback(
     (info: { index: number }) => {
-      return <TagItem id={info.index} tags={tags!} />;
+      return <TagItem id={info.index} tags={filteredTags!} />;
     },
-    [tags]
+    [filteredTags]
   );
-
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
         paddingTop: DefaultAppStyles.GAP_SMALL,
         width: "100%",
         height: "100%"
       }}
     >
-      <SideMenuHeader />
-      <FlashList
-        data={tags?.placeholders}
-        estimatedItemSize={32}
-        renderItem={renderItem}
-      />
+      {!tags || tags?.placeholders.length === 0 ? (
+        <SideMenuListEmpty placeholder={strings.emptyPlaceholders("tag")} />
+      ) : (
+        <>
+          <FlashList
+            data={filteredTags?.placeholders}
+            bounces={false}
+            estimatedItemSize={35}
+            bouncesZoom={false}
+            overScrollMode="never"
+            ListHeaderComponent={
+              <View
+                style={{
+                  backgroundColor: colors.primary.background
+                }}
+              >
+                <SideMenuHeader />
+              </View>
+            }
+            renderItem={renderItem}
+          />
+          <View
+            style={{
+              width: "100%",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              backgroundColor: colors.primary.background,
+              borderTopColor: colors.primary.border,
+              borderTopWidth: 1
+            }}
+          >
+            <TextInput
+              placeholder="Filter tags..."
+              style={{
+                fontFamily: "Inter-Regular",
+                fontSize: AppFontSize.xs
+              }}
+              cursorColor={colors.primary.accent}
+              onChangeText={async (value) => {
+                searchTimer.current && clearTimeout(searchTimer.current);
+                searchTimer.current = setTimeout(async () => {
+                  try {
+                    lastQuery.current = value;
+                    updateTags();
+                  } catch (e) {
+                    DatabaseLogger.error(e);
+                  }
+                }, 500);
+              }}
+              placeholderTextColor={colors.primary.placeholder}
+            />
+          </View>
+        </>
+      )}
     </View>
   );
 };
diff --git a/apps/mobile/app/components/side-menu/user-status.js b/apps/mobile/app/components/side-menu/user-status.js
index 4291df027..f89952ba5 100644
--- a/apps/mobile/app/components/side-menu/user-status.js
+++ b/apps/mobile/app/components/side-menu/user-status.js
@@ -25,14 +25,13 @@ import { ActivityIndicator, Image, Platform, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useSyncProgress from "../../hooks/use-sync-progress";
-import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../../stores/use-user-store";
-import { eOpenLoginDialog } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
+import { AuthMode } from "../auth/common";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import { TimeSince } from "../ui/time-since";
@@ -97,7 +96,7 @@ export const UserStatus = () => {
           ) : (
             <Icon
               name="cog-outline"
-              size={SIZE.lg - 2}
+              size={AppFontSize.lg - 2}
               color={colors.secondary.icon}
               style={{
                 paddingLeft: 8
@@ -113,7 +112,7 @@ export const UserStatus = () => {
           >
             <Paragraph
               numberOfLines={1}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
               color={colors.primary.heading}
             >
               {!user || !userProfile?.fullName
@@ -125,7 +124,7 @@ export const UserStatus = () => {
               style={{
                 flexWrap: "wrap"
               }}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.heading}
             >
               {!user ? (
@@ -142,7 +141,7 @@ export const UserStatus = () => {
                   {!syncing ? (
                     <TimeSince
                       style={{
-                        fontSize: SIZE.xs,
+                        fontSize: AppFontSize.xs,
                         color: colors.secondary.paragraph
                       }}
                       time={lastSynced}
@@ -184,7 +183,7 @@ export const UserStatus = () => {
               }}
               name="theme-light-dark"
               color={isDark ? colors.primary.accent : colors.primary.icon}
-              size={SIZE.lg}
+              size={AppFontSize.lg}
               style={{
                 borderRadius: 100,
                 width: 40,
@@ -207,7 +206,9 @@ export const UserStatus = () => {
                   Sync.run();
                 } else {
                   fluidTabsRef.current?.closeDrawer();
-                  eSendEvent(eOpenLoginDialog);
+                  Navigation.navigate("Auth", {
+                    mode: AuthMode.login
+                  });
                 }
               }}
             >
@@ -215,13 +216,13 @@ export const UserStatus = () => {
                 syncing ? (
                   <ActivityIndicator
                     color={colors.primary.accent}
-                    size={SIZE.xl}
+                    size={AppFontSize.xl}
                   />
                 ) : lastSyncStatus === SyncStatus.Failed ? (
                   <Icon
                     color={colors.error.icon}
                     name="sync-alert"
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                     allowFontScaling
                   />
                 ) : (
@@ -229,14 +230,14 @@ export const UserStatus = () => {
                     allowFontScaling
                     color={colors.primary.icon}
                     name="sync"
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                   />
                 )
               ) : (
                 <Icon
                   allowFontScaling
                   color={colors.primary.accent}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                   name="login"
                 />
               )}
diff --git a/apps/mobile/app/components/tip/index.tsx b/apps/mobile/app/components/tip/index.tsx
index 94de94c1c..2a6d77861 100644
--- a/apps/mobile/app/components/tip/index.tsx
+++ b/apps/mobile/app/components/tip/index.tsx
@@ -24,7 +24,7 @@ import { MMKV } from "../../common/database/mmkv";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { TTip } from "../../services/tip-manager";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import Paragraph from "../ui/typography/paragraph";
@@ -70,8 +70,8 @@ export const Tip = ({
         <Button
           title={strings.tip()}
           icon="information"
-          fontSize={SIZE.xs}
-          iconSize={SIZE.xs}
+          fontSize={AppFontSize.xs}
+          iconSize={AppFontSize.xs}
           style={{
             width: undefined,
             height: 22,
@@ -91,8 +91,8 @@ export const Tip = ({
             title={strings.neverShowAgain()}
             type="secondary"
             icon="close"
-            fontSize={SIZE.xs}
-            iconSize={SIZE.xs}
+            fontSize={AppFontSize.xs}
+            iconSize={AppFontSize.xs}
             onPress={() => {
               MMKV.setItem("neverShowSheetTips", "true");
               eSendEvent(eCloseSheet);
@@ -114,7 +114,7 @@ export const Tip = ({
       <Paragraph
         style={textStyle}
         color={colors.primary.paragraph}
-        size={SIZE.md}
+        size={AppFontSize.md}
       >
         {tip.text()}
       </Paragraph>
diff --git a/apps/mobile/app/components/toast/index.tsx b/apps/mobile/app/components/toast/index.tsx
index e0b6bcf6c..a6cf538bc 100644
--- a/apps/mobile/app/components/toast/index.tsx
+++ b/apps/mobile/app/components/toast/index.tsx
@@ -37,7 +37,7 @@ import {
 } from "../../services/event-manager";
 import { getElevationStyle } from "../../utils/elevation";
 import { eHideToast, eShowToast } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -162,7 +162,7 @@ export const Toast = ({ context = "global" }) => {
                 ? "information"
                 : "close"
             }
-            size={isFullToastMessage ? SIZE.xxxl : SIZE.xl}
+            size={isFullToastMessage ? AppFontSize.xxxl : AppFontSize.xl}
             color={
               toastOptions?.icon
                 ? toastOptions?.icon
@@ -185,7 +185,7 @@ export const Toast = ({ context = "global" }) => {
             {isFullToastMessage ? (
               <Heading
                 color={!isDark ? colors.static.black : colors.static.white}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
               >
                 {toastOptions.heading}
               </Heading>
@@ -194,7 +194,7 @@ export const Toast = ({ context = "global" }) => {
             {toastOptions.message || toastOptions.heading ? (
               <Paragraph
                 color={!isDark ? colors.static.black : colors.static.white}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
               >
                 {toastOptions.message || toastOptions.heading}
               </Paragraph>
@@ -205,7 +205,7 @@ export const Toast = ({ context = "global" }) => {
         {toastOptions.func ? (
           <Button
             testID={notesnook.toast.button}
-            fontSize={SIZE.md}
+            fontSize={AppFontSize.md}
             type={toastOptions.type === "error" ? "errorShade" : "transparent"}
             onPress={toastOptions.func}
             title={toastOptions.actionText}
diff --git a/apps/mobile/app/components/ui/AppIcon/index.tsx b/apps/mobile/app/components/ui/AppIcon/index.tsx
index 8308e2b19..e07f1e50e 100644
--- a/apps/mobile/app/components/ui/AppIcon/index.tsx
+++ b/apps/mobile/app/components/ui/AppIcon/index.tsx
@@ -20,7 +20,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { ColorValue, TextProps } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 
 export interface IconProps extends TextProps {
   /**
@@ -48,6 +48,10 @@ export interface IconProps extends TextProps {
 export default function AppIcon(props: IconProps) {
   const { colors } = useThemeColors();
   return (
-    <Icon size={SIZE.md} color={colors.primary.icon} {...(props as any)} />
+    <Icon
+      size={AppFontSize.md}
+      color={colors.primary.icon}
+      {...(props as any)}
+    />
   );
 }
diff --git a/apps/mobile/app/components/ui/button/index.tsx b/apps/mobile/app/components/ui/button/index.tsx
index f594c38f6..517303a99 100644
--- a/apps/mobile/app/components/ui/button/index.tsx
+++ b/apps/mobile/app/components/ui/button/index.tsx
@@ -30,7 +30,7 @@ import {
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useUserStore } from "../../../stores/use-user-store";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import NativeTooltip from "../../../utils/tooltip";
 import { ProTag } from "../../premium/pro-tag";
 import { Pressable, PressableProps, useButton } from "../pressable";
@@ -66,9 +66,9 @@ export const Button = ({
   loading = false,
   title = null,
   icon,
-  fontSize = SIZE.sm,
+  fontSize = AppFontSize.sm,
   type = "transparent",
-  iconSize = SIZE.md,
+  iconSize = AppFontSize.md,
   style = {},
   accentColor,
   accentText = "#ffffff",
@@ -127,7 +127,7 @@ export const Button = ({
             ? width * growFactor
             : (width as DimensionValue) || undefined,
         paddingHorizontal: 12,
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         alignSelf: "center",
         justifyContent: "center",
         alignItems: "center",
diff --git a/apps/mobile/app/components/ui/icon-button/index.tsx b/apps/mobile/app/components/ui/icon-button/index.tsx
index 48eb0ae4e..05df2db4f 100644
--- a/apps/mobile/app/components/ui/icon-button/index.tsx
+++ b/apps/mobile/app/components/ui/icon-button/index.tsx
@@ -22,7 +22,7 @@ import React from "react";
 import { ColorValue, GestureResponderEvent, TextStyle } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { RGB_Linear_Shade, hexToRGBA } from "../../../utils/colors";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import NativeTooltip from "../../../utils/tooltip";
 import { Pressable, PressableProps } from "../pressable";
 export interface IconButtonProps extends PressableProps {
@@ -44,7 +44,7 @@ export const IconButton = ({
   name,
   color,
   style,
-  size = SIZE.xxl,
+  size = AppFontSize.xxl,
   iconStyle = {},
   left = 10,
   right = 10,
diff --git a/apps/mobile/app/components/ui/input/index.tsx b/apps/mobile/app/components/ui/input/index.tsx
index 3f396f352..42ffca46a 100644
--- a/apps/mobile/app/components/ui/input/index.tsx
+++ b/apps/mobile/app/components/ui/input/index.tsx
@@ -37,7 +37,7 @@ import {
 } from "../../../services/validation";
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
 import phone from "phone";
@@ -97,7 +97,7 @@ const Input = ({
   onBlurInput,
   onPress,
   height = 45,
-  fontSize = SIZE.md,
+  fontSize = AppFontSize.md,
   onFocusInput,
   buttons,
   marginRight,
@@ -216,7 +216,7 @@ const Input = ({
 
   const style: ViewStyle = {
     borderWidth: 1,
-    borderRadius: 5,
+    borderRadius: defaultBorderRadius,
     borderColor: color,
     flexDirection: "row",
     justifyContent: "space-between",
@@ -318,7 +318,7 @@ const Input = ({
               <IconButton
                 testID={button.testID}
                 name={button.icon}
-                size={SIZE.xl}
+                size={AppFontSize.xl}
                 top={10}
                 bottom={10}
                 onPress={button.onPress}
@@ -357,7 +357,7 @@ const Input = ({
               }}
             >
               <Paragraph
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 style={{
                   textAlign: "right",
                   textAlignVertical: "bottom"
@@ -365,7 +365,7 @@ const Input = ({
               >
                 <Icon
                   name="alert-circle-outline"
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   color={colors.error.icon}
                 />{" "}
                 {errorMessage}
@@ -398,7 +398,7 @@ const Input = ({
                     color={errorList[error as ErrorKey] ? "red" : "green"}
                   />
 
-                  <Paragraph style={{ marginLeft: 5 }} size={SIZE.xs}>
+                  <Paragraph style={{ marginLeft: 5 }} size={AppFontSize.xs}>
                     {ERRORS_LIST[error as ErrorKey]}
                   </Paragraph>
                 </View>
diff --git a/apps/mobile/app/components/ui/notice/index.tsx b/apps/mobile/app/components/ui/notice/index.tsx
index 492100856..99150e0d5 100644
--- a/apps/mobile/app/components/ui/notice/index.tsx
+++ b/apps/mobile/app/components/ui/notice/index.tsx
@@ -21,7 +21,7 @@ import React from "react";
 import { getContainerBorder } from "../../../utils/colors";
 import { View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
 
@@ -56,7 +56,7 @@ export const Notice = ({
       }}
     >
       <IconButton
-        size={isSmall ? SIZE.lg + 1 : SIZE.xxl}
+        size={isSmall ? AppFontSize.lg + 1 : AppFontSize.xxl}
         name={type}
         style={{
           width: isSmall ? undefined : 40,
@@ -71,7 +71,7 @@ export const Notice = ({
           flexShrink: 1
         }}
         selectable={selectable}
-        size={isSmall ? SIZE.xs : SIZE.sm}
+        size={isSmall ? AppFontSize.xs : AppFontSize.sm}
       >
         {text}
       </Paragraph>
diff --git a/apps/mobile/app/components/ui/pressable/index.tsx b/apps/mobile/app/components/ui/pressable/index.tsx
index b7f346925..de0f225d3 100644
--- a/apps/mobile/app/components/ui/pressable/index.tsx
+++ b/apps/mobile/app/components/ui/pressable/index.tsx
@@ -33,7 +33,7 @@ import {
   getColorLinearShade,
   hexToRGBA
 } from "../../../utils/colors";
-import { br } from "../../../utils/size";
+import { defaultBorderRadius } from "../../../utils/size";
 export interface PressableProps extends RNPressableProps {
   style?: ViewStyle;
   noborder?: boolean;
@@ -234,7 +234,8 @@ export const Pressable = ({
   customAlpha,
   customOpacity,
   fwdRef,
-  hidden
+  hidden,
+  ...props
 }: PressableProps) => {
   const { isDark } = useThemeColors();
   const {
@@ -269,7 +270,7 @@ export const Pressable = ({
             : hexToRGBA(primaryColor, opacity || 1),
         width: "100%",
         alignSelf: "center",
-        borderRadius: noborder ? 0 : br,
+        borderRadius: noborder ? 0 : defaultBorderRadius,
         justifyContent: "center",
         alignItems: "center",
         marginBottom: 0,
@@ -306,6 +307,7 @@ export const Pressable = ({
 
   return hidden ? null : (
     <RNPressable
+      {...props}
       testID={testID}
       ref={fwdRef}
       disabled={disabled}
diff --git a/apps/mobile/app/components/ui/reminder-time/index.tsx b/apps/mobile/app/components/ui/reminder-time/index.tsx
index c9e176eff..2e846d5d9 100644
--- a/apps/mobile/app/components/ui/reminder-time/index.tsx
+++ b/apps/mobile/app/components/ui/reminder-time/index.tsx
@@ -21,7 +21,7 @@ import React from "react";
 import { ViewStyle } from "react-native";
 
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { Button, ButtonProps } from "../button";
 import { getFormattedReminderTime } from "@notesnook/common";
 import { Reminder } from "@notesnook/core";
@@ -52,8 +52,8 @@ export const ReminderTime = ({
       title={time}
       key={reminder.id}
       icon="bell"
-      fontSize={SIZE.xs}
-      iconSize={SIZE.sm}
+      fontSize={AppFontSize.xs}
+      iconSize={AppFontSize.sm}
       type="secondary"
       buttonType={
         isTodayOrTomorrow
@@ -67,7 +67,7 @@ export const ReminderTime = ({
       }}
       style={{
         height: "auto",
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         borderColor: colors.primary.border,
         paddingHorizontal: 6,
         ...(style as ViewStyle)
diff --git a/apps/mobile/app/components/ui/tag/index.tsx b/apps/mobile/app/components/ui/tag/index.tsx
index 7a189f80b..44b92d7e8 100644
--- a/apps/mobile/app/components/ui/tag/index.tsx
+++ b/apps/mobile/app/components/ui/tag/index.tsx
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { ViewStyle } from "react-native";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import Paragraph from "../typography/paragraph";
 
 export default function Tag({
@@ -51,7 +51,7 @@ export default function Tag({
         ...style
       }}
       color={textColor || colors.primary.accentForeground}
-      size={SIZE.xxs}
+      size={AppFontSize.xxs}
     >
       {text}
     </Paragraph>
diff --git a/apps/mobile/app/components/ui/typography/heading.tsx b/apps/mobile/app/components/ui/typography/heading.tsx
index 3b61632d6..a1ea7319f 100644
--- a/apps/mobile/app/components/ui/typography/heading.tsx
+++ b/apps/mobile/app/components/ui/typography/heading.tsx
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Platform, Text, TextProps, ViewStyle } from "react-native";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 interface HeadingProps extends TextProps {
   color?: string;
   size?: number;
@@ -28,17 +28,17 @@ interface HeadingProps extends TextProps {
 }
 
 const extraBoldStyle = {
-  fontFamily: Platform.OS === "android" ? "OpenSans-Bold" : undefined,
+  fontFamily: Platform.OS === "android" ? "Inter-Bold" : undefined,
   fontWeight: Platform.OS === "ios" ? "800" : undefined
 };
 const boldStyle = {
-  fontFamily: Platform.OS === "android" ? "OpenSans-SemiBold" : undefined,
+  fontFamily: Platform.OS === "android" ? "Inter-SemiBold" : undefined,
   fontWeight: Platform.OS === "ios" ? "600" : undefined
 };
 
 const Heading = ({
   color,
-  size = SIZE.xl,
+  size = AppFontSize.xl,
   style,
   extraBold,
   ...restProps
@@ -51,7 +51,7 @@ const Heading = ({
       {...restProps}
       style={[
         {
-          fontSize: size || SIZE.xl,
+          fontSize: size || AppFontSize.xl,
           color: color || colors.primary.heading
         },
         extraBold ? (extraBoldStyle as ViewStyle) : (boldStyle as ViewStyle),
diff --git a/apps/mobile/app/components/ui/typography/paragraph.tsx b/apps/mobile/app/components/ui/typography/paragraph.tsx
index b929ef144..5f7184056 100644
--- a/apps/mobile/app/components/ui/typography/paragraph.tsx
+++ b/apps/mobile/app/components/ui/typography/paragraph.tsx
@@ -20,14 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Text, TextProps } from "react-native";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 interface ParagraphProps extends TextProps {
   color?: string;
   size?: number;
 }
 const Paragraph = ({
   color,
-  size = SIZE.sm,
+  size = AppFontSize.sm,
   style,
   ...restProps
 }: ParagraphProps) => {
@@ -38,10 +38,10 @@ const Paragraph = ({
       {...restProps}
       style={[
         {
-          fontSize: size || SIZE.sm,
+          fontSize: size || AppFontSize.sm,
           color: color || colors.primary.paragraph,
           fontWeight: "400",
-          fontFamily: "OpenSans-Regular"
+          fontFamily: "Inter-Regular"
         },
         style
       ]}
diff --git a/apps/mobile/app/components/walkthroughs/index.tsx b/apps/mobile/app/components/walkthroughs/index.tsx
index 49fdbaa7e..b661e9a9c 100644
--- a/apps/mobile/app/components/walkthroughs/index.tsx
+++ b/apps/mobile/app/components/walkthroughs/index.tsx
@@ -23,7 +23,7 @@ import { MMKV } from "../../common/database/mmkv";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
@@ -65,7 +65,7 @@ export const Walkthrough = ({
             alignSelf: "center",
             maxWidth: "80%"
           }}
-          size={SIZE.md}
+          size={AppFontSize.md}
         >
           {step.text}
         </Paragraph>
diff --git a/apps/mobile/app/components/walkthroughs/walkthroughs.tsx b/apps/mobile/app/components/walkthroughs/walkthroughs.tsx
index ce327f377..ae9afde68 100644
--- a/apps/mobile/app/components/walkthroughs/walkthroughs.tsx
+++ b/apps/mobile/app/components/walkthroughs/walkthroughs.tsx
@@ -33,7 +33,7 @@ import { eSendEvent } from "../../services/event-manager";
 import { getContainerBorder } from "../../utils/colors";
 import { getElevationStyle } from "../../utils/elevation";
 import { eOpenAddNotebookDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
 import { SvgView } from "../ui/svg";
@@ -95,7 +95,7 @@ const NotebookWelcome = () => {
           marginVertical: 12
         }}
       >
-        <Heading size={SIZE.md} color={colors.primary.heading}>
+        <Heading size={AppFontSize.md} color={colors.primary.heading}>
           {data?.title}
         </Heading>
         <Paragraph>{data?.description}</Paragraph>
@@ -104,7 +104,7 @@ const NotebookWelcome = () => {
           style={{
             marginTop: 5
           }}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           color={colors.secondary.paragraph}
         >
           {strings.dataTypesCamelCase.notebook()} - {data?.count}{" "}
@@ -150,7 +150,7 @@ const notebooks: { id: string; steps: TStep[] } = {
               marginVertical: 12
             }}
           >
-            <Heading size={SIZE.md} color={colors.primary.heading}>
+            <Heading size={AppFontSize.md} color={colors.primary.heading}>
               {strings.workAndOffice()}
             </Heading>
             <Paragraph>{strings.workAndOfficeDesc()}</Paragraph>
@@ -159,7 +159,7 @@ const notebooks: { id: string; steps: TStep[] } = {
               style={{
                 marginTop: 5
               }}
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={colors.secondary.paragraph}
             >
               {strings.notes(2)}
@@ -178,7 +178,7 @@ const notebooks: { id: string; steps: TStep[] } = {
             <Paragraph color={colors.primary.accent}>
               <Icon
                 color={colors.primary.accent}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 name="bookmark"
               />{" "}
               {strings.tasks()}
@@ -190,13 +190,17 @@ const notebooks: { id: string; steps: TStep[] } = {
               paddingVertical: 12,
               width: "80%",
               backgroundColor: colors.primary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               alignSelf: "flex-end",
               marginBottom: 10
             }}
           >
-            <Paragraph size={SIZE.xs}>
-              <Icon color={colors.primary.icon} size={SIZE.sm} name="note" />{" "}
+            <Paragraph size={AppFontSize.xs}>
+              <Icon
+                color={colors.primary.icon}
+                size={AppFontSize.sm}
+                name="note"
+              />{" "}
               {strings.taskAValue()}
             </Paragraph>
           </View>
@@ -205,14 +209,18 @@ const notebooks: { id: string; steps: TStep[] } = {
               padding: 12,
               width: "80%",
               backgroundColor: colors.primary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               paddingVertical: 12,
               alignSelf: "flex-end",
               marginBottom: 10
             }}
           >
-            <Paragraph size={SIZE.xs}>
-              <Icon color={colors.primary.icon} size={SIZE.sm} name="note" />{" "}
+            <Paragraph size={AppFontSize.xs}>
+              <Icon
+                color={colors.primary.icon}
+                size={AppFontSize.sm}
+                name="note"
+              />{" "}
               {strings.taskBValue()}
             </Paragraph>
           </View>
@@ -229,7 +237,7 @@ const notebooks: { id: string; steps: TStep[] } = {
             <Paragraph color={colors.primary.accent}>
               <Icon
                 color={colors.primary.accent}
-                size={SIZE.sm}
+                size={AppFontSize.sm}
                 name="bookmark"
               />{" "}
               {strings.meetings()}
@@ -353,7 +361,7 @@ const Support = () => {
         style={{
           textAlign: "center"
         }}
-        size={SIZE.md}
+        size={AppFontSize.md}
       >
         {strings.weAreAlwaysListening()}
       </Paragraph>
diff --git a/apps/mobile/app/hooks/use-actions.tsx b/apps/mobile/app/hooks/use-actions.tsx
index 336cf65a8..527df5e7e 100644
--- a/apps/mobile/app/hooks/use-actions.tsx
+++ b/apps/mobile/app/hooks/use-actions.tsx
@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-inner-declarations */
 import {
+  createInternalLink,
   Item,
   ItemReference,
   Note,
-  VAULT_ERRORS,
-  createInternalLink
+  VAULT_ERRORS
 } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
@@ -33,6 +33,7 @@ import { InteractionManager, Platform } from "react-native";
 import Share from "react-native-share";
 import { DatabaseLogger, db } from "../common/database";
 import { AttachmentDialog } from "../components/attachments";
+import { AuthMode } from "../components/auth/common";
 import { presentDialog } from "../components/dialog/functions";
 import NoteHistory from "../components/note-history";
 import { AddNotebookSheet } from "../components/sheets/add-notebook";
@@ -66,7 +67,7 @@ import { useRelationStore } from "../stores/use-relation-store";
 import { useSelectionStore } from "../stores/use-selection-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useUserStore } from "../stores/use-user-store";
-import { eOpenLoginDialog, eUpdateNoteInEditor } from "../utils/events";
+import { eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
@@ -664,7 +665,9 @@ export const useActions = ({
           heading: strings.loginRequired(),
           context: "local",
           func: () => {
-            eSendEvent(eOpenLoginDialog);
+            Navigation.navigate("Auth", {
+              mode: AuthMode.login
+            });
           },
           actionText: "Login"
         });
diff --git a/apps/mobile/app/navigation/navigation-stack.tsx b/apps/mobile/app/navigation/navigation-stack.tsx
index 0262792da..ae8378c44 100644
--- a/apps/mobile/app/navigation/navigation-stack.tsx
+++ b/apps/mobile/app/navigation/navigation-stack.tsx
@@ -23,7 +23,8 @@ 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 useGlobalSafeAreaInsets from "../hooks/use-global-safe-area-insets";
+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";
@@ -43,11 +44,7 @@ import useNavigationStore, {
 } from "../stores/use-navigation-store";
 import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
-import {
-  appNavigatorRef,
-  fluidTabsRef,
-  rootNavigatorRef
-} from "../utils/global-refs";
+import { fluidTabsRef, rootNavigatorRef } from "../utils/global-refs";
 import { FluidPanelsView } from "./fluid-panels-view";
 
 const RootStack = createNativeStackNavigator();
@@ -57,12 +54,6 @@ const AppNavigation = React.memo(
   () => {
     const { colors } = useThemeColors();
     const homepage = SettingsService.get().homepage;
-    const introCompleted = useSettingStore(
-      (state) => state.settings.introCompleted
-    );
-    const height = useSettingStore((state) => state.dimensions.height);
-    const insets = useGlobalSafeAreaInsets();
-    const screenHeight = height - (50 + insets.top + insets.bottom);
     React.useEffect(() => {
       setTimeout(() => {
         useNavigationStore.getState().update(homepage as keyof RouteParams);
@@ -71,13 +62,12 @@ const AppNavigation = React.memo(
 
     return (
       <AppStack.Navigator
-        initialRouteName={!introCompleted ? "Welcome" : homepage}
+        initialRouteName={homepage}
         screenOptions={{
           headerShown: false,
           animation: "none",
           contentStyle: {
-            backgroundColor: colors.primary.background,
-            minHeight: !introCompleted ? undefined : screenHeight
+            backgroundColor: colors.primary.background
           }
         }}
       >
@@ -108,8 +98,19 @@ const AppNavigation = React.memo(
 AppNavigation.displayName = "AppNavigation";
 
 export const RootNavigation = () => {
+  const introCompleted = useSettingStore(
+    (state) => state.settings.introCompleted
+  );
+  const clearSelection = useSelectionStore((state) => state.clearSelection);
+  const onStateChange = React.useCallback(() => {
+    if (useSelectionStore.getState().selectionMode) {
+      clearSelection();
+    }
+    hideAllTooltips();
+  }, [clearSelection]);
+
   return (
-    <NavigationContainer ref={rootNavigatorRef} independent>
+    <NavigationContainer onStateChange={onStateChange} ref={rootNavigatorRef}>
       <RootStack.Navigator
         screenOptions={{
           headerShown: false
@@ -123,8 +124,10 @@ export const RootNavigation = () => {
             }
           }
         }}
-        initialRouteName="FluidPanelsView"
+        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} />
         <AppStack.Screen name="Settings" component={Settings} />
@@ -135,23 +138,7 @@ export const RootNavigation = () => {
 
 export const AppNavigationStack = React.memo(
   () => {
-    const clearSelection = useSelectionStore((state) => state.clearSelection);
-    const onStateChange = React.useCallback(() => {
-      if (useSelectionStore.getState().selectionMode) {
-        clearSelection();
-      }
-      hideAllTooltips();
-    }, [clearSelection]);
-
-    return (
-      <NavigationContainer
-        independent
-        onStateChange={onStateChange}
-        ref={appNavigatorRef}
-      >
-        <AppNavigation />
-      </NavigationContainer>
-    );
+    return <AppNavigation />;
   },
   () => true
 );
diff --git a/apps/mobile/app/screens/editor/loading.tsx b/apps/mobile/app/screens/editor/loading.tsx
index 9cb648943..4e54bc0ec 100644
--- a/apps/mobile/app/screens/editor/loading.tsx
+++ b/apps/mobile/app/screens/editor/loading.tsx
@@ -36,7 +36,7 @@ import {
 } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { useEditor } from "./tiptap/use-editor";
 import { editorState } from "./tiptap/utils";
 import { strings } from "@notesnook/intl";
@@ -150,7 +150,7 @@ const EditorOverlay = ({
         style={{
           width: "100%",
           backgroundColor: colors.primary.background,
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           height: "100%",
           alignItems: "flex-start",
           paddingTop: insets.top
@@ -240,7 +240,7 @@ const EditorOverlay = ({
               height: 25,
               width: "100%",
               backgroundColor: colors.secondary.background,
-              borderRadius: 5
+              borderRadius: defaultBorderRadius
             }}
           />
 
@@ -257,7 +257,7 @@ const EditorOverlay = ({
                 height: 12,
                 width: 60,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginRight: 10
               }}
             />
@@ -266,7 +266,7 @@ const EditorOverlay = ({
                 height: 12,
                 width: 60,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginRight: 10
               }}
             />
@@ -275,7 +275,7 @@ const EditorOverlay = ({
                 height: 12,
                 width: 60,
                 backgroundColor: colors.secondary.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 marginRight: 10
               }}
             />
@@ -286,7 +286,7 @@ const EditorOverlay = ({
               height: 16,
               width: "100%",
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           />
@@ -296,7 +296,7 @@ const EditorOverlay = ({
               height: 16,
               width: "100%",
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           />
@@ -306,7 +306,7 @@ const EditorOverlay = ({
               height: 16,
               width: 200,
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           />
@@ -330,7 +330,7 @@ const EditorOverlay = ({
               />
               <Paragraph
                 textBreakStrategy="balanced"
-                size={SIZE.xs}
+                size={AppFontSize.xs}
                 color={colors.secondary.paragraph}
                 style={{
                   maxWidth: "100%",
diff --git a/apps/mobile/app/screens/editor/readonly-editor.tsx b/apps/mobile/app/screens/editor/readonly-editor.tsx
index d28456822..95b43326f 100644
--- a/apps/mobile/app/screens/editor/readonly-editor.tsx
+++ b/apps/mobile/app/screens/editor/readonly-editor.tsx
@@ -35,6 +35,7 @@ import { useThemeColors } from "@notesnook/theme";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { db } from "../../common/database";
 import { i18n } from "@lingui/core";
+import { defaultBorderRadius } from "../../utils/size";
 
 const onShouldStartLoadWithRequest = (request: ShouldStartLoadRequest) => {
   if (request.url.includes("https")) {
@@ -197,7 +198,7 @@ export function ReadonlyEditor(props: {
             style={{
               width: "100%",
               backgroundColor: colors.primary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               height: "100%",
               alignItems: "flex-start",
               paddingTop: insets.top
@@ -215,7 +216,7 @@ export function ReadonlyEditor(props: {
                   height: 25,
                   width: "100%",
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5
+                  borderRadius: defaultBorderRadius
                 }}
               />
 
@@ -232,7 +233,7 @@ export function ReadonlyEditor(props: {
                     height: 12,
                     width: 60,
                     backgroundColor: colors.secondary.background,
-                    borderRadius: 5,
+                    borderRadius: defaultBorderRadius,
                     marginRight: 10
                   }}
                 />
@@ -241,7 +242,7 @@ export function ReadonlyEditor(props: {
                     height: 12,
                     width: 60,
                     backgroundColor: colors.secondary.background,
-                    borderRadius: 5,
+                    borderRadius: defaultBorderRadius,
                     marginRight: 10
                   }}
                 />
@@ -250,7 +251,7 @@ export function ReadonlyEditor(props: {
                     height: 12,
                     width: 60,
                     backgroundColor: colors.secondary.background,
-                    borderRadius: 5,
+                    borderRadius: defaultBorderRadius,
                     marginRight: 10
                   }}
                 />
@@ -261,7 +262,7 @@ export function ReadonlyEditor(props: {
                   height: 16,
                   width: "100%",
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   marginTop: 10
                 }}
               />
@@ -271,7 +272,7 @@ export function ReadonlyEditor(props: {
                   height: 16,
                   width: "100%",
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   marginTop: 10
                 }}
               />
@@ -281,7 +282,7 @@ export function ReadonlyEditor(props: {
                   height: 16,
                   width: 200,
                   backgroundColor: colors.secondary.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   marginTop: 10
                 }}
               />
diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx b/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx
index baf2f33b2..c3d59201c 100644
--- a/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx
+++ b/apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx
@@ -37,6 +37,7 @@ import {
 import { WebViewMessageEvent } from "react-native-webview";
 import { DatabaseLogger, db } from "../../../common/database";
 import downloadAttachment from "../../../common/filesystem/download-attachment";
+import { AuthMode } from "../../../components/auth/common";
 import EditorTabs from "../../../components/sheets/editor-tabs";
 import { Issue } from "../../../components/sheets/github/issue";
 import LinkNote from "../../../components/sheets/link-note";
@@ -66,7 +67,6 @@ import {
   eOnExitEditor,
   eOnLoadNote,
   eOpenFullscreenEditor,
-  eOpenLoginDialog,
   eOpenPremiumDialog,
   eOpenPublishNoteDialog,
   eUnlockWithBiometrics,
@@ -86,7 +86,9 @@ const publishNote = async () => {
       heading: strings.loginRequired(),
       context: "global",
       func: () => {
-        eSendEvent(eOpenLoginDialog);
+        Navigation.navigate("Auth", {
+          mode: AuthMode.login
+        });
       },
       actionText: "Login"
     });
diff --git a/apps/mobile/app/screens/home/filter-bar.tsx b/apps/mobile/app/screens/home/filter-bar.tsx
index ea05f5de9..d443b3d0c 100644
--- a/apps/mobile/app/screens/home/filter-bar.tsx
+++ b/apps/mobile/app/screens/home/filter-bar.tsx
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { Button } from "../../components/ui/button";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 
 export const FilterBar = () => {
@@ -56,7 +56,7 @@ export const FilterBar = () => {
         key="add"
         icon="plus"
         type="secondary"
-        iconSize={SIZE.md}
+        iconSize={AppFontSize.md}
         style={{
           height: 25
         }}
diff --git a/apps/mobile/app/screens/home/index.tsx b/apps/mobile/app/screens/home/index.tsx
index f7606b0ff..d2eac90f4 100755
--- a/apps/mobile/app/screens/home/index.tsx
+++ b/apps/mobile/app/screens/home/index.tsx
@@ -30,7 +30,6 @@ import SettingsService from "../../services/settings";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useNotes } from "../../stores/use-notes-store";
 import { openEditor } from "../notes/common";
-import { FilterBar } from "./filter-bar";
 
 export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
   const [notes, loading] = useNotes();
@@ -68,8 +67,6 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
         onPressDefaultRightButton={openEditor}
       />
 
-      <FilterBar />
-
       <DelayLayout wait={loading}>
         <List
           data={notes}
diff --git a/apps/mobile/app/screens/notebook/index.tsx b/apps/mobile/app/screens/notebook/index.tsx
index ebefffe37..cde53a46b 100644
--- a/apps/mobile/app/screens/notebook/index.tsx
+++ b/apps/mobile/app/screens/notebook/index.tsx
@@ -29,7 +29,6 @@ import List from "../../components/list";
 import { NotebookHeader } from "../../components/list-items/headers/notebook-header";
 import { Properties } from "../../components/properties";
 import SelectionHeader from "../../components/selection-header";
-import { AddNotebookSheet } from "../../components/sheets/add-notebook";
 import { IconButton } from "../../components/ui/icon-button";
 import { Pressable } from "../../components/ui/pressable";
 import Paragraph from "../../components/ui/typography/paragraph";
@@ -41,7 +40,7 @@ import useNavigationStore, {
 } from "../../stores/use-navigation-store";
 import { eUpdateNotebookRoute } from "../../utils/events";
 import { findRootNotebookId } from "../../utils/notebooks";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { openEditor, setOnFirstSave } from "../notes/common";
 
@@ -233,7 +232,7 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
                 bottom={0}
                 style={{ width: 20, height: 25 }}
               />
-              <Paragraph size={SIZE.xs + 1}>{item.title}</Paragraph>
+              <Paragraph size={AppFontSize.xs + 1}>{item.title}</Paragraph>
             </Pressable>
           ))}
         </View>
diff --git a/apps/mobile/app/screens/search/search-bar.tsx b/apps/mobile/app/screens/search/search-bar.tsx
index 2176ef7bc..56478f190 100644
--- a/apps/mobile/app/screens/search/search-bar.tsx
+++ b/apps/mobile/app/screens/search/search-bar.tsx
@@ -27,7 +27,7 @@ import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 export const SearchBar = ({
   onChangeText,
@@ -51,12 +51,12 @@ export const SearchBar = ({
     <View
       style={{
         width: "100%",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingTop: Platform.OS === "ios" ? 0 : insets.top + 5
+        paddingHorizontal: DefaultAppStyles.GAP
       }}
     >
       <View
         style={{
+          marginTop: DefaultAppStyles.GAP_SMALL,
           flexDirection: "row",
           alignItems: "center",
           width: "100%",
@@ -69,7 +69,7 @@ export const SearchBar = ({
       >
         <IconButton
           name="arrow-left"
-          size={SIZE.xxl}
+          size={AppFontSize.xxl}
           top={10}
           bottom={10}
           onPress={() => {
@@ -83,7 +83,7 @@ export const SearchBar = ({
           ref={inputRef}
           testID="search-input"
           style={{
-            fontSize: SIZE.sm,
+            fontSize: AppFontSize.sm,
             fontFamily: "OpenSans-Regular",
             flexGrow: 1,
             color: colors.primary.paragraph,
diff --git a/apps/mobile/app/screens/settings/2fa.tsx b/apps/mobile/app/screens/settings/2fa.tsx
index a8276e672..52a63a70e 100644
--- a/apps/mobile/app/screens/settings/2fa.tsx
+++ b/apps/mobile/app/screens/settings/2fa.tsx
@@ -51,7 +51,7 @@ import {
 } from "../../services/event-manager";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSheet } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
 const mfaMethods: MFAMethod[] = [
   {
@@ -147,8 +147,8 @@ export const MFAMethodsPickerStep = ({ recovery, onSuccess }: MFAStepProps) => {
               flexShrink: 1
             }}
           >
-            <Heading size={SIZE.md}>{item.title}</Heading>
-            <Paragraph size={SIZE.sm}>{item.body}</Paragraph>
+            <Heading size={AppFontSize.md}>{item.title}</Heading>
+            <Paragraph size={AppFontSize.sm}>{item.body}</Paragraph>
           </View>
         </Pressable>
       ))}
@@ -349,7 +349,9 @@ export const MFASetup = ({
               }
             />
 
-            <Heading size={SIZE.md}>{strings.enterSixDigitCode()}</Heading>
+            <Heading size={AppFontSize.md}>
+              {strings.enterSixDigitCode()}
+            </Heading>
             <Paragraph>{codeHelpText[method?.id]}</Paragraph>
             <Seperator />
             <Input
@@ -360,7 +362,7 @@ export const MFASetup = ({
               keyboardType="numeric"
               onChangeText={(value) => (code.current = value)}
               inputStyle={{
-                fontSize: SIZE.lg,
+                fontSize: AppFontSize.lg,
                 height: 60,
                 textAlign: "center",
                 letterSpacing: 10,
@@ -473,7 +475,7 @@ export const MFARecoveryCodes = ({
                   marginVertical: 5,
                   fontFamily: "monospace"
                 }}
-                size={SIZE.lg}
+                size={AppFontSize.lg}
               >
                 {item}
               </Heading>
@@ -490,7 +492,7 @@ export const MFARecoveryCodes = ({
           >
             <Button
               title={strings.copyCodes()}
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
               onPress={() => {
                 const codeString = codes.join("\n");
                 Clipboard.setString(codeString);
@@ -507,7 +509,7 @@ export const MFARecoveryCodes = ({
 
             <Button
               title={strings.saveToFile()}
-              fontSize={SIZE.md}
+              fontSize={AppFontSize.md}
               onPress={async () => {
                 try {
                   let path;
diff --git a/apps/mobile/app/screens/settings/app-lock.js b/apps/mobile/app/screens/settings/app-lock.js
index 65b9e1b97..6212a1d04 100644
--- a/apps/mobile/app/screens/settings/app-lock.js
+++ b/apps/mobile/app/screens/settings/app-lock.js
@@ -31,7 +31,7 @@ import { ToastManager, presentSheet } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
 const AppLock = () => {
   const { colors } = useThemeColors();
@@ -99,7 +99,9 @@ const AppLock = () => {
               }}
             >
               <Heading>{strings.protectNotes()}</Heading>
-              <Paragraph size={SIZE.md}>{strings.protectNotesDesc()}</Paragraph>
+              <Paragraph size={AppFontSize.md}>
+                {strings.protectNotesDesc()}
+              </Paragraph>
             </View>
           </View>
 
@@ -174,7 +176,7 @@ const AppLock = () => {
                       : colors.primary.heading
                   }
                   style={{ maxWidth: "95%" }}
-                  size={SIZE.md}
+                  size={AppFontSize.md}
                 >
                   {item.title}
                 </Heading>
@@ -185,7 +187,7 @@ const AppLock = () => {
                       : colors.secondary.paragraph
                   }
                   style={{ maxWidth: "95%" }}
-                  size={SIZE.sm}
+                  size={AppFontSize.sm}
                 >
                   {item.desc}
                 </Paragraph>
diff --git a/apps/mobile/app/screens/settings/appearance.js b/apps/mobile/app/screens/settings/appearance.js
index fa78b139e..f4349db56 100644
--- a/apps/mobile/app/screens/settings/appearance.js
+++ b/apps/mobile/app/screens/settings/appearance.js
@@ -30,7 +30,7 @@ import {
   hexToRGBA,
   switchAccentColor
 } from "../../utils/colors";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 
 export const AccentColorPicker = () => {
   const { colors, isDark } = useThemeColors();
@@ -95,7 +95,7 @@ export const AccentColorPicker = () => {
         >
           {colors.primary.accent === item ? (
             <Icon
-              size={DDS.isLargeTablet() ? SIZE.lg : SIZE.xxl}
+              size={DDS.isLargeTablet() ? AppFontSize.lg : AppFontSize.xxl}
               color="white"
               name="check"
             />
diff --git a/apps/mobile/app/screens/settings/attachment-group-progress.tsx b/apps/mobile/app/screens/settings/attachment-group-progress.tsx
index f903b3ad0..05686ebac 100644
--- a/apps/mobile/app/screens/settings/attachment-group-progress.tsx
+++ b/apps/mobile/app/screens/settings/attachment-group-progress.tsx
@@ -28,7 +28,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useDBItem } from "../../hooks/use-db-item";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
 
 export const AttachmentGroupProgress = (props: { groupId?: string }) => {
@@ -52,7 +52,7 @@ export const AttachmentGroupProgress = (props: { groupId?: string }) => {
         gap: 10
       }}
     >
-      <Icon name="download" size={SIZE.xxxl} />
+      <Icon name="download" size={AppFontSize.xxxl} />
       <View
         style={{
           gap: 5,
diff --git a/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx b/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
index 9eb0e11e6..96d0033bc 100644
--- a/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
+++ b/apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
@@ -26,7 +26,7 @@ import { Notice } from "../../../components/ui/notice";
 import Paragraph from "../../../components/ui/typography/paragraph";
 import PremiumService from "../../../services/premium";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { Group } from "./group";
 import { DragState, useDragState } from "./state";
 import { strings } from "@notesnook/intl";
@@ -59,7 +59,7 @@ export const ConfigureToolbar = () => {
             style={{
               marginTop: 10
             }}
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={colors.secondary.paragraph}
           >
             {strings.presets()}
@@ -105,7 +105,7 @@ export const ConfigureToolbar = () => {
                     .getState()
                     .setPreset(item.id as DragState["preset"]);
                 }}
-                fontSize={SIZE.sm - 1}
+                fontSize={AppFontSize.sm - 1}
                 key={item.name}
                 title={item.name}
               />
diff --git a/apps/mobile/app/screens/settings/editor/group.tsx b/apps/mobile/app/screens/settings/editor/group.tsx
index 83f0dd2d1..058d94e58 100644
--- a/apps/mobile/app/screens/settings/editor/group.tsx
+++ b/apps/mobile/app/screens/settings/editor/group.tsx
@@ -26,7 +26,7 @@ import { IconButton } from "../../../components/ui/icon-button";
 import Paragraph from "../../../components/ui/typography/paragraph";
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 import { renderTool } from "./common";
 import { DraggableItem, useDragState } from "./state";
 import ToolSheet from "./tool-sheet";
@@ -196,13 +196,17 @@ export const Group = ({
                 alignItems: "center"
               }}
             >
-              <Icon size={SIZE.md} name="drag" color={colors.primary.icon} />
+              <Icon
+                size={AppFontSize.md}
+                name="drag"
+                color={colors.primary.icon}
+              />
               <Paragraph
                 style={{
                   marginLeft: 5
                 }}
                 color={colors.secondary.paragraph}
-                size={SIZE.xs}
+                size={AppFontSize.xs}
               >
                 {strings.group()}
               </Paragraph>
@@ -227,7 +231,7 @@ export const Group = ({
                   onPress={item.onPress}
                   name={item.name}
                   color={colors.primary.icon}
-                  size={SIZE.lg}
+                  size={AppFontSize.lg}
                 />
               ))}
             </View>
diff --git a/apps/mobile/app/screens/settings/editor/tool-sheet.tsx b/apps/mobile/app/screens/settings/editor/tool-sheet.tsx
index 5d4babe84..1b4d63d45 100644
--- a/apps/mobile/app/screens/settings/editor/tool-sheet.tsx
+++ b/apps/mobile/app/screens/settings/editor/tool-sheet.tsx
@@ -25,7 +25,7 @@ import { SvgView } from "../../../components/ui/svg";
 import Paragraph from "../../../components/ui/typography/paragraph";
 import { presentSheet } from "../../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { DraggableItem, useDragState } from "./state";
 import {
   findToolById,
@@ -74,7 +74,7 @@ export default function ToolSheet({
             height: 50,
             paddingHorizontal: 12,
             paddingRight: 0,
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "flex-start"
@@ -94,7 +94,7 @@ export default function ToolSheet({
                 marginLeft: iconSvgString ? 10 : 0
               }}
               color={colors.primary.paragraph}
-              size={SIZE.sm}
+              size={AppFontSize.sm}
             >
               {tool?.title}
             </Paragraph>
diff --git a/apps/mobile/app/screens/settings/editor/tool.tsx b/apps/mobile/app/screens/settings/editor/tool.tsx
index 2384da1be..1d15df288 100644
--- a/apps/mobile/app/screens/settings/editor/tool.tsx
+++ b/apps/mobile/app/screens/settings/editor/tool.tsx
@@ -27,7 +27,7 @@ import { SvgView } from "../../../components/ui/svg";
 import Paragraph from "../../../components/ui/typography/paragraph";
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { renderGroup } from "./common";
 import { DraggableItem, useDragState } from "./state";
 import { findToolById, getToolIcon } from "./toolbar-definition";
@@ -185,7 +185,7 @@ export const Tool = ({
             height: 40,
             paddingHorizontal: isSubgroup ? 0 : 12,
             paddingRight: 0,
-            borderRadius: 5,
+            borderRadius: defaultBorderRadius,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
@@ -205,7 +205,7 @@ export const Tool = ({
             {isSubgroup && (
               <Icon
                 style={{ marginRight: 5 }}
-                size={SIZE.md}
+                size={AppFontSize.md}
                 name="drag"
                 color={colors.primary.icon}
               />
@@ -219,7 +219,7 @@ export const Tool = ({
                   ? colors.secondary.paragraph
                   : colors.primary.paragraph
               }
-              size={isSubgroup ? SIZE.xs : SIZE.sm - 1}
+              size={isSubgroup ? AppFontSize.xs : AppFontSize.sm - 1}
             >
               {isSubgroup ? strings.collapsed() : tool?.title}
             </Paragraph>
@@ -244,7 +244,7 @@ export const Tool = ({
                 }}
                 name={btn.name}
                 color={colors.primary.icon}
-                size={SIZE.lg}
+                size={AppFontSize.lg}
               />
             ))}
           </View>
diff --git a/apps/mobile/app/screens/settings/licenses.tsx b/apps/mobile/app/screens/settings/licenses.tsx
index 58388f766..494b3d813 100644
--- a/apps/mobile/app/screens/settings/licenses.tsx
+++ b/apps/mobile/app/screens/settings/licenses.tsx
@@ -21,7 +21,7 @@ import { LICENSES } from "./license-data";
 import { FlatList, Linking, Platform } from "react-native";
 import { Pressable } from "../../components/ui/pressable";
 import Heading from "../../components/ui/typography/heading";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { useThemeColors } from "@notesnook/theme";
 import Paragraph from "../../components/ui/typography/paragraph";
 
@@ -59,7 +59,7 @@ export const Licenses = () => {
           });
         }}
       >
-        <Heading size={SIZE.sm}>{item.name}</Heading>
+        <Heading size={AppFontSize.sm}>{item.name}</Heading>
         <Paragraph>
           {item.licenseType} | {item.author?.split("<")[0]}
         </Paragraph>
diff --git a/apps/mobile/app/screens/settings/picker/index.tsx b/apps/mobile/app/screens/settings/picker/index.tsx
index b54022055..e44d28a1c 100644
--- a/apps/mobile/app/screens/settings/picker/index.tsx
+++ b/apps/mobile/app/screens/settings/picker/index.tsx
@@ -27,7 +27,7 @@ import { Pressable } from "../../../components/ui/pressable";
 import Paragraph from "../../../components/ui/typography/paragraph";
 import PremiumService from "../../../services/premium";
 import { getColorLinearShade } from "../../../utils/colors";
-import { SIZE } from "../../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import { verifyUser } from "../functions";
 
@@ -96,7 +96,7 @@ export function SettingsPicker<T>({
         ref={menuRef}
         animationDuration={200}
         style={{
-          borderRadius: 5,
+          borderRadius: defaultBorderRadius,
           backgroundColor: colors.primary.background,
           width: width,
           marginTop: 60,
@@ -128,7 +128,11 @@ export function SettingsPicker<T>({
             }}
           >
             <Paragraph>{formatValue(currentValue)}</Paragraph>
-            <Icon color={colors.primary.icon} name="menu-down" size={SIZE.md} />
+            <Icon
+              color={colors.primary.icon}
+              name="menu-down"
+              size={AppFontSize.md}
+            />
           </Pressable>
         }
       >
@@ -155,7 +159,7 @@ export function SettingsPicker<T>({
               maxWidth: width
             }}
             textStyle={{
-              fontSize: SIZE.md,
+              fontSize: AppFontSize.md,
               color: compareValue(currentValue, item)
                 ? colors.primary.accent
                 : colors.primary.paragraph
diff --git a/apps/mobile/app/screens/settings/restore-backup/index.tsx b/apps/mobile/app/screens/settings/restore-backup/index.tsx
index ce3c44521..eddfac4da 100644
--- a/apps/mobile/app/screens/settings/restore-backup/index.tsx
+++ b/apps/mobile/app/screens/settings/restore-backup/index.tsx
@@ -46,7 +46,7 @@ import Navigation from "../../../services/navigation";
 import SettingsService from "../../../services/settings";
 import { refreshAllStores } from "../../../stores/create-db-collection-store";
 import { useUserStore } from "../../../stores/use-user-store";
-import { SIZE } from "../../../utils/size";
+import { AppFontSize } from "../../../utils/size";
 
 type PasswordOrKey = { password?: string; encryptionKey?: string };
 
@@ -415,7 +415,10 @@ export const RestoreBackup = () => {
                       marginBottom: 10
                     }}
                   >
-                    <Heading color={colors.primary.accent} size={SIZE.xs}>
+                    <Heading
+                      color={colors.primary.accent}
+                      size={AppFontSize.xs}
+                    >
                       {strings.recentBackups()}
                     </Heading>
                   </View>
@@ -433,7 +436,7 @@ export const RestoreBackup = () => {
                     >
                       <ActivityIndicator
                         color={colors.primary.accent}
-                        size={SIZE.lg}
+                        size={AppFontSize.lg}
                       />
                     </View>
                   ) : (
@@ -516,9 +519,9 @@ const BackupItem = ({
       }}
     >
       <View>
-        <Paragraph size={SIZE.sm}>{itemName}</Paragraph>
+        <Paragraph size={AppFontSize.sm}>{itemName}</Paragraph>
         <Paragraph
-          size={SIZE.xs}
+          size={AppFontSize.xs}
           color={colors.secondary.paragraph}
           style={{ width: "100%", maxWidth: "100%" }}
         >
diff --git a/apps/mobile/app/screens/settings/section-group.tsx b/apps/mobile/app/screens/settings/section-group.tsx
index 885df34a9..99c3b51d8 100644
--- a/apps/mobile/app/screens/settings/section-group.tsx
+++ b/apps/mobile/app/screens/settings/section-group.tsx
@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import Heading from "../../components/ui/typography/heading";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { SectionItem } from "./section-item";
 import { SettingSection } from "./types";
 export const SectionGroup = ({ item }: { item: SettingSection }) => {
@@ -40,7 +40,7 @@ export const SectionGroup = ({ item }: { item: SettingSection }) => {
             paddingHorizontal: 12
           }}
           color={colors.primary.accent}
-          size={SIZE.xs}
+          size={AppFontSize.xs}
         >
           {(item.name as string).toUpperCase()}
         </Heading>
diff --git a/apps/mobile/app/screens/settings/section-item.tsx b/apps/mobile/app/screens/settings/section-item.tsx
index fabe2d1bf..f6ea27bbe 100644
--- a/apps/mobile/app/screens/settings/section-item.tsx
+++ b/apps/mobile/app/screens/settings/section-item.tsx
@@ -35,7 +35,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import SettingsService from "../../services/settings";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { SettingStore, useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { components } from "./components";
 import { RouteParams, SettingSection } from "./types";
 
@@ -194,7 +194,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
                 ? colors.error.paragraph
                 : colors.primary.heading
             }
-            size={SIZE.md + 1}
+            size={AppFontSize.md + 1}
           >
             {typeof item.name === "function" ? item.name(current) : item.name}
           </Paragraph>
@@ -205,7 +205,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
                   ? colors.error.paragraph
                   : colors.primary.paragraph
               }
-              size={SIZE.sm}
+              size={AppFontSize.sm}
             >
               {typeof item.description === "function"
                 ? item.description(current)
@@ -277,7 +277,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
                     updateInput(nextValue);
                   }
                 }}
-                size={SIZE.xl}
+                size={AppFontSize.xl}
               />
               <Input
                 {...item.inputProperties}
@@ -326,7 +326,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
                     updateInput(nextValue);
                   }
                 }}
-                size={SIZE.xl}
+                size={AppFontSize.xl}
               />
             </View>
           )}
@@ -349,7 +349,10 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
       )}
 
       {loading ? (
-        <ActivityIndicator size={SIZE.xxl} color={colors.primary.accent} />
+        <ActivityIndicator
+          size={AppFontSize.xxl}
+          color={colors.primary.accent}
+        />
       ) : null}
     </Pressable>
   );
diff --git a/apps/mobile/app/screens/settings/sound-picker.tsx b/apps/mobile/app/screens/settings/sound-picker.tsx
index 5cc62a325..b95ee36a7 100644
--- a/apps/mobile/app/screens/settings/sound-picker.tsx
+++ b/apps/mobile/app/screens/settings/sound-picker.tsx
@@ -31,7 +31,7 @@ import Notifications from "../../services/notifications";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
 
 const SoundItem = ({
@@ -90,7 +90,7 @@ const SoundItem = ({
               : "radiobox-blank"
           }
         />
-        <Paragraph style={{ marginLeft: 10 }} size={SIZE.md}>
+        <Paragraph style={{ marginLeft: 10 }} size={AppFontSize.md}>
           {item?.title}
         </Paragraph>
       </View>
diff --git a/apps/mobile/app/screens/settings/subscription.js b/apps/mobile/app/screens/settings/subscription.js
index b15eb3042..6e93dea89 100644
--- a/apps/mobile/app/screens/settings/subscription.js
+++ b/apps/mobile/app/screens/settings/subscription.js
@@ -32,7 +32,7 @@ import PremiumService from "../../services/premium";
 import { useUserStore } from "../../stores/use-user-store";
 import { SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 export const Subscription = () => {
   const user = useUserStore((state) => state.user);
   const monthlyPlan = usePricing("monthly");
@@ -102,7 +102,7 @@ export const Subscription = () => {
             paddingHorizontal: 25,
             alignSelf: "flex-start"
           }}
-          fontSize={SIZE.sm}
+          fontSize={AppFontSize.sm}
           type="accent"
           onPress={manageSubscription}
           title={
@@ -138,7 +138,7 @@ export const Subscription = () => {
             width: "100%",
             paddingHorizontal: 0
           }}
-          fontSize={SIZE.xs}
+          fontSize={AppFontSize.xs}
           height={30}
           type="secondaryAccented"
         />
diff --git a/apps/mobile/app/screens/settings/theme-selector.tsx b/apps/mobile/app/screens/settings/theme-selector.tsx
index 4a703e5f6..4f20b7b10 100644
--- a/apps/mobile/app/screens/settings/theme-selector.tsx
+++ b/apps/mobile/app/screens/settings/theme-selector.tsx
@@ -49,7 +49,7 @@ import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
 import { ToastManager, presentSheet } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { SIZE } from "../../utils/size";
+import { defaultBorderRadius, AppFontSize } from "../../utils/size";
 import { getElevationStyle } from "../../utils/elevation";
 import { MenuItemsList } from "../../utils/menu-items";
 import { IconButton } from "../../components/ui/icon-button";
@@ -158,7 +158,7 @@ function ThemeSelector() {
                 backgroundColor: colors.navigationMenu.background,
                 padding: 5,
                 paddingVertical: 3,
-                borderRadius: 5
+                borderRadius: defaultBorderRadius
               }}
             >
               {MenuItemsList.map((item, index) => (
@@ -209,7 +209,7 @@ function ThemeSelector() {
                 height: "100%",
                 width: "49.5%",
                 backgroundColor: colors.list.background,
-                borderRadius: 5,
+                borderRadius: defaultBorderRadius,
                 paddingHorizontal: 2,
                 paddingRight: 6
               }}
@@ -294,15 +294,18 @@ function ThemeSelector() {
                       ? getColorLinearShade("#000000", 0.1, true)
                       : getColorLinearShade("#f0f0f0", 0.1, true)
                 }}
-                fontSize={SIZE.xxs}
+                fontSize={AppFontSize.xxs}
               />
             </View>
           </View>
 
-          <Heading size={SIZE.sm} color={themeColors.primary.heading}>
+          <Heading size={AppFontSize.sm} color={themeColors.primary.heading}>
             {item.name}
           </Heading>
-          <Paragraph size={SIZE.xs} color={themeColors.secondary?.paragraph}>
+          <Paragraph
+            size={AppFontSize.xs}
+            color={themeColors.secondary?.paragraph}
+          >
             {strings.by()} {item.authors?.[0].name}
           </Paragraph>
         </TouchableOpacity>
@@ -369,7 +372,7 @@ function ThemeSelector() {
                   colorScheme === "" || !colorScheme ? "accent" : "secondary"
                 }
                 title={strings.all()}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 onPress={() => {
                   setColorScheme("");
                 }}
@@ -379,7 +382,7 @@ function ThemeSelector() {
                 height={30}
                 type={colorScheme === "dark" ? "accent" : "secondary"}
                 title={strings.dark()}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 onPress={() => {
                   setColorScheme("dark");
                 }}
@@ -387,7 +390,7 @@ function ThemeSelector() {
               <Button
                 style={{ borderRadius: 100, minWidth: 60 }}
                 height={30}
-                fontSize={SIZE.xs}
+                fontSize={AppFontSize.xs}
                 type={colorScheme === "light" ? "accent" : "secondary"}
                 title={strings.light()}
                 onPress={() => {
@@ -402,7 +405,7 @@ function ThemeSelector() {
               height={30}
               type={"secondaryAccented"}
               icon="folder"
-              fontSize={SIZE.xs}
+              fontSize={AppFontSize.xs}
               onPress={() => {
                 DocumentPicker.pickSingle({
                   allowMultiSelection: false
@@ -601,7 +604,7 @@ const ThemeSetter = ({
                   backgroundColor: colors?.navigationMenu.background,
                   padding: 5,
                   paddingVertical: 3,
-                  borderRadius: 5
+                  borderRadius: defaultBorderRadius
                 }}
               >
                 {MenuItemsList.map((item, index) => (
@@ -653,7 +656,7 @@ const ThemeSetter = ({
                   height: "100%",
                   width: "49.5%",
                   backgroundColor: colors?.list.background,
-                  borderRadius: 5,
+                  borderRadius: defaultBorderRadius,
                   paddingHorizontal: 2,
                   paddingRight: 6
                 }}
@@ -692,7 +695,10 @@ const ThemeSetter = ({
             </View>
           </View>
 
-          <Heading size={SIZE.md} color={themeColors.colors.primary.heading}>
+          <Heading
+            size={AppFontSize.md}
+            color={themeColors.colors.primary.heading}
+          >
             {theme.name}
           </Heading>
           <Paragraph color={themeColors.colors.primary.paragraph}>
@@ -700,7 +706,7 @@ const ThemeSetter = ({
           </Paragraph>
 
           <Paragraph
-            size={SIZE.xs}
+            size={AppFontSize.xs}
             color={themeColors.colors.secondary.paragraph}
           >
             {strings.by()} {theme.authors?.[0]?.name}
@@ -713,14 +719,14 @@ const ThemeSetter = ({
             }}
           >
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={themeColors.colors.secondary.paragraph}
             >
               ${strings.version()} {theme.version}
             </Paragraph>
 
             <Paragraph
-              size={SIZE.xs}
+              size={AppFontSize.xs}
               color={themeColors.colors.secondary.paragraph}
             >
               {theme.license}
@@ -733,7 +739,7 @@ const ThemeSetter = ({
                 }}
               >
                 <Paragraph
-                  size={SIZE.xs}
+                  size={AppFontSize.xs}
                   color={themeColors.colors.secondary.accent}
                   onPress={() => {
                     Linking.openURL(theme.homepage as string);
@@ -754,12 +760,14 @@ const ThemeSetter = ({
               paddingVertical: 12
             }}
           >
-            <Heading color={colors.accentForeground} size={SIZE.md}>
+            <Heading color={colors.accentForeground} size={AppFontSize.md}>
               {darkTheme.id === theme.id
                 ? strings.appliedDark()
                 : strings.appliedLight()}
             </Heading>
-            <Paragraph size={SIZE.xs}>({strings.tapToApplyAgain()})</Paragraph>
+            <Paragraph size={AppFontSize.xs}>
+              ({strings.tapToApplyAgain()})
+            </Paragraph>
           </Pressable>
         ) : (
           <Button
diff --git a/apps/mobile/app/screens/settings/title-format.tsx b/apps/mobile/app/screens/settings/title-format.tsx
index f68578043..5c3ec8271 100644
--- a/apps/mobile/app/screens/settings/title-format.tsx
+++ b/apps/mobile/app/screens/settings/title-format.tsx
@@ -23,7 +23,7 @@ import React from "react";
 import { TextInput } from "react-native";
 import Paragraph from "../../components/ui/typography/paragraph";
 import { useThemeColors } from "@notesnook/theme";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { strings } from "@notesnook/intl";
 
 export const TitleFormat = () => {
@@ -52,7 +52,7 @@ export const TitleFormat = () => {
       <Paragraph
         style={{ marginTop: 2 }}
         color={colors.secondary.paragraph}
-        size={SIZE.xs}
+        size={AppFontSize.xs}
       >
         {strings.titleFormattingGuide()}
       </Paragraph>
diff --git a/apps/mobile/app/screens/settings/user-section.js b/apps/mobile/app/screens/settings/user-section.js
index 1433623cd..8766f082e 100644
--- a/apps/mobile/app/screens/settings/user-section.js
+++ b/apps/mobile/app/screens/settings/user-section.js
@@ -33,7 +33,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../../stores/use-user-store";
 import { SUBSCRIPTION_STATUS_STRINGS } from "../../utils/constants";
-import { SIZE } from "../../utils/size";
+import { AppFontSize } from "../../utils/size";
 import { SectionItem } from "./section-item";
 import { strings } from "@notesnook/intl";
 
@@ -174,7 +174,10 @@ const SettingsUserSection = ({ item }) => {
                   }}
                 >
                   {premium ? (
-                    <Heading color={colors.primary.accent} size={SIZE.sm}>
+                    <Heading
+                      color={colors.primary.accent}
+                      size={AppFontSize.sm}
+                    >
                       {SUBSCRIPTION_STATUS_STRINGS[
                         user.subscription?.type
                       ]?.toUpperCase() || strings.basic()}
@@ -204,15 +207,18 @@ const SettingsUserSection = ({ item }) => {
                       });
                     }}
                     color={colors.primary.heading}
-                    size={SIZE.lg}
+                    size={AppFontSize.lg}
                   >
                     {userProfile?.fullName
                       ? userProfile.fullName + " "
                       : strings.setYourName() + " "}
-                    <AppIcon name="pencil" size={SIZE.lg} />
+                    <AppIcon name="pencil" size={AppFontSize.lg} />
                   </Paragraph>
 
-                  <Paragraph color={colors.primary.heading} size={SIZE.xs}>
+                  <Paragraph
+                    color={colors.primary.heading}
+                    size={AppFontSize.xs}
+                  >
                     {user?.email}
                   </Paragraph>
 
@@ -221,7 +227,7 @@ const SettingsUserSection = ({ item }) => {
                       flexWrap: "wrap",
                       marginTop: 5
                     }}
-                    size={SIZE.xs}
+                    size={AppFontSize.xs}
                     color={colors.secondary.heading}
                   >
                     {!user ? (
@@ -233,7 +239,7 @@ const SettingsUserSection = ({ item }) => {
                           : strings.synced()}{" "}
                         <TimeSince
                           style={{
-                            fontSize: SIZE.xs,
+                            fontSize: AppFontSize.xs,
                             color: colors.secondary.paragraph
                           }}
                           time={lastSynced}
diff --git a/apps/mobile/app/services/message.js b/apps/mobile/app/services/message.js
index c6950621f..0a47e71fb 100644
--- a/apps/mobile/app/services/message.js
+++ b/apps/mobile/app/services/message.js
@@ -17,20 +17,18 @@ 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 React from "react";
 import { Platform } from "react-native";
+import { AuthMode } from "../components/auth/common";
+import { Update } from "../components/sheets/update";
 import { verifyUser } from "../screens/settings/functions";
 import { useMessageStore } from "../stores/use-message-store";
-import {
-  eOpenLoginDialog,
-  eOpenRateDialog,
-  eOpenRecoveryKeyDialog
-} from "../utils/events";
+import { eOpenRateDialog, eOpenRecoveryKeyDialog } from "../utils/events";
 import { eSendEvent, presentSheet } from "./event-manager";
+import Navigation from "./navigation";
 import PremiumService from "./premium";
 import SettingsService from "./settings";
-import { Update } from "../components/sheets/update";
-import { strings } from "@notesnook/intl";
 
 const rateAppMessage = {
   visible: true,
@@ -82,7 +80,9 @@ const loginMessage = {
   message: strings.loginMessage(),
   actionText: strings.loginMessageActionText(),
   onPress: () => {
-    eSendEvent(eOpenLoginDialog);
+    Navigation.navigate("Auth", {
+      mode: AuthMode.login
+    });
   },
   data: {},
   icon: "account-outline",
diff --git a/apps/mobile/app/services/navigation.ts b/apps/mobile/app/services/navigation.ts
index 7e1e0a831..2609275d3 100755
--- a/apps/mobile/app/services/navigation.ts
+++ b/apps/mobile/app/services/navigation.ts
@@ -31,7 +31,11 @@ import { useReminderStore } from "../stores/use-reminder-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useTrashStore } from "../stores/use-trash-store";
 import { eOnRefreshSearch, eUpdateNotebookRoute } from "../utils/events";
-import { appNavigatorRef, fluidTabsRef } from "../utils/global-refs";
+import {
+  appNavigatorRef,
+  fluidTabsRef,
+  rootNavigatorRef
+} from "../utils/global-refs";
 import { eSendEvent } from "./event-manager";
 
 /**
@@ -123,21 +127,21 @@ function queueRoutesForUpdate(...routesToUpdate: RouteName[]) {
 
 function navigate<T extends RouteName>(screen: T, params?: RouteParams[T]) {
   console.log(`Navigation.navigate ${screen} route`);
-  appNavigatorRef.current?.navigate(screen as any, params);
+  rootNavigatorRef.current?.navigate(screen as any, params);
 }
 
 function goBack() {
-  appNavigatorRef.current?.goBack();
+  rootNavigatorRef.current?.goBack();
 }
 
 function push<T extends RouteName>(screen: T, params: RouteParams[T]) {
   console.log(`Navigation.push ${screen} route`);
-  appNavigatorRef.current?.dispatch(StackActions.push(screen as any, params));
+  rootNavigatorRef.current?.dispatch(StackActions.push(screen as any, params));
 }
 
 function replace<T extends RouteName>(screen: T, params: RouteParams[T]) {
   console.log(`Navigation.replace ${screen} route`);
-  appNavigatorRef.current?.dispatch(
+  rootNavigatorRef.current?.dispatch(
     StackActions.replace(screen as string, params)
   );
 }
diff --git a/apps/mobile/app/stores/create-notebook-tree-stores.ts b/apps/mobile/app/stores/create-notebook-tree-stores.ts
index 6065453b7..173744252 100644
--- a/apps/mobile/app/stores/create-notebook-tree-stores.ts
+++ b/apps/mobile/app/stores/create-notebook-tree-stores.ts
@@ -25,6 +25,7 @@ export type TreeItem = {
   parentId: string;
   notebook: Notebook;
   depth: number;
+  hasChildren: boolean;
 };
 
 function removeTreeItem(tree: TreeItem[], id: string) {
@@ -71,11 +72,25 @@ export function createNotebookTreeStores(
         tree: newTree
       });
     },
-    addNotebooks: (parentId: string, notebooks: Notebook[], depth: number) => {
+    addNotebooks: async (
+      parentId: string,
+      notebooks: Notebook[],
+      depth: number
+    ) => {
       const parentIndex = get().tree.findIndex(
         (item) => item.notebook.id === parentId
       );
 
+      const items = await db.relations
+        .from(
+          {
+            type: "notebook",
+            ids: notebooks.map((item) => item.id)
+          },
+          "notebook"
+        )
+        .get();
+
       let newTree = get().tree.slice();
       for (const item of newTree) {
         if (item.parentId === parentId) {
@@ -89,7 +104,10 @@ export function createNotebookTreeStores(
           return {
             parentId,
             notebook,
-            depth: depth
+            depth: depth,
+            hasChildren: items.some((item) => {
+              return item.fromId === notebook.id;
+            })
           };
         })
       );
@@ -111,6 +129,7 @@ export function createNotebookTreeStores(
         },
         "notebook"
       ).selector;
+
       const grouped = await selector.sorted(
         db.settings.getGroupOptions("notebooks")
       );
diff --git a/apps/mobile/app/stores/use-navigation-store.ts b/apps/mobile/app/stores/use-navigation-store.ts
index 55c47d56c..f9885afd7 100644
--- a/apps/mobile/app/stores/use-navigation-store.ts
+++ b/apps/mobile/app/stores/use-navigation-store.ts
@@ -52,8 +52,6 @@ export type AppLockRouteParams = {
 
 export type AuthParams = {
   mode: number;
-  title: string;
-  canGoBack?: boolean;
 };
 
 export interface RouteParams extends ParamListBase {
@@ -73,14 +71,16 @@ export interface RouteParams extends ParamListBase {
     route: RouteName;
     items?: FilteredSelector<Item>;
   };
-  Settings: GenericRouteParam;
   TaggedNotes: NotesScreenParams;
   ColoredNotes: NotesScreenParams;
   TopicNotes: NotesScreenParams;
   Monographs: NotesScreenParams;
-  AppLock: AppLockRouteParams;
   Reminders: GenericRouteParam;
   SettingsGroup: GenericRouteParam;
+  FluidPanelsView: GenericRouteParam;
+  AppLock: GenericRouteParam;
+  Settings: GenericRouteParam;
+  Auth: AuthParams;
 }
 
 export type RouteName = keyof RouteParams;
diff --git a/apps/mobile/app/utils/functions.ts b/apps/mobile/app/utils/functions.ts
index c58a6b1a5..1992aad3b 100644
--- a/apps/mobile/app/utils/functions.ts
+++ b/apps/mobile/app/utils/functions.ts
@@ -31,6 +31,18 @@ import { useTagStore } from "../stores/use-tag-store";
 import { eOnNotebookUpdated, eUpdateNoteInEditor } from "./events";
 import { getParentNotebookId } from "./notebooks";
 
+export function getObfuscatedEmail(email: string) {
+  if (!email) return "";
+  const [username, provider] = email.split("@");
+  if (username.length === 1) return `****@${provider}`;
+  return email.replace(/(.{3})(.*)(?=@)/, function (gp1, gp2, gp3) {
+    for (let i = 0; i < gp3.length; i++) {
+      gp2 += "*";
+    }
+    return gp2;
+  });
+}
+
 function confirmDeleteAllNotes(
   items: string[],
   type: "notebook",
diff --git a/apps/mobile/app/utils/global-refs.ts b/apps/mobile/app/utils/global-refs.ts
index 4c3c9c7e1..c41e8286e 100644
--- a/apps/mobile/app/utils/global-refs.ts
+++ b/apps/mobile/app/utils/global-refs.ts
@@ -21,14 +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 { RouteParams } from "../stores/use-navigation-store";
+import { RootRouteParams, RouteParams } from "../stores/use-navigation-store";
 
 export const inputRef = createRef<TextInput>();
-export const rootNavigatorRef = createNavigationContainerRef<{
-  FluidPanelsView: undefined;
-  AppLock: undefined;
-  Settings: undefined;
-}>();
+export const rootNavigatorRef = createNavigationContainerRef<RootRouteParams>();
 export const appNavigatorRef = createNavigationContainerRef<RouteParams>();
 export const fluidTabsRef = createRef<TabsRef>();
 export const editorRef = createRef<View>();
diff --git a/apps/mobile/app/utils/size/index.js b/apps/mobile/app/utils/size/index.js
index da3d77e46..97452348a 100644
--- a/apps/mobile/app/utils/size/index.js
+++ b/apps/mobile/app/utils/size/index.js
@@ -96,18 +96,18 @@ function getSize() {
   };
 }
 
-export const SIZE = getSize();
+export const AppFontSize = getSize();
 
 export function updateSize() {
   const newSize = getSize();
-  for (const key in SIZE) {
-    SIZE[key] = newSize[key];
+  for (const key in AppFontSize) {
+    AppFontSize[key] = newSize[key];
   }
   ph = normalize(10) * scale.fontScale;
   pv = normalize(10) * scale.fontScale;
 }
 
-export const br = 8; // border radius
+export const defaultBorderRadius = 8; // border radius
 export var ph = normalize(10); // padding horizontal
 export var pv = normalize(10); // padding vertical
 export const opacity = 0.5; // active opacity
diff --git a/apps/mobile/native/fonts/MaterialCommunityIcons.ttf b/apps/mobile/native/fonts/MaterialCommunityIcons.ttf
index c0fa3e2f8..5ad88d663 100644
Binary files a/apps/mobile/native/fonts/MaterialCommunityIcons.ttf and b/apps/mobile/native/fonts/MaterialCommunityIcons.ttf differ
diff --git a/apps/mobile/scripts/optimize-fonts.mjs b/apps/mobile/scripts/optimize-fonts.mjs
index bc0e0b0a6..c57f7ffc1 100644
--- a/apps/mobile/scripts/optimize-fonts.mjs
+++ b/apps/mobile/scripts/optimize-fonts.mjs
@@ -92,7 +92,8 @@ const EXTRA_ICON_NAMES = [
   "home-outline",
   "checkbox-blank-outline",
   "checkbox-outline",
-  "checkbox-intermediate"
+  "checkbox-intermediate",
+  "dots-vertical"
 ];
 
 const __filename = fileURLToPath(import.meta.url);
diff --git a/apps/mobile/share/add-notebooks.jsx b/apps/mobile/share/add-notebooks.jsx
index f97dedd26..9d0c3b869 100644
--- a/apps/mobile/share/add-notebooks.jsx
+++ b/apps/mobile/share/add-notebooks.jsx
@@ -23,6 +23,7 @@ import { Text, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useDBItem } from "../app/hooks/use-db-item";
 import { useShareStore } from "./store";
+import { defaultBorderRadius } from "../app/utils/size";
 
 export const AddNotebooks = ({ onPress }) => {
   const { colors } = useThemeColors();
@@ -39,7 +40,7 @@ export const AddNotebooks = ({ onPress }) => {
         borderWidth: 1,
         borderColor: colors.secondary.background,
         justifyContent: "center",
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         marginBottom: 10,
         paddingVertical: 10,
         paddingTop: 5
diff --git a/apps/mobile/share/add-tags.jsx b/apps/mobile/share/add-tags.jsx
index de72479b1..84f4bc695 100644
--- a/apps/mobile/share/add-tags.jsx
+++ b/apps/mobile/share/add-tags.jsx
@@ -22,6 +22,7 @@ import { Text, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useDBItem } from "../app/hooks/use-db-item";
 import { useShareStore } from "./store";
+import { defaultBorderRadius } from "../app/utils/size";
 
 export const AddTags = ({ onPress }) => {
   const { colors } = useThemeColors();
@@ -39,7 +40,7 @@ export const AddTags = ({ onPress }) => {
         borderWidth: 1,
         borderColor: colors.secondary.background,
         justifyContent: "center",
-        borderRadius: 5,
+        borderRadius: defaultBorderRadius,
         marginBottom: 10
       }}
     >
diff --git a/apps/mobile/share/editor.js b/apps/mobile/share/editor.js
index edd08eb35..1772ad244 100644
--- a/apps/mobile/share/editor.js
+++ b/apps/mobile/share/editor.js
@@ -31,6 +31,7 @@ import {
   eUnSubscribeEvent
 } from "../app/services/event-manager";
 import { eOnLoadNote } from "../app/utils/events";
+import { defaultBorderRadius } from "../app/utils/size";
 
 const EditorMobileSourceUrl =
   Platform.OS === "android"
@@ -233,7 +234,7 @@ export const Editor = ({ onChange, onLoad, editorRef }) => {
               height: 16,
               width: "100%",
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           />
@@ -243,7 +244,7 @@ export const Editor = ({ onChange, onLoad, editorRef }) => {
               height: 16,
               width: "100%",
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           />
@@ -253,7 +254,7 @@ export const Editor = ({ onChange, onLoad, editorRef }) => {
               height: 16,
               width: "60%",
               backgroundColor: colors.secondary.background,
-              borderRadius: 5,
+              borderRadius: defaultBorderRadius,
               marginTop: 10
             }}
           />
diff --git a/apps/mobile/share/share.js b/apps/mobile/share/share.js
index d3cbb2ab5..fbb95197f 100644
--- a/apps/mobile/share/share.js
+++ b/apps/mobile/share/share.js
@@ -52,7 +52,7 @@ import { eSendEvent } from "../app/services/event-manager";
 import { FILE_SIZE_LIMIT, IMAGE_SIZE_LIMIT } from "../app/utils/constants";
 import { eOnLoadNote } from "../app/utils/events";
 import { NoteBundle } from "../app/utils/note-bundle";
-import { SIZE } from "../app/utils/size";
+import { defaultBorderRadius, AppFontSize } from "../app/utils/size";
 import { AddNotebooks } from "./add-notebooks";
 import { AddTags } from "./add-tags";
 import { Editor } from "./editor";
@@ -492,7 +492,7 @@ const ShareView = () => {
                         flexShrink: 1,
                         flexGrow: 1,
                         fontFamily: "OpenSans-SemiBold",
-                        fontSize: SIZE.lg,
+                        fontSize: AppFontSize.lg,
                         paddingBottom: 0,
                         paddingTop: 0
                       }}
@@ -507,7 +507,7 @@ const ShareView = () => {
                         flexShrink: 1,
                         flexGrow: 1,
                         fontFamily: "OpenSans-SemiBold",
-                        fontSize: SIZE.lg,
+                        fontSize: AppFontSize.lg,
                         paddingBottom: 0,
                         paddingTop: 0,
                         color: colors.primary.heading
@@ -562,7 +562,7 @@ const ShareView = () => {
                               style={{
                                 width: 100,
                                 height: 100,
-                                borderRadius: 5,
+                                borderRadius: defaultBorderRadius,
                                 backgroundColor: "black",
                                 marginRight: 6
                               }}
@@ -578,7 +578,7 @@ const ShareView = () => {
                             }}
                             onPress={() => onRemoveFile(item)}
                             style={{
-                              borderRadius: 5,
+                              borderRadius: defaultBorderRadius,
                               backgroundColor: colors.secondary.background,
                               flexDirection: "row",
                               borderWidth: 1,
@@ -597,7 +597,7 @@ const ShareView = () => {
                             />
 
                             <Paragraph
-                              size={SIZE.xs}
+                              size={AppFontSize.xs}
                               color={colors.primary.paragraph}
                               style={{
                                 marginLeft: 4,
@@ -614,7 +614,7 @@ const ShareView = () => {
 
                     <Paragraph
                       color={colors.secondary.paragraph}
-                      size={SIZE.xs}
+                      size={AppFontSize.xs}
                       style={{
                         marginTop: 6
                       }}
@@ -847,7 +847,7 @@ const AppendNote = ({ id, onLoad }) => {
 
   return !item ? null : (
     <Paragraph
-      size={SIZE.xs}
+      size={AppFontSize.xs}
       color={colors.secondary.paragraph}
       style={{
         paddingHorizontal: 12,
@@ -857,7 +857,7 @@ const AppendNote = ({ id, onLoad }) => {
     >
       Above content will append to{" "}
       <Paragraph
-        size={SIZE.xs}
+        size={AppFontSize.xs}
         style={{
           color: colors.primary.accent,
           fontWeight: "bold"
diff --git a/packages/editor-mobile/public/fonts/Inter-Black.ttf b/packages/editor-mobile/public/fonts/Inter-Black.ttf
new file mode 100644
index 000000000..69762d79c
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Black.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-BlackItalic.ttf b/packages/editor-mobile/public/fonts/Inter-BlackItalic.ttf
new file mode 100644
index 000000000..c15c3ba1b
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-BlackItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-Bold.ttf b/packages/editor-mobile/public/fonts/Inter-Bold.ttf
new file mode 100644
index 000000000..9fb9b751e
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Bold.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-BoldItalic.ttf b/packages/editor-mobile/public/fonts/Inter-BoldItalic.ttf
new file mode 100644
index 000000000..8d050001a
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-BoldItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-ExtraBold.ttf b/packages/editor-mobile/public/fonts/Inter-ExtraBold.ttf
new file mode 100644
index 000000000..0fdf1e051
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-ExtraBold.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-ExtraBoldItalic.ttf b/packages/editor-mobile/public/fonts/Inter-ExtraBoldItalic.ttf
new file mode 100644
index 000000000..b1e2eae3e
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-ExtraBoldItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-ExtraLight.ttf b/packages/editor-mobile/public/fonts/Inter-ExtraLight.ttf
new file mode 100644
index 000000000..a758a018b
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-ExtraLight.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-ExtraLightItalic.ttf b/packages/editor-mobile/public/fonts/Inter-ExtraLightItalic.ttf
new file mode 100644
index 000000000..647ea6ae0
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-ExtraLightItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-Italic.ttf b/packages/editor-mobile/public/fonts/Inter-Italic.ttf
new file mode 100644
index 000000000..e7ed211d2
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Italic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-Light.ttf b/packages/editor-mobile/public/fonts/Inter-Light.ttf
new file mode 100644
index 000000000..2e0739314
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Light.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-LightItalic.ttf b/packages/editor-mobile/public/fonts/Inter-LightItalic.ttf
new file mode 100644
index 000000000..e711ef8c8
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-LightItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-Medium.ttf b/packages/editor-mobile/public/fonts/Inter-Medium.ttf
new file mode 100644
index 000000000..458cd0601
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Medium.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-MediumItalic.ttf b/packages/editor-mobile/public/fonts/Inter-MediumItalic.ttf
new file mode 100644
index 000000000..22b898df3
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-MediumItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-Regular.ttf b/packages/editor-mobile/public/fonts/Inter-Regular.ttf
new file mode 100644
index 000000000..b7aaca8de
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Regular.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-SemiBold.ttf b/packages/editor-mobile/public/fonts/Inter-SemiBold.ttf
new file mode 100644
index 000000000..47f8ab1d6
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-SemiBold.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-SemiBoldItalic.ttf b/packages/editor-mobile/public/fonts/Inter-SemiBoldItalic.ttf
new file mode 100644
index 000000000..3f704a208
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-SemiBoldItalic.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-Thin.ttf b/packages/editor-mobile/public/fonts/Inter-Thin.ttf
new file mode 100644
index 000000000..4cc53b314
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-Thin.ttf differ
diff --git a/packages/editor-mobile/public/fonts/Inter-ThinItalic.ttf b/packages/editor-mobile/public/fonts/Inter-ThinItalic.ttf
new file mode 100644
index 000000000..f6527437a
Binary files /dev/null and b/packages/editor-mobile/public/fonts/Inter-ThinItalic.ttf differ
diff --git a/packages/intl/locale/pseudo-LOCALE.po b/packages/intl/locale/pseudo-LOCALE.po
index d0955f94c..f4aa67c5c 100644
--- a/packages/intl/locale/pseudo-LOCALE.po
+++ b/packages/intl/locale/pseudo-LOCALE.po
@@ -19,7 +19,7 @@ msgstr ""
 
 #: src/strings.ts:148
 msgid " Unlock with password once to enable biometric access."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1922
 msgid " Upgrade to Notesnook Pro to add more notebooks."
@@ -66,7 +66,7 @@ msgstr ""
 #. placeholder {0}: version ? `v${version} ` : "New version"
 #: src/strings.ts:524
 msgid "{0} Highlights 🎉"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1734
 msgid "{count, plural, one {# error occured} other {# errors occured}}"
@@ -277,7 +277,7 @@ msgstr ""
 
 #: generated/actions.ts:121
 msgid "{count, plural, one {Item unpublished} other {# items unpublished}}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2407
 msgid "{count, plural, one {Move all notes in this notebook to trash} other {Move all notes in these notebooks to trash}}"
@@ -474,7 +474,7 @@ msgstr ""
 
 #: generated/do-actions.ts:107
 msgid "{count, plural, one {Unpublish note} other {Unpublish # notes}}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1545
 msgid "{days, plural, one {1 day} other {# days}}"
@@ -514,7 +514,7 @@ msgstr ""
 
 #: src/strings.ts:589
 msgid "{mode, select, repeat {Repeat} once {Once} permanent {Permanent} other {Unknown mode}}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1957
 msgid "{n} {added, plural, one {added to 1 notebook} other {added to # notebooks}} and {removed, plural, one {removed from 1 notebook} other {removed from # notebooks}}."
@@ -534,7 +534,7 @@ msgstr ""
 
 #: src/strings.ts:462
 msgid "{notes, plural, one {Export note} other {Export # notes}}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1687
 msgid "{percentage}% updating..."
@@ -546,7 +546,7 @@ msgstr ""
 
 #: src/strings.ts:1319
 msgid "{platform, select, android {Backup file saved in \"Notesnook backups\" folder on your phone.} other {Backup file is saved in File Manager/Notesnook folder}}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2337
 msgid "{selected} selected"
@@ -566,7 +566,7 @@ msgstr ""
 
 #: src/strings.ts:773
 msgid "{type} does not match"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1580
 msgid "{words, plural, one {# word} other {# words}}"
@@ -594,7 +594,7 @@ msgstr ""
 
 #: src/strings.ts:993
 msgid "2FA code sent via {method}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1826
 msgid "6 digit code"
@@ -618,7 +618,7 @@ msgstr ""
 
 #: src/strings.ts:1274
 msgid "About"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1009
 msgid "Account"
@@ -658,7 +658,7 @@ msgstr ""
 
 #: src/strings.ts:1489
 msgid "Add a short note"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1581
 msgid "Add a tag"
@@ -694,7 +694,7 @@ msgstr ""
 
 #: src/strings.ts:921
 msgid "Add tags to multiple notes at once"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2225
 msgid "Add to dictionary"
@@ -706,7 +706,7 @@ msgstr ""
 
 #: src/strings.ts:960
 msgid "Add your first notebook"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2152
 msgid "Advanced"
@@ -734,7 +734,7 @@ msgstr ""
 
 #: src/strings.ts:91
 msgid "All attachments are end-to-end encrypted."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2384
 msgid "All cached attachments have been cleared."
@@ -754,7 +754,7 @@ msgstr ""
 
 #: src/strings.ts:727
 msgid "All logs are local only and are not sent to any server. You can share the logs from here with us if you face an issue to help us find the root cause."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1618
 msgid "All server urls are required."
@@ -790,7 +790,7 @@ msgstr ""
 
 #: src/strings.ts:108
 msgid "Already have an account?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2202
 msgid "Amount"
@@ -802,7 +802,7 @@ msgstr ""
 
 #: src/strings.ts:103
 msgid "and "
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1772
 msgid "and get a chance to win free promo codes."
@@ -814,7 +814,7 @@ msgstr ""
 
 #: src/strings.ts:252
 msgid "App data has been cleared. Kindly relaunch the app to login again."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1168
 #: src/strings.ts:1674
@@ -832,7 +832,7 @@ msgstr ""
 
 #: src/strings.ts:1282
 msgid "App version"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1755
 msgid "App will reload in {sec} seconds"
@@ -852,7 +852,7 @@ msgstr ""
 
 #: src/strings.ts:449
 msgid "Apply changes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2025
 msgid "Applying changes"
@@ -868,7 +868,7 @@ msgstr ""
 
 #: src/strings.ts:1306
 msgid "Are you sure you want to clear trash?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1523
 msgid "Are you sure you want to logout and clear all data stored on THIS DEVICE?"
@@ -892,7 +892,7 @@ msgstr ""
 
 #: src/strings.ts:1115
 msgid "Ask every time"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2014
 msgid "Assign color"
@@ -904,7 +904,7 @@ msgstr ""
 
 #: src/strings.ts:425
 msgid "Atleast 8 characters required"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2326
 msgid "Attach image from URL"
@@ -942,7 +942,7 @@ msgstr ""
 #: src/strings.ts:320
 #: src/strings.ts:895
 msgid "Attachments"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1865
 msgid "Attachments cache cleared!"
@@ -954,7 +954,7 @@ msgstr ""
 
 #: src/strings.ts:748
 msgid "Audios"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1607
 msgid "Auth server"
@@ -982,7 +982,7 @@ msgstr ""
 
 #: src/strings.ts:1334
 msgid "Authentication failed"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2078
 msgid "Auto"
@@ -1003,7 +1003,7 @@ msgstr ""
 
 #: src/strings.ts:1347
 msgid "Automatic backups are off"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1986
 msgid "Automatic backups disabled"
@@ -1011,7 +1011,7 @@ msgstr ""
 
 #: src/strings.ts:1206
 msgid "Automatic backups with attachments"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2088
 msgid "Automatic updates"
@@ -1019,7 +1019,7 @@ msgstr ""
 
 #: src/strings.ts:1123
 msgid "Automatically clear trash after a certain period of time"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2090
 msgid "Automatically download & install updates in the background without prompting first."
@@ -1031,7 +1031,7 @@ msgstr ""
 
 #: src/strings.ts:1106
 msgid "Automatically switch between light and dark themes based on your system settings"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2135
 msgid "Available on iOS"
@@ -1047,7 +1047,7 @@ msgstr ""
 
 #: src/strings.ts:1078
 msgid "Background sync (experimental)"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2084
 msgid "Backup"
@@ -1063,7 +1063,7 @@ msgstr ""
 
 #: src/strings.ts:1317
 msgid "Backup complete"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1542
 msgid "Backup directory not selected"
@@ -1071,7 +1071,7 @@ msgstr ""
 
 #: src/strings.ts:1218
 msgid "Backup encryption"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1839
 msgid "Backup files have .nnbackup extension"
@@ -1079,7 +1079,7 @@ msgstr ""
 
 #: src/strings.ts:870
 msgid "Backup is encrypted"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1595
 msgid "Backup is encrypted, decrypting..."
@@ -1095,7 +1095,7 @@ msgstr ""
 
 #: src/strings.ts:877
 msgid "Backup restored"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1900
 msgid "Backup saved at {path}"
@@ -1103,7 +1103,7 @@ msgstr ""
 
 #: src/strings.ts:1329
 msgid "Backup successful"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2085
 msgid "Backup with attachments"
@@ -1115,7 +1115,7 @@ msgstr ""
 
 #: src/strings.ts:532
 msgid "Basic"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1774
 msgid "Because where's the fun in nookin' alone?"
@@ -1123,6 +1123,10 @@ msgstr ""
 
 #: src/strings.ts:1109
 msgid "Behavior"
+msgstr "<<<<<<< HEAD"
+
+#: src/strings.ts:2120
+msgid "Behaviour"
 msgstr ""
 
 #: src/strings.ts:2117
@@ -1159,7 +1163,7 @@ msgstr ""
 
 #: src/strings.ts:1171
 msgid "Biometrics not enrolled"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2235
 msgid "Bold"
@@ -1183,7 +1187,7 @@ msgstr ""
 
 #: src/strings.ts:101
 msgid "By signing up, you agree to our "
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2314
 msgid "Callout"
@@ -1199,7 +1203,7 @@ msgstr ""
 
 #: src/strings.ts:545
 msgid "Cancel login"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1807
 msgid "Cancel subscription"
@@ -1207,7 +1211,7 @@ msgstr ""
 
 #: src/strings.ts:509
 msgid "Cancel upload"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2280
 msgid "Cell background color"
@@ -1260,7 +1264,7 @@ msgstr ""
 
 #: src/strings.ts:1110
 msgid "Change how the app behaves in different situations"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2332
 msgid "Change language"
@@ -1272,7 +1276,7 @@ msgstr ""
 
 #: src/strings.ts:426
 msgid "Change password"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1799
 msgid "Change profile picture"
@@ -1316,7 +1320,7 @@ msgstr ""
 
 #: src/strings.ts:1280
 msgid "Check for updates"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2134
 msgid "Check roadmap"
@@ -1324,7 +1328,7 @@ msgstr ""
 
 #: src/strings.ts:672
 msgid "Check your spam folder if you haven't received an email yet."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2381
 msgid "Checking all attachments"
@@ -1332,7 +1336,7 @@ msgstr ""
 
 #: src/strings.ts:378
 msgid "Checking for new version"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1686
 msgid "Checking for updates"
@@ -1384,7 +1388,7 @@ msgstr ""
 
 #: src/strings.ts:1213
 msgid "Choose where to save your backups"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2043
 msgid "Choose your style"
@@ -1396,7 +1400,7 @@ msgstr ""
 
 #: src/strings.ts:999
 msgid "Clear"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1851
 msgid "Clear all cached attachments. Current cache size: {cacheSize}"
@@ -1428,7 +1432,7 @@ msgstr ""
 
 #: src/strings.ts:998
 msgid "Clear logs"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2177
 msgid "clear sessions"
@@ -1444,7 +1448,7 @@ msgstr ""
 
 #: src/strings.ts:150
 msgid "Clear vault"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1854
 msgid ""
@@ -1463,7 +1467,7 @@ msgstr ""
 
 #: src/strings.ts:239
 msgid "Click to deselect"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1848
 msgid "Click to preview"
@@ -1479,7 +1483,7 @@ msgstr ""
 
 #: src/strings.ts:1363
 msgid "Close"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2000
 msgid "Close all"
@@ -1536,7 +1540,7 @@ msgstr ""
 
 #: src/strings.ts:775
 msgid "Color #{color} already exists"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2076
 msgid "Color scheme"
@@ -1552,7 +1556,7 @@ msgstr ""
 
 #: src/strings.ts:319
 msgid "Colors"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2264
 msgid "Column properties"
@@ -1580,7 +1584,7 @@ msgstr ""
 
 #: src/strings.ts:144
 msgid "Compressed images are uploaded in Full HD resolution and usually are good enough for most use cases."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2230
 msgid "Configure"
@@ -1608,7 +1612,7 @@ msgstr ""
 
 #: src/strings.ts:1469
 msgid "Confirm pin"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2061
 msgid "Congratulations!"
@@ -1636,7 +1640,7 @@ msgstr ""
 
 #: src/strings.ts:1233
 msgid "Controls whether this device should receive reminder notifications."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1971
 msgid "Copied"
@@ -1653,7 +1657,7 @@ msgstr ""
 
 #: src/strings.ts:667
 msgid "Copy codes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2228
 msgid "Copy image"
@@ -1661,7 +1665,7 @@ msgstr ""
 
 #: src/strings.ts:897
 msgid "Copy link"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2227
 msgid "Copy link text"
@@ -1673,7 +1677,7 @@ msgstr ""
 
 #: src/strings.ts:582
 msgid "Copy to clipboard"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1600
 msgid "Copying backup files to cache"
@@ -1681,7 +1685,7 @@ msgstr ""
 
 #: src/strings.ts:1153
 msgid "CORS bypass"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1967
 msgid "Could not activate trial. Please try again later."
@@ -1725,7 +1729,7 @@ msgstr ""
 
 #: src/strings.ts:658
 msgid "Create a shortcut"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1830
 msgid "Create account"
@@ -1757,7 +1761,7 @@ msgstr ""
 
 #: src/strings.ts:513
 msgid "Create your account"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2210
 msgid "Created at"
@@ -1766,7 +1770,7 @@ msgstr ""
 #. placeholder {0}: type === "full" ? " full" : ""
 #: src/strings.ts:1326
 msgid "Creating a{0} backup"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2030
 msgid "Credentials"
@@ -1778,7 +1782,7 @@ msgstr ""
 
 #: src/strings.ts:729
 msgid "Curate the toolbar that fits your needs and matches your personality."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1817
 msgid "Current note"
@@ -1794,7 +1798,7 @@ msgstr ""
 
 #: src/strings.ts:1466
 msgid "Current pin"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1754
 msgid "CURRENT PLAN"
@@ -1826,7 +1830,7 @@ msgstr ""
 
 #: src/strings.ts:1129
 msgid "Customize toolbar"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2226
 msgid "Cut"
@@ -1843,7 +1847,7 @@ msgstr ""
 
 #: src/strings.ts:1107
 msgid "Dark mode"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2077
 msgid "Dark or light, we won't judge."
@@ -1879,7 +1883,7 @@ msgstr ""
 
 #: src/strings.ts:640
 msgid "Date modified"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2023
 msgid "Date uploaded"
@@ -1907,7 +1911,7 @@ msgstr ""
 
 #: src/strings.ts:1251
 msgid "Debugging"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2374
 msgid "Decrease {title}"
@@ -1960,7 +1964,7 @@ msgstr ""
 
 #: src/strings.ts:1301
 msgid "Delete collapsed section"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2271
 msgid "Delete column"
@@ -1968,7 +1972,7 @@ msgstr ""
 
 #: src/strings.ts:1296
 msgid "Delete group"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2346
 msgid "Delete mode"
@@ -1980,7 +1984,7 @@ msgstr ""
 
 #: src/strings.ts:560
 msgid "Delete permanently"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2278
 msgid "Delete row"
@@ -2000,7 +2004,7 @@ msgstr ""
 
 #: src/strings.ts:164
 msgid "Deleted on {date}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1909
 msgid "Deleting"
@@ -2028,7 +2032,7 @@ msgstr ""
 
 #: src/strings.ts:1069
 msgid "Disable auto sync"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1992
 msgid "Disable editor margins"
@@ -2048,7 +2052,7 @@ msgstr ""
 
 #: src/strings.ts:556
 msgid "Discard"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1578
 msgid "Dismiss"
@@ -2064,7 +2068,7 @@ msgstr ""
 
 #: src/strings.ts:273
 msgid "Do you enjoy using Notesnook?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2209
 msgid "Do you want to clear the trash?"
@@ -2092,7 +2096,7 @@ msgstr ""
 
 #: src/strings.ts:95
 msgid "Don't have an account?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1813
 msgid "Don't have backup file?"
@@ -2104,7 +2108,7 @@ msgstr ""
 
 #: src/strings.ts:988
 msgid "Don't have your recovery codes?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1791
 msgid "Don't show again"
@@ -2124,7 +2128,7 @@ msgstr ""
 
 #: src/strings.ts:500
 msgid "Download"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1797
 msgid "Download all attachments"
@@ -2140,7 +2144,7 @@ msgstr ""
 
 #: src/strings.ts:507
 msgid "Download cancelled"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2189
 msgid "Download everything including attachments on sync"
@@ -2177,7 +2181,7 @@ msgstr ""
 
 #: src/strings.ts:261
 msgid "Downloading attachments"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1685
 msgid "Downloading images"
@@ -2205,7 +2209,7 @@ msgstr ""
 
 #: src/strings.ts:635
 msgid "Earliest first"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2398
 msgid "Easy access"
@@ -2217,7 +2221,7 @@ msgstr ""
 
 #: src/strings.ts:518
 msgid "Edit internal link"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2215
 #: src/strings.ts:2241
@@ -2239,7 +2243,7 @@ msgstr ""
 
 #: src/strings.ts:1463
 msgid "Email"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2411
 msgid "Email copied"
@@ -2251,7 +2255,7 @@ msgstr ""
 
 #: src/strings.ts:752
 msgid "Email not confirmed"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1534
 msgid "Email or password incorrect"
@@ -2263,7 +2267,7 @@ msgstr ""
 
 #: src/strings.ts:845
 msgid "Email updated to {email}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2321
 msgid "Embed"
@@ -2287,7 +2291,7 @@ msgstr ""
 
 #: src/strings.ts:1170
 msgid "Enable app lock"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1993
 msgid "Enable editor margins"
@@ -2315,7 +2319,7 @@ msgstr ""
 
 #: src/strings.ts:200
 msgid "Encrypted and synced"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2222
 msgid "Encrypted backup"
@@ -2327,7 +2331,7 @@ msgstr ""
 
 #: src/strings.ts:927
 msgid "Encrypting attachment"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1824
 msgid "Encryption key"
@@ -2347,7 +2351,7 @@ msgstr ""
 
 #: src/strings.ts:1065
 msgid "Enter account password to proceed."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1833
 msgid "Enter account recovery key"
@@ -2367,7 +2371,7 @@ msgstr ""
 
 #: src/strings.ts:1493
 msgid "Enter email address"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2349
 msgid "Enter embed source URL"
@@ -2375,7 +2379,7 @@ msgstr ""
 
 #: src/strings.ts:1295
 msgid "Enter full name"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1682
 msgid "Enter fullscreen"
@@ -2391,7 +2395,7 @@ msgstr ""
 
 #: src/strings.ts:779
 msgid "Enter password"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2069
 msgid "Enter pin or password to enable app lock."
@@ -2411,7 +2415,7 @@ msgstr ""
 
 #: src/strings.ts:117
 msgid "Enter the 6 digit code sent to your phone number to continue logging in"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2413
 msgid "Enter the gift code to redeem your subscription."
@@ -2427,7 +2431,7 @@ msgstr ""
 
 #: src/strings.ts:1474
 msgid "Enter your new email"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2070
 msgid "Enter your username"
@@ -2463,7 +2467,7 @@ msgstr ""
 
 #: src/strings.ts:747
 msgid "Errors"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1677
 msgid "Errors in {count} attachments"
@@ -2536,7 +2540,7 @@ msgstr ""
 
 #: src/strings.ts:215
 msgid "Exporting \"{title}\""
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1599
 msgid "Extracting files..."
@@ -2548,7 +2552,7 @@ msgstr ""
 
 #: src/strings.ts:1244
 msgid "Faced an issue or have a suggestion? Click here to create a bug report"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2383
 msgid "Failed"
@@ -2572,7 +2576,7 @@ msgstr ""
 
 #: src/strings.ts:780
 msgid "Failed to download file"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1979
 msgid "Failed to install theme."
@@ -2584,7 +2588,7 @@ msgstr ""
 
 #: src/strings.ts:855
 msgid "Failed to publish note"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1984
 msgid "Failed to register task"
@@ -2604,7 +2608,7 @@ msgstr ""
 
 #: src/strings.ts:924
 msgid "Failed to subscribe"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2184
 msgid "Failed to take backup"
@@ -2624,7 +2628,7 @@ msgstr ""
 
 #: src/strings.ts:491
 msgid "Fallback method for 2FA enabled"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2013
 msgid "Favorite"
@@ -2673,7 +2677,7 @@ msgstr ""
 
 #: src/strings.ts:1460
 msgid "Filter attachments by filename, type or hash"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1814
 msgid "Filter languages"
@@ -2709,7 +2713,7 @@ msgstr ""
 
 #: src/strings.ts:1264
 msgid "Follow us on X for updates and news about Notesnook"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2255
 msgid "Font family"
@@ -2741,7 +2745,7 @@ msgstr ""
 
 #: src/strings.ts:1090
 msgid "Force push changes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2193
 msgid ""
@@ -2764,7 +2768,7 @@ msgstr ""
 
 #: src/strings.ts:609
 msgid "Friday"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2351
 msgid "From code"
@@ -2796,7 +2800,7 @@ msgstr ""
 
 #: src/strings.ts:1277
 msgid "Get Notesnook app on your desktop and access all notes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2138
 msgid "Get Notesnook app on your iPhone and access all your notes on the go."
@@ -2812,7 +2816,7 @@ msgstr ""
 
 #: src/strings.ts:1349
 msgid "Get Notesnook Pro to enable automatic backups"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2387
 msgid "Get Priority support"
@@ -2824,7 +2828,7 @@ msgstr ""
 
 #: src/strings.ts:554
 msgid "Get started"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1866
 msgid "Getting encryption key..."
@@ -2836,7 +2840,7 @@ msgstr ""
 
 #: src/strings.ts:398
 msgid "Getting recovery codes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2143
 msgid "GNU GENERAL PUBLIC LICENSE Version 3"
@@ -2884,7 +2888,7 @@ msgstr ""
 
 #: src/strings.ts:421
 msgid "GROUP"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1868
 msgid "Group added successfully"
@@ -2896,7 +2900,7 @@ msgstr ""
 
 #: src/strings.ts:740
 msgid "Hash copied"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2190
 msgid "Having problems with sync?"
@@ -2928,7 +2932,7 @@ msgstr ""
 
 #: src/strings.ts:1167
 msgid "Hide app contents when you switch to other apps. This will also disable screenshot taking in the app."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2149
 msgid "Hide note title"
@@ -2940,7 +2944,7 @@ msgstr ""
 
 #: src/strings.ts:896
 msgid "History"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1509
 msgid "Home"
@@ -2952,7 +2956,7 @@ msgstr ""
 
 #: src/strings.ts:1299
 msgid "Homepage changed to {name}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2310
 msgid "Horizontal rule"
@@ -2988,7 +2992,7 @@ msgstr ""
 
 #: src/strings.ts:133
 msgid "I have a recovery code"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1867
 msgid "I have saved my key"
@@ -3012,7 +3016,7 @@ msgstr ""
 
 #: src/strings.ts:254
 msgid "If this continues to happen, please reach out to us via"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2094
 msgid "If true, Notesnook will automatically start up when you turn on & login to your system."
@@ -3030,7 +3034,7 @@ msgstr ""
 msgid ""
 "If you didn't get an email from us or the confirmation link isn't\n"
 "            working,"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1785
 msgid "If you don't have a recovery key, you can recover your data by restoring a Notesnook data backup file (.nnbackup)."
@@ -3042,7 +3046,7 @@ msgstr ""
 
 #: src/strings.ts:233
 msgid "If you want to ask something in general or need some assistance, we would suggest that you"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2315
 msgid "Image"
@@ -3050,7 +3054,7 @@ msgstr ""
 
 #: src/strings.ts:1113
 msgid "Image Compression"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2291
 msgid "Image properties"
@@ -3070,7 +3074,7 @@ msgstr ""
 
 #: src/strings.ts:142
 msgid "Images uploaded without compression are slow to load and take more bandwidth. We recommend compressing images unless you need image in original quality."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1563
 msgid "Immediately"
@@ -3090,7 +3094,7 @@ msgstr ""
 
 #: src/strings.ts:174
 msgid "Incoming"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1818
 msgid "Incoming note"
@@ -3098,7 +3102,7 @@ msgstr ""
 
 #: src/strings.ts:772
 msgid "Incorrect {type}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2373
 msgid "Increase {title}"
@@ -3158,7 +3162,7 @@ msgstr ""
 
 #: src/strings.ts:736
 msgid "Invalid {type}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1972
 msgid "Invalid CORS proxy url"
@@ -3175,7 +3179,7 @@ msgstr ""
 #: src/strings.ts:975
 #: src/strings.ts:984
 msgid "It may take a minute to receive your code."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1571
 msgid "It seems that your changes could not be saved. What to do next:"
@@ -3183,7 +3187,7 @@ msgstr ""
 
 #: src/strings.ts:275
 msgid "It took us a year to bring Notesnook to life. Share your experience and suggestions to help us improve it."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2236
 msgid "Italic"
@@ -3204,7 +3208,7 @@ msgstr ""
 
 #: src/strings.ts:323
 msgid "Items"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2141
 msgid "Join community"
@@ -3228,7 +3232,7 @@ msgstr ""
 
 #: src/strings.ts:1259
 msgid "Join our Telegram group to chat with other users and the team"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2049
 msgid "Join the cause"
@@ -3240,7 +3244,7 @@ msgstr ""
 
 #: src/strings.ts:558
 msgid "Keep"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2002
 msgid "Keep open"
@@ -3248,7 +3252,7 @@ msgstr ""
 
 #: src/strings.ts:1341
 msgid "Keep your data safe"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2109
 msgid "Languages"
@@ -3280,7 +3284,7 @@ msgstr ""
 
 #: src/strings.ts:272
 msgid "Learn more about Notesnook Monograph"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1543
 msgid "Legal"
@@ -3288,7 +3292,7 @@ msgstr ""
 
 #: src/strings.ts:467
 msgid "Let us know if you have faced any issue/bug while using Notesnook. We will try to fix it as soon as possible."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2142
 msgid "License"
@@ -3304,7 +3308,7 @@ msgstr ""
 
 #: src/strings.ts:713
 msgid "Light"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2336
 msgid "Line {line}, Column {column}"
@@ -3312,7 +3316,7 @@ msgstr ""
 
 #: src/strings.ts:1137
 msgid "Line spacing changed"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2240
 msgid "Link"
@@ -3324,7 +3328,7 @@ msgstr ""
 
 #: src/strings.ts:916
 msgid "Link notebooks"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2245
 msgid "Link settings"
@@ -3348,7 +3352,7 @@ msgstr ""
 
 #: src/strings.ts:586
 msgid "Linked notes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1577
 msgid "Linking to a specific block is not available for locked notes."
@@ -3360,7 +3364,7 @@ msgstr ""
 
 #: src/strings.ts:715
 msgid "Load from file"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1676
 msgid "Loading"
@@ -3369,7 +3373,7 @@ msgstr ""
 #. placeholder {0}: progress ? `(${progress})` : ""
 #: src/strings.ts:146
 msgid "Loading {0}, please wait..."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1645
 msgid "Loading editor. Please wait..."
@@ -3429,7 +3433,7 @@ msgstr ""
 
 #: src/strings.ts:892
 msgid "Locked notes cannot be published"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2174
 msgid "Log out from all other devices"
@@ -3441,7 +3445,7 @@ msgstr ""
 
 #: src/strings.ts:401
 msgid "Logging out. Please wait..."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1763
 msgid "Logging you in"
@@ -3485,7 +3489,7 @@ msgstr ""
 
 #: src/strings.ts:1394
 msgid "Long press on any item in list to enter multi-select mode."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2341
 msgid "Make task list readonly"
@@ -3537,7 +3541,7 @@ msgstr ""
 
 #: src/strings.ts:1150
 msgid "Marketing emails"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2354
 msgid "Match case"
@@ -3587,7 +3591,7 @@ msgstr ""
 
 #: src/strings.ts:867
 msgid "min"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1990
 msgid "Minimal"
@@ -3611,7 +3615,7 @@ msgstr ""
 
 #: src/strings.ts:605
 msgid "Monday"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1612
 msgid "Monograph server"
@@ -3633,7 +3637,7 @@ msgstr ""
 
 #: src/strings.ts:1399
 msgid "Monographs enable you to share your notes in a secure and private way."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1821
 msgid "month"
@@ -3654,7 +3658,7 @@ msgstr ""
 
 #: src/strings.ts:840
 msgid "Move"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2342
 msgid "Move all checked tasks to bottom"
@@ -3674,7 +3678,7 @@ msgstr ""
 
 #: src/strings.ts:886
 msgid "Move notes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2277
 msgid "Move row down"
@@ -3702,7 +3706,7 @@ msgstr ""
 
 #: src/strings.ts:875
 msgid "Name"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1669
 msgid "Native high-performance encryption"
@@ -3734,7 +3738,7 @@ msgstr ""
 
 #: src/strings.ts:519
 msgid "New color"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1827
 msgid "New Email"
@@ -3766,7 +3770,7 @@ msgstr ""
 
 #: src/strings.ts:567
 msgid "New tab"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2428
 msgid "New tag"
@@ -3778,7 +3782,7 @@ msgstr ""
 
 #: src/strings.ts:522
 msgid "New version"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2005
 msgid "Newest - oldest"
@@ -3790,7 +3794,7 @@ msgstr ""
 
 #: src/strings.ts:543
 msgid "Next"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2358
 msgid "Next match"
@@ -3830,7 +3834,7 @@ msgstr ""
 
 #: src/strings.ts:89
 msgid "No downloads in progress."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1965
 msgid "No encryption key found"
@@ -3858,7 +3862,7 @@ msgstr ""
 
 #: src/strings.ts:279
 msgid "No references found of this note"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1498
 msgid "No results found"
@@ -3882,7 +3886,7 @@ msgstr ""
 
 #: src/strings.ts:649
 msgid "None"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1995
 msgid "Normal mode"
@@ -3903,7 +3907,7 @@ msgstr ""
 
 #: src/strings.ts:803
 msgid "Note copied to clipboard"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1930
 msgid "Note does not exist"
@@ -3919,7 +3923,7 @@ msgstr ""
 
 #: src/strings.ts:833
 msgid "Note restored from history"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1566
 msgid "Note title"
@@ -3975,7 +3979,7 @@ msgstr ""
 
 #: src/strings.ts:223
 msgid "Notes exported as {path} successfully"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1731
 msgid "notes imported"
@@ -3991,7 +3995,7 @@ msgstr ""
 
 #: src/strings.ts:1051
 msgid "Notesnook Pro"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2155
 msgid ""
@@ -4009,7 +4013,7 @@ msgstr ""
 
 #: src/strings.ts:979
 msgid "Notesnook will send you an SMS with a 2FA code when prompted"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2118
 msgid "Notifications"
@@ -4017,7 +4021,7 @@ msgstr ""
 
 #: src/strings.ts:1359
 msgid "Notifications disabled"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2253
 msgid "Numbered list"
@@ -4033,7 +4037,7 @@ msgstr ""
 
 #: src/strings.ts:393
 msgid "Offline"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2208
 msgid "Okay"
@@ -4045,7 +4049,7 @@ msgstr ""
 
 #: src/strings.ts:1461
 msgid "Old password"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1816
 msgid "Older version"
@@ -4057,7 +4061,7 @@ msgstr ""
 
 #: src/strings.ts:724
 msgid "Once your password is changed, please make sure to save the new account recovery key"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1752
 msgid "Only .zip files are supported."
@@ -4077,7 +4081,7 @@ msgstr ""
 
 #: src/strings.ts:1288
 msgid "Open in browser to manage subscription"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2304
 msgid "Open in new tab"
@@ -4085,7 +4089,7 @@ msgstr ""
 
 #: src/strings.ts:570
 msgid "Open issue"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2243
 msgid "Open link"
@@ -4097,7 +4101,7 @@ msgstr ""
 
 #: src/strings.ts:1362
 msgid "Open settings"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2305
 msgid "Open source"
@@ -4117,7 +4121,7 @@ msgstr ""
 
 #: src/strings.ts:968
 msgid "Open the two-factor authentication (TOTP) app to view your authentication code."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1838
 msgid "Optional"
@@ -4125,7 +4129,7 @@ msgstr ""
 
 #: src/strings.ts:255
 msgid "or email us at"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2003
 msgid "Order by"
@@ -4138,7 +4142,7 @@ msgstr ""
 #: src/strings.ts:746
 #: src/strings.ts:750
 msgid "Orphaned"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2126
 msgid "Other"
@@ -4158,7 +4162,7 @@ msgstr ""
 
 #: src/strings.ts:44
 msgid "Partially refunded"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2382
 msgid "Passed"
@@ -4194,7 +4198,7 @@ msgstr ""
 
 #: src/strings.ts:797
 msgid "Password updated"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2062
 msgid "Password/pin"
@@ -4218,7 +4222,7 @@ msgstr ""
 
 #: src/strings.ts:776
 msgid "PDF is password protected"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1710
 msgid "phone number"
@@ -4234,7 +4238,7 @@ msgstr ""
 
 #: src/strings.ts:888
 msgid "Pin"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1671
 msgid "Pin notes in notifications drawer"
@@ -4254,7 +4258,7 @@ msgstr ""
 
 #: src/strings.ts:987
 msgid "Please confirm your identity by entering a recovery code."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:966
 #: src/strings.ts:2213
@@ -4268,7 +4272,7 @@ msgstr ""
 
 #: src/strings.ts:974
 msgid "Please confirm your identity by entering the authentication code sent to your email address."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1890
 msgid "Please download a backup of your data as your account will be cleared before recovery."
@@ -4276,7 +4280,7 @@ msgstr ""
 
 #: src/strings.ts:1494
 msgid "Please enter a valid email address"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1935
 msgid "Please enter a valid hex color (e.g. #ffffff)"
@@ -4284,7 +4288,7 @@ msgstr ""
 
 #: src/strings.ts:1495
 msgid "Please enter a valid phone number with country code"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1616
 msgid "Please enter a valid URL"
@@ -4300,7 +4304,7 @@ msgstr ""
 
 #: src/strings.ts:778
 msgid "Please enter the password to unlock the PDF and view the content."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1846
 msgid "Please enter the password to unlock this note"
@@ -4320,7 +4324,7 @@ msgstr ""
 
 #: src/strings.ts:1002
 msgid "Please enter your password to continue"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1914
 msgid "Please enter your vault password to continue"
@@ -4328,7 +4332,7 @@ msgstr ""
 
 #: src/strings.ts:756
 msgid "Please fill all the fields to continue."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1537
 msgid "Please grant notifications permission to add new reminders."
@@ -4340,7 +4344,7 @@ msgstr ""
 
 #: src/strings.ts:228
 msgid "Please note that we will respond to your issue on the given link. We recommend that you save it."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1746
 msgid "Please refer to the"
@@ -4352,7 +4356,7 @@ msgstr ""
 
 #: src/strings.ts:1378
 msgid "please send us an email from your registered email address"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2371
 msgid "Please set a table size"
@@ -4380,7 +4384,7 @@ msgstr ""
 
 #: src/strings.ts:991
 msgid "Please wait before requesting a new code"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1381
 #: src/strings.ts:1532
@@ -4397,7 +4401,7 @@ msgstr ""
 
 #: src/strings.ts:214
 msgid "Please wait while we export your notes."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1875
 msgid "Please wait while we finalize your account."
@@ -4409,7 +4413,7 @@ msgstr ""
 
 #: src/strings.ts:402
 msgid "Please wait while we log you out."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1896
 msgid "Please wait while we reset your account password."
@@ -4429,7 +4433,7 @@ msgstr ""
 
 #: src/strings.ts:1056
 msgid "Please wait while we verify your subscription"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1764
 #: src/strings.ts:1871
@@ -4442,7 +4446,7 @@ msgstr ""
 
 #: src/strings.ts:893
 msgid "Preparing note for share"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1596
 msgid "Preparing to restore backup file..."
@@ -4450,7 +4454,7 @@ msgstr ""
 
 #: src/strings.ts:420
 msgid "PRESETS"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2100
 msgid "Pressing \"—\" will hide the app in your system tray."
@@ -4470,7 +4474,7 @@ msgstr ""
 
 #: src/strings.ts:182
 msgid "Preview not available, content is encrypted."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2359
 msgid "Previous match"
@@ -4490,7 +4494,7 @@ msgstr ""
 
 #: src/strings.ts:1146
 msgid "Privacy & security"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1636
 msgid "Privacy comes first."
@@ -4522,7 +4526,7 @@ msgstr ""
 
 #: src/strings.ts:817
 msgid "privileged few"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1702
 msgid "Pro"
@@ -4538,7 +4542,7 @@ msgstr ""
 
 #: src/strings.ts:1225
 msgid "Productivity"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2114
 msgid "Profile"
@@ -4554,7 +4558,7 @@ msgstr ""
 
 #: src/strings.ts:399
 msgid "Protect your notes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2162
 msgid "Proxy"
@@ -4594,7 +4598,7 @@ msgstr ""
 
 #: src/strings.ts:1226
 msgid "Quick note notification"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1673
 msgid "Quick note widgets"
@@ -4642,7 +4646,7 @@ msgstr ""
 
 #: src/strings.ts:1269
 msgid "Read the terms of service"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1597
 msgid "Reading backup file..."
@@ -4706,7 +4710,7 @@ msgstr ""
 
 #: src/strings.ts:863
 msgid "Recovery key text file saved"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1897
 msgid "Recovery successful!"
@@ -4738,7 +4742,7 @@ msgstr ""
 
 #: src/strings.ts:511
 msgid "Regenerate"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2068
 msgid "Register"
@@ -4746,7 +4750,7 @@ msgstr ""
 
 #: src/strings.ts:424
 msgid "Release notes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2437
 msgid "Release track"
@@ -4786,7 +4790,7 @@ msgstr ""
 
 #: src/strings.ts:1231
 msgid "Reminder notifications"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1540
 msgid "Reminder time cannot be earlier than the current time."
@@ -4804,7 +4808,7 @@ msgstr ""
 
 #: src/strings.ts:1361
 msgid "Reminders cannot be set because notifications have been disabled from app settings. If you want to keep receiving reminder notifications, enable notifications for Notesnook from app settings."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1934
 msgid "Reminders will not be active on this device as it does not support notifications."
@@ -4836,7 +4840,7 @@ msgstr ""
 
 #: src/strings.ts:884
 msgid "Remove as default"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2296
 msgid "Remove attachment"
@@ -4848,7 +4852,7 @@ msgstr ""
 
 #: src/strings.ts:894
 msgid "Remove from notebook"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2436
 msgid "Remove from recents"
@@ -4888,7 +4892,7 @@ msgstr ""
 
 #: src/strings.ts:335
 msgid "Repeats daily at {date}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2356
 msgid "Replace"
@@ -4921,7 +4925,7 @@ msgstr ""
 
 #: src/strings.ts:1384
 msgid "Resend email"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1801
 msgid "Reset"
@@ -4949,7 +4953,7 @@ msgstr ""
 
 #: src/strings.ts:1131
 msgid "Reset toolbar"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1895
 msgid "Resetting account password ({progress})"
@@ -4965,7 +4969,7 @@ msgstr ""
 
 #: src/strings.ts:1300
 msgid "Restart the app to apply the changes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1574
 msgid "Restart the app."
@@ -4977,7 +4981,7 @@ msgstr ""
 
 #: src/strings.ts:1220
 msgid "Restore backup"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2385
 msgid "Restore backup?"
@@ -4985,7 +4989,7 @@ msgstr ""
 
 #: src/strings.ts:878
 msgid "Restore failed"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1591
 msgid "Restore from files"
@@ -5009,7 +5013,7 @@ msgstr ""
 
 #: src/strings.ts:377
 msgid "Restoring {collection}..."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1593
 msgid "Restoring backup..."
@@ -5025,7 +5029,7 @@ msgstr ""
 
 #: src/strings.ts:504
 msgid "Reupload"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2001
 msgid "Reveal in list"
@@ -5045,7 +5049,7 @@ msgstr ""
 
 #: src/strings.ts:1278
 msgid "Roadmap"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2029
 msgid "Root"
@@ -5065,7 +5069,7 @@ msgstr ""
 
 #: src/strings.ts:536
 msgid "Run file check"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2040
 msgid "Safe & encrypted notes"
@@ -5137,7 +5141,7 @@ msgstr ""
 
 #: src/strings.ts:490
 msgid "Save your recovery codes in a safe place. You will need them to recover your account in case you lose access to your two-factor authentication methods."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2375
 msgid "Saved"
@@ -5157,7 +5161,7 @@ msgstr ""
 
 #: src/strings.ts:785
 msgid "Saving zip file. Please wait..."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1703
 msgid "Scan the QR code with your authenticator app"
@@ -5178,7 +5182,7 @@ msgstr ""
 
 #: src/strings.ts:1485
 msgid "Search a note to link to"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2417
 msgid "Search for notes, notebooks, and tags..."
@@ -5234,7 +5238,7 @@ msgstr ""
 
 #: src/strings.ts:32
 msgid "Search in Trash"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2338
 msgid "Search languages"
@@ -5246,7 +5250,7 @@ msgstr ""
 
 #: src/strings.ts:1486
 msgid "Search or add a tag"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1815
 msgid "Search themes"
@@ -5258,7 +5262,7 @@ msgstr ""
 
 #: src/strings.ts:866
 msgid "sec"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2124
 msgid "Security & privacy"
@@ -5278,7 +5282,7 @@ msgstr ""
 
 #: src/strings.ts:1316
 msgid "Select"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1590
 msgid "Select a backup file from your device to restore backup"
@@ -5290,7 +5294,7 @@ msgstr ""
 
 #: src/strings.ts:1211
 msgid "Select backup directory"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1836
 msgid "Select backup file"
@@ -5306,7 +5310,7 @@ msgstr ""
 
 #: src/strings.ts:338
 msgid "Select day of the week to repeat the reminder."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1744
 msgid "Select files to import"
@@ -5322,7 +5326,7 @@ msgstr ""
 
 #: src/strings.ts:112
 msgid "Select how you would like to recieve the code"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2333
 msgid "Select language"
@@ -5342,7 +5346,7 @@ msgstr ""
 
 #: src/strings.ts:342
 msgid "Select nth day of the month to repeat the reminder."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1798
 msgid "Select profile picture"
@@ -5350,7 +5354,7 @@ msgstr ""
 
 #: src/strings.ts:374
 msgid "Select the folder that includes your backup files to list them here."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2111
 msgid "Select the languages the spell checker should check in."
@@ -5366,7 +5370,7 @@ msgstr ""
 
 #: src/strings.ts:269
 msgid "Self destruct"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2146
 msgid "Send"
@@ -5382,7 +5386,7 @@ msgstr ""
 
 #: src/strings.ts:130
 msgid "Send code via SMS"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1840
 msgid "Send recovery email"
@@ -5430,7 +5434,7 @@ msgstr ""
 
 #: src/strings.ts:97
 msgid "Session expired"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2172
 msgid "Sessions"
@@ -5496,7 +5500,7 @@ msgstr ""
 
 #: src/strings.ts:1179
 msgid "Setup a pin to lock the app"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2164
 msgid ""
@@ -5536,7 +5540,7 @@ msgstr ""
 
 #: src/strings.ts:155
 msgid "Share"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1672
 msgid "Share & append to notes from anywhere"
@@ -5548,7 +5552,7 @@ msgstr ""
 
 #: src/strings.ts:445
 msgid "Share note"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1768
 msgid "Share Notesnook with friends!"
@@ -5564,7 +5568,7 @@ msgstr ""
 
 #: src/strings.ts:302
 msgid "Shortcut"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1981
 msgid "Shortcut removed"
@@ -5592,7 +5596,7 @@ msgstr ""
 
 #: src/strings.ts:49
 msgid "Silent"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2307
 msgid "Sink list item"
@@ -5604,7 +5608,7 @@ msgstr ""
 
 #: src/strings.ts:541
 msgid "Skip"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1810
 msgid "Skip & go directly to the app"
@@ -5612,7 +5616,7 @@ msgstr ""
 
 #: src/strings.ts:661
 msgid "Skip introduction"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1585
 msgid "Some exported notes are locked, Unlock to export them"
@@ -5620,7 +5624,7 @@ msgstr ""
 
 #: src/strings.ts:1458
 msgid "Some notes are published"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1647
 msgid "Something went wrong"
@@ -5632,7 +5636,7 @@ msgstr ""
 
 #: src/strings.ts:527
 msgid "Sort by"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2130
 msgid "Source code"
@@ -5656,7 +5660,7 @@ msgstr ""
 
 #: src/strings.ts:1097
 msgid "Start"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1811
 msgid "Start account recovery"
@@ -5684,7 +5688,7 @@ msgstr ""
 
 #: src/strings.ts:199
 msgid "Start writing to save your note."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1582
 msgid "Start writing your note..."
@@ -5736,7 +5740,7 @@ msgstr ""
 
 #: src/strings.ts:708
 msgid "Subscribed using gift card"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2249
 msgid "Subscript"
@@ -5760,7 +5764,7 @@ msgstr ""
 
 #: src/strings.ts:604
 msgid "Sunday"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2250
 msgid "Superscript"
@@ -5768,7 +5772,7 @@ msgstr ""
 
 #: src/strings.ts:1451
 msgid "Switch to search/replace mode"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2116
 msgid "Sync"
@@ -5808,7 +5812,7 @@ msgstr ""
 
 #: src/strings.ts:259
 msgid "Syncing your data"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1683
 msgid "Syncing your notes"
@@ -5820,7 +5824,7 @@ msgstr ""
 
 #: src/strings.ts:529
 msgid "Table of contents"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2263
 msgid "Table settings"
@@ -5857,7 +5861,7 @@ msgstr ""
 
 #: src/strings.ts:1202
 msgid "Take a partial backup of your data that does not include attachments"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2318
 msgid "Take a photo using camera"
@@ -5865,7 +5869,7 @@ msgstr ""
 
 #: src/strings.ts:1355
 msgid "Take note"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1637
 msgid "Take notes privately."
@@ -5889,7 +5893,7 @@ msgstr ""
 
 #: src/strings.ts:1351
 msgid "Tap here to update to the latest version"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1573
 msgid "Tap on \"Dismiss\" and copy the contents of your note so they are not lost."
@@ -5921,7 +5925,7 @@ msgstr ""
 
 #: src/strings.ts:277
 msgid "Tap twice to confirm you have saved the recovery key."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2324
 msgid "Task list"
@@ -5956,7 +5960,7 @@ msgstr ""
 
 #: src/strings.ts:102
 msgid "Terms of Service "
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1603
 msgid "Test connection"
@@ -5984,7 +5988,7 @@ msgstr ""
 
 #: src/strings.ts:470
 msgid "Thank you for updating Notesnook! We will be applying some minor changes for a better note taking experience."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2056
 msgid "Thank you. You are the proof that privacy always comes first."
@@ -5996,7 +6000,7 @@ msgstr ""
 
 #: src/strings.ts:231
 msgid "The information above will be publically available at"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2063
 msgid "The password/pin for unlocking the app."
@@ -6008,7 +6012,7 @@ msgstr ""
 
 #: src/strings.ts:340
 msgid "The reminder will repeat every year on {date}."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1693
 msgid "The reminder will start on {date} at {time}."
@@ -6028,7 +6032,7 @@ msgstr ""
 
 #: src/strings.ts:283
 msgid "There are no blocks in this note."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2218
 msgid "These items will be **kept in your Trash for {interval} days** after which they will be permanently deleted."
@@ -6040,7 +6044,7 @@ msgstr ""
 
 #: src/strings.ts:173
 msgid "This device"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1664
 msgid "This error can be fixed by rebuilding the search index. This action won't result in any kind of data loss."
@@ -6077,7 +6081,7 @@ msgstr ""
 #: src/strings.ts:1086
 #: src/strings.ts:1095
 msgid "This must only be used for troubleshooting. Using it regularly for sync is not recommended and will lead to unexpected data loss and other issues. If you are having persistent issues with sync, please report them to us at support@streetwriters.co."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1575
 msgid "This note is locked"
@@ -6097,7 +6101,7 @@ msgstr ""
 
 #: src/strings.ts:264
 msgid "This note will be published to a public URL."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2072
 msgid "This username will be used to distinguish between different credentials in your security key. Make sure it is unique."
@@ -6113,7 +6117,7 @@ msgstr ""
 
 #: src/strings.ts:608
 msgid "Thursday"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1823
 msgid "Time"
@@ -6138,7 +6142,7 @@ msgstr ""
 
 #: src/strings.ts:1173
 msgid "To use app lock, you must enable biometrics such as Fingerprint lock or Face ID on your phone."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1793
 msgid "Toggle dark/light mode"
@@ -6166,7 +6170,7 @@ msgstr ""
 
 #: src/strings.ts:1133
 msgid "Toolbar reset to default preset"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1308
 #: src/strings.ts:1505
@@ -6187,7 +6191,7 @@ msgstr ""
 
 #: src/strings.ts:1447
 msgid "Try compact mode to fit more items on screen"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1805
 msgid "Try free for 14 days"
@@ -6235,7 +6239,7 @@ msgstr ""
 
 #: src/strings.ts:1491
 msgid "Type a keyword"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1530
 msgid "Unable to resolve download url"
@@ -6284,7 +6288,7 @@ msgstr ""
 
 #: src/strings.ts:1193
 msgid "Unlock the app with biometric authentication. This requires biometrics to be enabled on your device."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1913
 msgid "Unlock vault"
@@ -6292,7 +6296,7 @@ msgstr ""
 
 #: src/strings.ts:535
 msgid "Unlock with biometrics"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1808
 msgid "Unlock with security key"
@@ -6304,7 +6308,7 @@ msgstr ""
 
 #: src/strings.ts:1163
 msgid "Unlock your vault with biometric authentication"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1691
 msgid "Unlocking"
@@ -6324,7 +6328,7 @@ msgstr ""
 
 #: src/strings.ts:1459
 msgid "Unpublish notes to delete them"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2067
 msgid "Unregister"
@@ -6345,7 +6349,7 @@ msgstr ""
 
 #: src/strings.ts:1352
 msgid "Update now"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1899
 msgid "Upgrade now"
@@ -6365,7 +6369,7 @@ msgstr ""
 
 #: src/strings.ts:501
 msgid "Upload"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2317
 msgid "Upload from disk"
@@ -6391,7 +6395,7 @@ msgstr ""
 
 #: src/strings.ts:51
 msgid "Urgent"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2367
 msgid "URL"
@@ -6403,7 +6407,7 @@ msgstr ""
 
 #: src/strings.ts:454
 msgid "Use {keyboardShortcut}+click to select multiple notebooks"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1783
 msgid "Use a backup file"
@@ -6419,7 +6423,7 @@ msgstr ""
 
 #: src/strings.ts:964
 msgid "Use an authenticator app to generate 2FA codes."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2153
 msgid "Use custom DNS"
@@ -6427,7 +6431,7 @@ msgstr ""
 
 #: src/strings.ts:1108
 msgid "Use dark mode for the app"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1602
 msgid "Use encryption key"
@@ -6435,7 +6439,7 @@ msgstr ""
 
 #: src/strings.ts:1145
 msgid "Use markdown shortcuts in the editor"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2106
 msgid "Use native OS titlebar instead of replacing it with a custom one. Requires app restart for changes to take effect."
@@ -6491,7 +6495,7 @@ msgstr ""
 
 #: src/strings.ts:1156
 msgid "Vault"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1973
 msgid "Vault cleared"
@@ -6499,7 +6503,7 @@ msgstr ""
 
 #: src/strings.ts:801
 msgid "Vault created"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1974
 msgid "Vault deleted"
@@ -6507,7 +6511,7 @@ msgstr ""
 
 #: src/strings.ts:441
 msgid "Vault fingerprint unlock"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1912
 msgid "Vault locked"
@@ -6531,7 +6535,7 @@ msgstr ""
 
 #: src/strings.ts:1057
 msgid "Verify your subscription to Notesnook Pro"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1884
 msgid "Verifying 2FA code"
@@ -6559,7 +6563,7 @@ msgstr ""
 
 #: src/strings.ts:1255
 msgid "View and share debug logs"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1728
 msgid "View receipt"
@@ -6567,7 +6571,7 @@ msgstr ""
 
 #: src/strings.ts:1045
 msgid "View recovery codes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2133
 msgid "View source code"
@@ -6583,7 +6587,7 @@ msgstr ""
 
 #: src/strings.ts:1332
 msgid "Wait 30 seconds to try again"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1633
 msgid "Waiting for upload"
@@ -6599,7 +6603,7 @@ msgstr ""
 
 #: src/strings.ts:1372
 msgid "We have sent you an email confirmation link. Please check your email inbox. If you cannot find the email, check your spam folder."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2148
 msgid "We send you occasional promotional offers & product updates on your email (once every month)."
@@ -6611,7 +6615,7 @@ msgstr ""
 
 #: src/strings.ts:1336
 msgid "We would love to know what you think!"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2302
 msgid "Web clip settings"
@@ -6640,7 +6644,7 @@ msgstr ""
 
 #: src/strings.ts:768
 msgid "Welcome back, {email}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1869
 msgid "Welcome back!"
@@ -6652,7 +6656,7 @@ msgstr ""
 
 #: src/strings.ts:1374
 msgid "What do I do if I am not getting the email?"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1648
 msgid "What went wrong?"
@@ -6672,7 +6676,7 @@ msgstr ""
 
 #: src/strings.ts:1356
 msgid "Write something..."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1635
 msgid "Write with freedom."
@@ -6697,7 +6701,7 @@ msgstr ""
 
 #: src/strings.ts:106
 msgid "You also agree to recieve marketing emails from us which you can opt-out of from app settings."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2220
 msgid "You are editing \"{notebookTitle}\"."
@@ -6721,7 +6725,7 @@ msgstr ""
 
 #: src/strings.ts:564
 msgid "You can add as many tags as you want."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2045
 msgid "You can change the theme at any time from Settings or the side menu."
@@ -6749,7 +6753,7 @@ msgstr ""
 
 #: src/strings.ts:1390
 msgid "You can swipe left anywhere in the app to start a new note."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2034
 msgid ""
@@ -6774,7 +6778,7 @@ msgstr ""
 
 #: src/strings.ts:1432
 msgid "You can view & restore older versions of any note by going to its properties -> History."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1730
 msgid "You have {count} custom dictionary words."
@@ -6810,7 +6814,7 @@ msgstr ""
 
 #: src/strings.ts:951
 msgid "You have not set any reminders yet"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1526
 msgid "You have unsynced notes. Take a backup or sync your notes to avoid losing your critical data."
@@ -6850,7 +6854,7 @@ msgstr ""
 
 #: src/strings.ts:459
 msgid "You will be logged out from all your devices"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1832
 msgid "You will receive instructions on how to recover your account on this email"
@@ -6858,7 +6862,7 @@ msgstr ""
 
 #: src/strings.ts:458
 msgid "Your account email will be changed without affecting your subscription or any other settings."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1898
 msgid "Your account has been recovered."
@@ -6875,7 +6879,7 @@ msgstr ""
 
 #: src/strings.ts:1019
 msgid "Your account will be downgraded in {days} days"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1910
 msgid "Your backup is ready to download"
@@ -6927,7 +6931,7 @@ msgstr ""
 
 #: src/strings.ts:1385
 msgid "Your free trial is ending soon"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1759
 msgid "Your full name"
@@ -6951,7 +6955,7 @@ msgstr ""
 
 #: src/strings.ts:942
 msgid "Your notes"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1873
 msgid "Your password is always hashed before leaving this device."
@@ -6963,7 +6967,7 @@ msgstr ""
 
 #: src/strings.ts:1291
 msgid "Your profile pictrure is stored 100% end-to-end encrypted and only visible to you."
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1978
 msgid "Your refund has been issued. Please wait 24 hours before reaching out to us in case you do not receive your funds."
@@ -6979,7 +6983,7 @@ msgstr ""
 
 #: src/strings.ts:1020
 msgid "Your subscription ends on {date}"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:1976
 msgid "Your subscription has been canceled."
@@ -7007,7 +7011,7 @@ msgstr ""
 
 #: src/strings.ts:781
 msgid "Zipping"
-msgstr ""
+msgstr "<<<<<<< HEAD"
 
 #: src/strings.ts:2441
 msgid "Zoom"
diff --git a/packages/intl/src/strings.ts b/packages/intl/src/strings.ts
index bdbd1df93..bacc2ed58 100644
--- a/packages/intl/src/strings.ts
+++ b/packages/intl/src/strings.ts
@@ -386,8 +386,10 @@ export const strings = {
   readReleaseNotes: () => t`Read full release notes on Github`,
   settings: () => t`Settings`,
   notLoggedIn: () => t`Not logged in`,
+  loggedInAs: (email: string) => t`Logged in as ${email}`,
   never: () => t`Never`,
   syncing: () => t`Syncing`,
+  syncNow: () => t`Sync now`,
   syncFailed: () => t`Sync failed`,
   synced: () => t`Synced`,
   offline: () => t`Offline`,