From 56ee375ee9be05f8d80cc74c618035c4a2d5766c Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Mon, 18 May 2026 12:21:37 +0500
Subject: [PATCH] mobile: update ui

---
 apps/mobile/app/common/design/theme.ts        |  15 +-
 apps/mobile/app/components/auth/login.tsx     |   8 +-
 .../mobile/app/components/auth/two-factor.tsx |   5 +-
 .../app/components/dialog/dialog-buttons.tsx  |   4 +-
 .../list-items/headers/section-header.tsx     |   8 +-
 .../app/components/list-items/note/index.tsx  | 161 ++++++++++--------
 .../list-items/selection-wrapper/index.tsx    |  29 +++-
 apps/mobile/app/components/list/card.tsx      |   3 +-
 apps/mobile/app/components/list/empty.tsx     |  75 ++++----
 .../app/components/paywall/compare-plans.tsx  |  12 +-
 apps/mobile/app/components/paywall/index.tsx  |  74 ++++----
 .../app/components/paywall/plan-card.tsx      |   7 +-
 .../components/sheets/add-notebook/index.tsx  |  51 +++---
 .../app/components/sheets/buy-plan/index.tsx  |  10 +-
 .../app/components/sheets/sort/index.tsx      |  23 ++-
 .../mobile/app/components/side-menu/index.tsx |   2 +-
 .../app/components/side-menu/menu-item.tsx    |   2 +-
 .../components/side-menu/notebook-item.tsx    |   6 +-
 .../side-menu/side-menu-list-empty.tsx        |   9 +-
 .../side-menu/side-menu-notebooks.tsx         |   2 +-
 .../components/side-menu/side-menu-tags.tsx   |   4 +-
 .../components/side-menu/tab-bar-button.tsx   |   8 +-
 .../app/components/ui/input/form-input.tsx    |   3 +-
 .../app/components/ui/pressable/index.tsx     |  19 ++-
 apps/mobile/app/screens/home/index.tsx        |   6 +-
 apps/mobile/app/services/settings.ts          |   5 +-
 apps/mobile/app/stores/use-theme-store.ts     |   5 +-
 .../fonts/notesnook-icons.glyphmap.json       |   2 +-
 apps/mobile/fonts/notesnook-icons.ttf         | Bin 11172 -> 11880 bytes
 .../ios/nanoicons-fonts/notesnook-icons.ttf   | Bin 11172 -> 11880 bytes
 packages/icons/svgs/cloud.svg                 |   3 +
 packages/icons/svgs/file.svg                  |   3 +
 packages/icons/svgs/image-outline.svg         |   3 +
 packages/icons/svgs/lock.svg                  |  10 ++
 packages/intl/locale/en.po                    |  20 ++-
 packages/intl/locale/pseudo-LOCALE.po         |  20 ++-
 packages/intl/src/strings.ts                  |  10 +-
 37 files changed, 372 insertions(+), 255 deletions(-)
 create mode 100755 packages/icons/svgs/cloud.svg
 create mode 100755 packages/icons/svgs/file.svg
 create mode 100755 packages/icons/svgs/image-outline.svg
 create mode 100755 packages/icons/svgs/lock.svg

diff --git a/apps/mobile/app/common/design/theme.ts b/apps/mobile/app/common/design/theme.ts
index 59aba2d68..cb259645a 100644
--- a/apps/mobile/app/common/design/theme.ts
+++ b/apps/mobile/app/common/design/theme.ts
@@ -49,7 +49,7 @@ export const THEME_LIGHT: ThemeDefinition = {
         heading: "#181818",
         icon: "#181818",
         separator: "#F0F0F0",
-        placeholder: "#a9a9a9",
+        placeholder: "#858585",
         hover: "#eee",
         backdrop: "#0000001a",
         buttonForeground: "#FFFFFF"
@@ -63,7 +63,7 @@ export const THEME_LIGHT: ThemeDefinition = {
         heading: "#4B4B4B",
         icon: "#666666",
         separator: "#E8E8E8",
-        placeholder: "#a9a9a9",
+        placeholder: "#999999",
         hover: "#dbdbdb",
         backdrop: "#0000001a",
         buttonForeground: "#181818"
@@ -101,7 +101,7 @@ export const THEME_LIGHT: ThemeDefinition = {
         background: "#00883610",
         border: "#008836",
         heading: "#212121",
-        icon: "#FFFFFF",
+        icon: "#181818",
         separator: "#E8E8E8",
         placeholder: "#a9a9a9",
         hover: "#eee",
@@ -146,13 +146,18 @@ export const THEME_LIGHT: ThemeDefinition = {
       },
       secondary: { background: "#EEEEEE" },
       selected: {
-        background: "#ddd",
+        background: "#00883610",
         hover: "#eee"
       }
     },
     contextMenu: { primary: { background: "#f7f7f7" } },
     editor: { selected: { background: "#e1e1e1" } },
-    sheet: { selected: { paragraph: "#008836" } }
+    sheet: { selected: { paragraph: "#008836" } },
+    list: {
+      secondary: {
+        heading: "#A6A6A6"
+      }
+    }
   }
 };
 
diff --git a/apps/mobile/app/components/auth/login.tsx b/apps/mobile/app/components/auth/login.tsx
index 41b52bf00..3b2cb8847 100644
--- a/apps/mobile/app/components/auth/login.tsx
+++ b/apps/mobile/app/components/auth/login.tsx
@@ -238,6 +238,9 @@ export const Login = ({
                 fontFamily="REGULAR"
                 fontSize={AppFontSize.sm}
                 type="plain"
+                textStyle={{
+                  color: colors.secondary.paragraph
+                }}
               />
 
               <View
@@ -322,7 +325,8 @@ export const Login = ({
             <TwoFactorVerification
               onMfaLogin={async (
                 mfa: any,
-                callback: (success: boolean) => void
+                callback: (success: boolean) => void,
+                onerror: (error: Error) => void
               ) => {
                 try {
                   const success = await db.user.authenticateMultiFactorCode(
@@ -342,6 +346,8 @@ export const Login = ({
                   if ((e as Error).message === "invalid_grant") {
                     setLoading(false);
                     setStep(LoginSteps.emailAuth);
+                  } else {
+                    onerror(e as Error);
                   }
                 }
               }}
diff --git a/apps/mobile/app/components/auth/two-factor.tsx b/apps/mobile/app/components/auth/two-factor.tsx
index fe52f2b1b..6db55cb9b 100644
--- a/apps/mobile/app/components/auth/two-factor.tsx
+++ b/apps/mobile/app/components/auth/two-factor.tsx
@@ -158,6 +158,7 @@ const TwoFactorVerification = ({
       setSending(false);
     } catch (e) {
       setSending(false);
+      console.log("error e");
       setError(
         new Error(`Error sending 2FA Code. Tap "Send code" to try again `)
       );
@@ -268,7 +269,9 @@ const TwoFactorVerification = ({
                 style={{
                   textAlign: "center",
                   marginVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                  maxWidth: 250
+                  maxWidth: 250,
+                  alignSelf: "center",
+                  marginTop: -10
                 }}
               >
                 <AppIcon
diff --git a/apps/mobile/app/components/dialog/dialog-buttons.tsx b/apps/mobile/app/components/dialog/dialog-buttons.tsx
index 44de213af..a665bd1e9 100644
--- a/apps/mobile/app/components/dialog/dialog-buttons.tsx
+++ b/apps/mobile/app/components/dialog/dialog-buttons.tsx
@@ -57,7 +57,7 @@ const DialogButtons = ({
     >
       <Button
         onPress={onPressNegative}
-        fontSize={AppFontSize.sm}
+        fontSize={AppFontSize.md}
         testID={notesnook.ids.default.dialog.no}
         type="plain-outline"
         style={{
@@ -68,7 +68,7 @@ const DialogButtons = ({
       {onPressPositive ? (
         <Button
           onPress={onPressPositive}
-          fontSize={AppFontSize.sm}
+          fontSize={AppFontSize.md}
           testID={notesnook.ids.default.dialog.yes}
           style={{
             width: "48.5%"
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 e828fa2bc..620b6692b 100644
--- a/apps/mobile/app/components/list-items/headers/section-header.tsx
+++ b/apps/mobile/app/components/list-items/headers/section-header.tsx
@@ -71,7 +71,7 @@ export const SectionHeader = React.memo<
     data,
     ref
   }: SectionHeaderProps) {
-    const { colors } = useThemeColors();
+    const { colors } = useThemeColors("list");
     const isCompactModeEnabled = useIsCompactModeEnabled(
       dataType as "note" | "notebook" | "searchResult"
     );
@@ -100,13 +100,13 @@ export const SectionHeader = React.memo<
               alignSelf: "center",
               textAlignVertical: "center"
             }}
-            color={colors.secondary.paragraph}
+            color={colors.secondary.heading}
           >
             {!item.title || item.title === ""
               ? screen === "Search"
                 ? strings.results(itemCount || 0)
-                : strings.pinned().toUpperCase()
-              : item.title.toUpperCase()}
+                : strings.pinned()
+              : item.title}
           </Paragraph>
 
           <View
diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx
index 5d2a11438..012cdb4af 100644
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -152,7 +152,7 @@ const NoteItem = ({
     {
       condition: item.favorite,
       testID: "star-filled",
-      name: "star-outline",
+      name: "star-filled",
       color: "orange"
     }
   ];
@@ -163,7 +163,7 @@ const NoteItem = ({
         style={{
           flexGrow: 1,
           flexShrink: 1,
-          gap: Spacing.LEVEL_1
+          gap: compactMode ? undefined : Spacing.LEVEL_1
         }}
       >
         {compactMode ? null : (
@@ -219,13 +219,10 @@ const NoteItem = ({
                     <AppIcon
                       name="link"
                       iconFamily="notesnook"
-                      size={AppFontSize.sm}
-                      color={primaryColors.icon}
+                      size={12}
+                      color={colors.secondary.icon}
                     />
-                    <Paragraph
-                      color={colors.secondary.paragraph}
-                      size={AppFontSize.xxs}
-                    >
+                    <Paragraph color={colors.secondary.paragraph} fontSize="XS">
                       {attachmentsCount}
                     </Paragraph>
                   </View>
@@ -362,7 +359,7 @@ const NoteItem = ({
             gap: Spacing.LEVEL_1
           }}
         >
-          {color ? (
+          {color && !compactMode ? (
             <View
               style={{
                 width: 8,
@@ -392,21 +389,83 @@ const NoteItem = ({
               {item.title}
             </Heading>
 
-            <IconButton
-              testID={notesnook.listitem.menu}
-              color={colors.secondary.icon}
-              name="dots-three"
-              iconFamily="notesnook"
-              size={20}
-              onPress={() => !noOpen && Properties.present(item)}
+            <View
               style={{
-                justifyContent: "center",
-                height: undefined,
-                width: undefined,
-                borderRadius: 100,
-                alignItems: "center"
+                flexDirection: "row",
+                alignItems: "center",
+                gap: Spacing.LEVEL_1
               }}
-            />
+            >
+              {color ? (
+                <View
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 100,
+                    backgroundColor: color?.colorCode
+                  }}
+                />
+              ) : null}
+
+              {compactMode ? (
+                <>
+                  {item.conflicted ? (
+                    <AppIcon
+                      name="warning-circle"
+                      size={12}
+                      iconFamily="notesnook"
+                      color={colors.error.accent}
+                    />
+                  ) : null}
+
+                  {locked ? (
+                    <AppIcon
+                      name="lock"
+                      testID="lock"
+                      iconFamily="notesnook"
+                      size={12}
+                      color={primaryColors.icon}
+                    />
+                  ) : null}
+
+                  {item.favorite ? (
+                    <AppIcon
+                      testID="icon-star"
+                      name="star-filled"
+                      iconFamily="notesnook"
+                      size={12}
+                      color={colors.static.orange}
+                    />
+                  ) : null}
+
+                  <TimeSince
+                    style={{
+                      fontSize: AppFontSize.xs,
+                      color: colors.secondary.paragraph,
+                      marginRight: 6
+                    }}
+                    time={date}
+                    updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
+                  />
+                </>
+              ) : null}
+
+              <IconButton
+                testID={notesnook.listitem.menu}
+                color={colors.secondary.icon}
+                name="dots-three"
+                iconFamily="notesnook"
+                size={20}
+                onPress={() => !noOpen && Properties.present(item)}
+                style={{
+                  justifyContent: "center",
+                  height: undefined,
+                  width: undefined,
+                  borderRadius: 100,
+                  alignItems: "center"
+                }}
+              />
+            </View>
           </View>
         </View>
 
@@ -433,11 +492,16 @@ const NoteItem = ({
           {compactMode ? null : (
             <View
               style={{
-                gap: Spacing.LEVEL_0,
+                gap: Spacing.LEVEL_0 + 2,
                 flexDirection: "row"
               }}
             >
-              <AppIcon size={13} name="calendar" iconFamily="notesnook" />
+              <AppIcon
+                color={colors.secondary.icon}
+                size={13}
+                name="calendar"
+                iconFamily="notesnook"
+              />
               <Paragraph
                 style={{
                   fontSize: AppFontSize.xs,
@@ -495,55 +559,6 @@ const NoteItem = ({
           alignItems: "center"
         }}
       >
-        {compactMode ? (
-          <>
-            {item.conflicted ? (
-              <AppIcon
-                name="alert-circle"
-                style={{
-                  marginRight: 6
-                }}
-                size={AppFontSize.sm}
-                color={colors.error.accent}
-              />
-            ) : null}
-
-            {locked ? (
-              <AppIcon
-                name="lock"
-                testID="note-locked-icon"
-                size={AppFontSize.sm}
-                style={{
-                  marginRight: 6
-                }}
-                color={primaryColors.icon}
-              />
-            ) : null}
-
-            {item.favorite ? (
-              <AppIcon
-                testID="icon-star"
-                name="star-outline"
-                size={AppFontSize.sm}
-                style={{
-                  marginRight: 6
-                }}
-                color={colors.static.orange}
-              />
-            ) : null}
-
-            <TimeSince
-              style={{
-                fontSize: AppFontSize.xxs,
-                color: colors.secondary.paragraph,
-                marginRight: 6
-              }}
-              time={date}
-              updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
-            />
-          </>
-        ) : null}
-
         {selectionMode === "note" || selectionMode === "trash" ? (
           <>
             <View
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
index 54bcdbc02..5f91ea5ca 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
@@ -73,7 +73,7 @@ const SelectionWrapper = ({
   return (
     <View
       style={{
-        paddingHorizontal: Spacing.LEVEL_3,
+        // paddingHorizontal: Spacing.LEVEL_3,
         backgroundColor: isEditingNote ? colors.selected.background : undefined
       }}
     >
@@ -83,23 +83,36 @@ const SelectionWrapper = ({
         onLongPress={onLongPress}
         onPress={onPress}
         customSelectedColor={colors.primary.hover}
+        noborder
         customAlpha={!isDark ? -0.02 : 0.02}
         customOpacity={1}
         style={{
-          flexDirection: "row",
           width: "100%",
           alignSelf: "center",
           overflow: "hidden",
+          paddingHorizontal: Spacing.LEVEL_3,
           borderRadius: 0,
-          marginTop: hasGroupHeader ? 0 : Spacing.LEVEL_3,
-          borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
           alignItems: "flex-start",
-          paddingVertical: Spacing.LEVEL_2,
-          paddingTop: hasGroupHeader ? 0 : Spacing.LEVEL_2
+          // paddingVertical: Spacing.LEVEL_2,
+          paddingTop: Spacing.LEVEL_2
         }}
       >
-        {children}
+        <View
+          style={{
+            width: "100%",
+            flexDirection: "row"
+          }}
+        >
+          {children}
+        </View>
+        <View
+          style={{
+            marginTop: Spacing.LEVEL_2,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.primary.border,
+            width: "100%"
+          }}
+        />
       </Pressable>
     </View>
   );
diff --git a/apps/mobile/app/components/list/card.tsx b/apps/mobile/app/components/list/card.tsx
index 0419aa8bd..a3197234a 100644
--- a/apps/mobile/app/components/list/card.tsx
+++ b/apps/mobile/app/components/list/card.tsx
@@ -96,7 +96,8 @@ export const Card = ({
 
           <View
             style={{
-              gap: Spacing.LEVEL_0
+              gap: Spacing.LEVEL_0,
+              flexShrink: 1
             }}
           >
             <Heading
diff --git a/apps/mobile/app/components/list/empty.tsx b/apps/mobile/app/components/list/empty.tsx
index d70b37082..221edfb46 100644
--- a/apps/mobile/app/components/list/empty.tsx
+++ b/apps/mobile/app/components/list/empty.tsx
@@ -21,13 +21,10 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { ActivityIndicator, View } from "react-native";
 import { notesnook } from "../../../e2e/test.ids";
-import { TTip, useTip } from "../../services/tip-manager";
+import { Spacing } from "../../common/design/spacing";
 import { RouteParams } from "../../stores/use-navigation-store";
-import { useSettingStore } from "../../stores/use-setting-store";
 import { AppFontSize } from "../../utils/size";
-import { Tip } from "../tip";
 import { Button } from "../ui/button";
-import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
@@ -58,22 +55,13 @@ export const Empty = React.memo(function Empty({
   screen
 }: EmptyListProps) {
   const { colors } = useThemeColors();
-  const introCompleted = useSettingStore(
-    (state) => state.settings.introCompleted
-  );
-  const tip = useTip(
-    screen === "Notes" && introCompleted
-      ? "first-note"
-      : placeholder?.type || ((dataType + "s") as any),
-    screen === "Notes" ? "notes" : "list"
-  );
 
   return (
     <View
       style={[
         {
           flex: 1,
-          width: "80%",
+          width: "100%",
           justifyContent: "center",
           alignSelf: "center"
         }
@@ -81,50 +69,53 @@ export const Empty = React.memo(function Empty({
     >
       {!loading ? (
         <>
-          <Tip
-            color={color}
-            tip={
-              screen !== "Search"
-                ? tip || ({ text: () => placeholder?.paragraph } as TTip)
-                : ({ text: () => placeholder?.paragraph } as TTip)
-            }
+          <View
             style={{
-              backgroundColor: "transparent",
-              paddingHorizontal: 0
+              alignItems: "center",
+              gap: Spacing.LEVEL_1
             }}
-          />
-          {placeholder?.button && (
-            <Button
-              testID={notesnook.buttons.add}
-              type="secondaryAccented"
-              title={placeholder?.button}
-              iconPosition="right"
-              icon="arrow-right"
-              onPress={placeholder?.action}
+          >
+            <Heading size={AppFontSize.md} color={colors.primary.heading}>
+              {placeholder?.title}
+            </Heading>
+            <Paragraph
               style={{
-                alignSelf: "flex-start"
+                textAlign: "center",
+                marginBottom: Spacing.LEVEL_2,
+                maxWidth: "80%"
               }}
-            />
-          )}
+              fontSize="SM"
+              color={colors.primary.paragraph}
+            >
+              {placeholder?.paragraph}
+            </Paragraph>
+
+            {placeholder?.button && (
+              <Button
+                testID={notesnook.buttons.add}
+                type="accent"
+                title={placeholder?.button}
+                iconPosition="right"
+                onPress={placeholder?.action}
+              />
+            )}
+          </View>
         </>
       ) : (
         <>
           <View
             style={{
               alignSelf: "center",
-              alignItems: "flex-start",
-              width: "100%"
+              alignItems: "center",
+              width: "100%",
+              gap: Spacing.LEVEL_2
             }}
           >
-            <Heading>{placeholder?.title}</Heading>
-            <Paragraph size={AppFontSize.sm} textBreakStrategy="balanced">
-              {placeholder?.loading}
-            </Paragraph>
-            <Seperator />
             <ActivityIndicator
               size={AppFontSize.lg}
               color={color || colors.primary.accent}
             />
+            <Paragraph>{placeholder?.loading}</Paragraph>
           </View>
         </>
       )}
diff --git a/apps/mobile/app/components/paywall/compare-plans.tsx b/apps/mobile/app/components/paywall/compare-plans.tsx
index d02dd0687..7557163cf 100644
--- a/apps/mobile/app/components/paywall/compare-plans.tsx
+++ b/apps/mobile/app/components/paywall/compare-plans.tsx
@@ -30,6 +30,7 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Steps } from "./common";
+import { Spacing } from "../../common/design/spacing";
 
 export const ComparePlans = React.memo(
   (props: {
@@ -44,7 +45,8 @@ export const ComparePlans = React.memo(
       <ScrollView
         horizontal
         style={{
-          width: isTablet ? "100%" : undefined
+          width: isTablet ? "100%" : undefined,
+          paddingLeft: Spacing.LEVEL_3
         }}
         contentContainerStyle={{
           flexDirection: "column"
@@ -124,11 +126,9 @@ export const ComparePlans = React.memo(
                               name="check"
                             />
                           ) : (
-                            <Icon
-                              size={AppFontSize.sm}
-                              color={colors.static.red}
-                              name="close"
-                            />
+                            <Paragraph color={colors.secondary.paragraph}>
+                              -
+                            </Paragraph>
                           )}
                         </>
                       ) : null}
diff --git a/apps/mobile/app/components/paywall/index.tsx b/apps/mobile/app/components/paywall/index.tsx
index 92183189c..cff1b92cd 100644
--- a/apps/mobile/app/components/paywall/index.tsx
+++ b/apps/mobile/app/components/paywall/index.tsx
@@ -230,11 +230,11 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
         <View
           style={{
             height: 50,
-            justifyContent: "flex-start",
-            flexShrink: 1,
-            flexGrow: 1,
+            justifyContent: "space-between",
             flexDirection: "row",
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: DefaultAppStyles.GAP,
+            width: "100%",
+            alignItems: "center"
           }}
         >
           <IconButton
@@ -244,33 +244,35 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
             color={colors.primary.icon}
             size={18}
             onPress={() => {
-              Navigation.navigate("FluidPanelsView", {});
+              if (step === Steps.buy) {
+                setStep(Steps.select);
+                return;
+              }
+              if (routeParams.context === "signup") {
+                Navigation.navigate("FluidPanelsView", {});
+              } else {
+                Navigation.goBack();
+              }
+            }}
+          />
+
+          <Heading size={AppFontSize.xl}>
+            {step === Steps.buy || step === Steps.buyWeb
+              ? pricingPlans.userCanRequestTrial
+                ? strings.tryPlanForFree(
+                    pricingPlans.currentPlan?.name as string
+                  )
+                : strings.plan(pricingPlans.currentPlan?.name as string)
+              : ""}
+          </Heading>
+
+          <View
+            style={{
+              width: 18,
+              height: 18
             }}
           />
         </View>
-        // <Header
-        //   canGoBack={true}
-        //   onLeftMenuButtonPress={() => {
-        //     if (step === Steps.buy) {
-        //       setStep(Steps.select);
-        //       return;
-        //     }
-        //     if (routeParams.context === "signup") {
-        //       Navigation.navigate("FluidPanelsView", {});
-        //     } else {
-        //       Navigation.goBack();
-        //     }
-        //   }}
-        //   title={
-        //     step === Steps.buy || step === Steps.buyWeb
-        //       ? pricingPlans.userCanRequestTrial
-        //         ? strings.tryPlanForFree(
-        //             pricingPlans.currentPlan?.name as string
-        //           )
-        //         : strings.plan(pricingPlans.currentPlan?.name as string)
-        //       : ""
-        //   }
-        // />
       )}
 
       {step === Steps.select ? (
@@ -299,13 +301,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                   alignItems: "center"
                 }}
               >
-                <Heading
-                  key="heading"
-                  size={AppFontSize.xl}
-                  style={{
-                    alignSelf: "center"
-                  }}
-                >
+                <Heading key="heading" fontSize="XL" lineHeight="100%">
                   {pricingPlans.isSubscribed()
                     ? strings.changePlan()
                     : strings.notesnookPlans[0]() + " "}
@@ -315,7 +311,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                 </Heading>
               </View>
 
-              <Paragraph key="description" size={AppFontSize.md}>
+              <Paragraph key="description" fontSize="SM">
                 {strings.readyToTakeNextStep()}
               </Paragraph>
             </View>
@@ -382,7 +378,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                   <View
                     style={{
                       borderRadius: 100,
-                      backgroundColor: colors.primary.accent,
+                      backgroundColor: colors.secondary.accent,
                       padding: Spacing.LEVEL_0
                     }}
                   >
@@ -497,7 +493,8 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                     paddingHorizontal: Spacing.LEVEL_2,
                     borderRadius: Radius.XS,
                     alignItems: "center",
-                    justifyContent: "center"
+                    justifyContent: "center",
+                    minWidth: 100
                   }}
                 >
                   <SvgView
@@ -528,6 +525,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
                 contentContainerStyle={{
                   gap: Spacing.LEVEL_3
                 }}
+                showsHorizontalScrollIndicator={false}
                 horizontal
                 pagingEnabled
                 snapToOffsets={[0, width - 50, width * 2 - 100]}
diff --git a/apps/mobile/app/components/paywall/plan-card.tsx b/apps/mobile/app/components/paywall/plan-card.tsx
index b3eac377f..83e28e2ab 100644
--- a/apps/mobile/app/components/paywall/plan-card.tsx
+++ b/apps/mobile/app/components/paywall/plan-card.tsx
@@ -162,7 +162,7 @@ export const PricingPlanCard = ({
                 {plan.recommended ? (
                   <View
                     style={{
-                      backgroundColor: colors.static.orange,
+                      backgroundColor: colors.static.red,
                       borderRadius: 100,
                       padding: Spacing.LEVEL_0,
                       paddingHorizontal: Spacing.LEVEL_1
@@ -170,7 +170,7 @@ export const PricingPlanCard = ({
                   >
                     <Text
                       style={{
-                        color: colors.static.black,
+                        color: colors.static.white,
                         fontSize: AppFontSize.xxs
                       }}
                     >
@@ -257,6 +257,7 @@ export const PricingPlanCard = ({
                           ? "file"
                           : "image-outline"
                     }
+                    iconFamily="notesnook"
                     size={AppFontSize.lg}
                   />
                   <Paragraph size={AppFontSize.sm}>
@@ -278,7 +279,7 @@ export const PricingPlanCard = ({
 
         <Button
           title={strings.selectPlan()}
-          type={plan.id === "pro" ? "accent" : "secondary"}
+          type={plan.id === "pro" ? "accent" : "tertiary"}
           style={{
             width: "100%"
           }}
diff --git a/apps/mobile/app/components/sheets/add-notebook/index.tsx b/apps/mobile/app/components/sheets/add-notebook/index.tsx
index 8fd9d3d84..a7e79a414 100644
--- a/apps/mobile/app/components/sheets/add-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/add-notebook/index.tsx
@@ -31,16 +31,18 @@ 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 Input from "../../ui/input";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import DialogHeader from "../../dialog/dialog-header";
 import DialogButtons from "../../dialog/dialog-buttons";
 import { presentDialog } from "../../dialog/functions";
 import { getElevationStyle } from "../../../utils/elevation";
-import { defaultBorderRadius } from "../../../utils/size";
 import { useThemeColors } from "@notesnook/theme";
 import { getContainerBorder } from "../../../utils/colors";
 import { Radius, Spacing } from "../../../common/design/spacing";
+import FormInput, {
+  createFormRef,
+  validators
+} from "../../ui/input/form-input";
 
 export const AddNotebookSheet = ({
   notebook,
@@ -56,29 +58,28 @@ export const AddNotebookSheet = ({
   defaultTitle?: string;
 }) => {
   const { colors } = useThemeColors();
-  const title = useRef(notebook?.title || defaultTitle);
-  const description = useRef(notebook?.description);
   const titleInput = useRef<TextInput>(null);
   const descriptionInput = useRef<TextInput>(null);
   const [loading, setLoading] = useState(false);
+  const formRef = useRef(
+    createFormRef({
+      title: notebook?.title || defaultTitle || "",
+      description: notebook?.description || ""
+    })
+  );
 
   const onSaveChanges = async () => {
     if (loading) return;
 
-    if (!title.current || title?.current.trim().length === 0) {
-      ToastManager.show({
-        heading: strings.enterNotebookTitle(),
-        type: "error",
-        context: "local"
-      });
-      return;
-    }
+    if (!formRef.current?.validate()) return;
 
     setLoading(true);
 
+    const values = formRef.current.getValues();
+
     const id = await db.notebooks.add({
-      title: title.current,
-      description: description.current,
+      title: values.title,
+      description: values.description,
       id: notebook?.id
     });
 
@@ -151,33 +152,34 @@ export const AddNotebookSheet = ({
             gap: Spacing.LEVEL_2
           }}
         >
-          <Input
+          <FormInput
             fwdRef={titleInput}
+            name="title"
+            formRef={formRef}
             testID={notesnook.ids.dialogs.notebook.inputs.title}
-            onChangeText={(value) => {
-              title.current = value;
-            }}
             onLayout={() => {
               setTimeout(() => {
                 titleInput?.current?.focus();
               }, 300);
             }}
+            validators={[validators.required(strings.titleIsRequired())]}
             placeholder={"eg. My Notebook"}
-            onSubmit={() => {
+            onSubmitEditing={() => {
               descriptionInput.current?.focus();
             }}
             label={strings.enterNotebookTitle()}
             returnKeyLabel="Next"
             returnKeyType="next"
-            defaultValue={notebook ? notebook.title : title.current}
+            defaultValue={
+              notebook ? notebook.title : formRef.current.getValue("title")
+            }
           />
 
-          <Input
+          <FormInput
             fwdRef={descriptionInput}
+            name="description"
+            formRef={formRef}
             testID={notesnook.ids.dialogs.notebook.inputs.description}
-            onChangeText={(value) => {
-              description.current = value;
-            }}
             label={strings.enterNotebookDescription()}
             placeholder={"eg. This is My Notebook"}
             returnKeyLabel={strings.next()}
@@ -188,7 +190,6 @@ export const AddNotebookSheet = ({
       </View>
       <DialogButtons
         onPressNegative={() => {
-          title.current = undefined;
           close?.(false);
           useSettingStore.getState().setSheetKeyboardHandler(true);
         }}
diff --git a/apps/mobile/app/components/sheets/buy-plan/index.tsx b/apps/mobile/app/components/sheets/buy-plan/index.tsx
index cc9526f5f..e370bff90 100644
--- a/apps/mobile/app/components/sheets/buy-plan/index.tsx
+++ b/apps/mobile/app/components/sheets/buy-plan/index.tsx
@@ -111,6 +111,9 @@ export const BuyPlan = (props: {
         contentContainerStyle={{
           paddingVertical: Spacing.LEVEL_4
         }}
+        style={{
+          flex: 1
+        }}
         keyboardDismissMode="none"
         keyboardShouldPersistTaps="always"
       >
@@ -151,7 +154,7 @@ export const BuyPlan = (props: {
           <Paragraph
             fontFamily="MEDIUM"
             fontSize="MD"
-            color={colors.secondary.paragraph}
+            color={colors.secondary.heading}
           >
             {strings.paymentSummary()}
           </Paragraph>
@@ -257,7 +260,7 @@ export const BuyPlan = (props: {
           <Paragraph
             fontFamily="MEDIUM"
             fontSize="MD"
-            color={colors.secondary.paragraph}
+            color={colors.secondary.heading}
           >
             {strings.whatsIncluded()}
           </Paragraph>
@@ -270,7 +273,8 @@ export const BuyPlan = (props: {
               padding: Spacing.LEVEL_3,
               borderRadius: Radius.S,
               backgroundColor: colors.secondary.background,
-              marginBottom: 27
+              marginBottom: 27,
+              flex: 1
             }}
           >
             {[
diff --git a/apps/mobile/app/components/sheets/sort/index.tsx b/apps/mobile/app/components/sheets/sort/index.tsx
index bb655f349..d763dd2a5 100644
--- a/apps/mobile/app/components/sheets/sort/index.tsx
+++ b/apps/mobile/app/components/sheets/sort/index.tsx
@@ -125,15 +125,6 @@ const Sort = ({
     }, 1);
   };
 
-  const setOrderBy = async () => {
-    const _groupOptions: GroupOptions = {
-      ...groupOptions,
-      sortDirection: groupOptions?.sortDirection === "asc" ? "desc" : "asc"
-    };
-
-    await updateGroupOptions(_groupOptions);
-  };
-
   useEffect(() => {
     data?.groups?.().then((groups) => {
       setGroups(groups);
@@ -305,6 +296,13 @@ const Sort = ({
                         : "plain"
                     }
                     title={getSortButtonTitle("desc")}
+                    onPress={() => {
+                      const _groupOptions: GroupOptions = {
+                        ...groupOptions,
+                        sortDirection: "desc"
+                      };
+                      updateGroupOptions(_groupOptions);
+                    }}
                   />
 
                   <Button
@@ -321,6 +319,13 @@ const Sort = ({
                         : "plain"
                     }
                     title={getSortButtonTitle("asc")}
+                    onPress={() => {
+                      const _groupOptions: GroupOptions = {
+                        ...groupOptions,
+                        sortDirection: "asc"
+                      };
+                      updateGroupOptions(_groupOptions);
+                    }}
                   />
                 </View>
               ) : null}
diff --git a/apps/mobile/app/components/side-menu/index.tsx b/apps/mobile/app/components/side-menu/index.tsx
index 6943ea5ea..ff3e61b5b 100644
--- a/apps/mobile/app/components/side-menu/index.tsx
+++ b/apps/mobile/app/components/side-menu/index.tsx
@@ -488,7 +488,7 @@ const TabBar = (props: SimpleTabBarProps) => {
                       <TabBarButton
                         icon={isDark ? "dark-mode-outline" : "sun"}
                         testID="sidebar-theme-button"
-                        label={isDark ? "Dark" : "Light"}
+                        label={isDark ? "Dark Mode" : "Light Mode"}
                         onPress={() => {
                           useThemeStore.getState().setColorScheme();
                         }}
diff --git a/apps/mobile/app/components/side-menu/menu-item.tsx b/apps/mobile/app/components/side-menu/menu-item.tsx
index 86474e39a..b92e28fc4 100644
--- a/apps/mobile/app/components/side-menu/menu-item.tsx
+++ b/apps/mobile/app/components/side-menu/menu-item.tsx
@@ -176,7 +176,7 @@ export function MenuItem({
               item.icon === "crown"
                 ? colors.static.yellow
                 : isFocused
-                  ? colors.selected.icon
+                  ? colors.primary.icon
                   : colors.secondary.icon
             }
             size={AppFontSize.md}
diff --git a/apps/mobile/app/components/side-menu/notebook-item.tsx b/apps/mobile/app/components/side-menu/notebook-item.tsx
index b960e61a4..346c49d4f 100644
--- a/apps/mobile/app/components/side-menu/notebook-item.tsx
+++ b/apps/mobile/app/components/side-menu/notebook-item.tsx
@@ -232,7 +232,11 @@ export const NotebookItem = ({
                 name={selected ? "checkbox" : "box-empty"}
                 iconFamily="notesnook"
                 size={AppFontSize.md}
-                color={selected ? colors.selected.icon : colors.primary.icon}
+                color={
+                  selected
+                    ? [colors.selected.accent, colors.selected.accentForeground]
+                    : colors.primary.icon
+                }
               />
             </View>
           ) : (
diff --git a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
index e92578600..f661cefad 100644
--- a/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-list-empty.tsx
@@ -47,7 +47,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
       <View
         style={{
           backgroundColor: colors.primary.background,
-          paddingTop: DefaultAppStyles.GAP_VERTICAL
+          paddingTop: Spacing.LEVEL_1
         }}
       >
         <SideMenuHeader />
@@ -88,7 +88,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
               gap: Spacing.LEVEL_1
             }}
           >
-            <Heading size={AppFontSize.md} color={colors.secondary.paragraph}>
+            <Heading size={AppFontSize.md} color={colors.primary.heading}>
               {props.placeholderTitle}
             </Heading>
             <Paragraph
@@ -97,7 +97,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
                 maxWidth: "60%"
               }}
               fontSize="SM"
-              color={colors.secondary.paragraph}
+              color={colors.primary.paragraph}
             >
               {props.placeholderBody}
             </Paragraph>
@@ -111,8 +111,7 @@ export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
                 paddingVertical: Spacing.LEVEL_2,
                 paddingHorizontal: Spacing.LEVEL_2
               }}
-              type="accent-outline"
-              icon="plus"
+              type="accent"
             />
           </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 0b73b59e3..9ab3a6f37 100644
--- a/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
@@ -189,7 +189,7 @@ export const SideMenuNotebooks = () => {
                 placeholder={strings.filterNotebooks()}
                 style={{
                   fontFamily: "Inter-Regular",
-                  fontSize: AppFontSize.xs,
+                  fontSize: AppFontSize.sm,
                   paddingTop: 0,
                   paddingBottom: 0
                 }}
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 d3e1af6af..2b8d972a1 100644
--- a/apps/mobile/app/components/side-menu/side-menu-tags.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
@@ -329,7 +329,7 @@ export const SideMenuTags = () => {
                 placeholder={strings.filterTags()}
                 style={{
                   fontFamily: "Inter-Regular",
-                  fontSize: AppFontSize.xs,
+                  fontSize: AppFontSize.sm,
                   paddingTop: 0,
                   paddingBottom: 0
                 }}
@@ -345,7 +345,7 @@ export const SideMenuTags = () => {
                     }
                   }, 100);
                 }}
-                placeholderTextColor={colors.primary.placeholder}
+                placeholderTextColor={colors.secondary.placeholder}
               />
 
               <AppIcon name="funnel" size={14} iconFamily="notesnook" />
diff --git a/apps/mobile/app/components/side-menu/tab-bar-button.tsx b/apps/mobile/app/components/side-menu/tab-bar-button.tsx
index d553df05f..5d4c89a92 100644
--- a/apps/mobile/app/components/side-menu/tab-bar-button.tsx
+++ b/apps/mobile/app/components/side-menu/tab-bar-button.tsx
@@ -96,13 +96,17 @@ export const TabBarButton = ({
         <AppIcon
           name={icon}
           iconFamily="notesnook"
-          color={isActive ? colors.selected.icon : colors.primary.icon}
+          color={isActive ? colors.primary.icon : colors.secondary.icon}
           size={16}
         />
       </Animated.View>
 
       {label && (
-        <Paragraph fontFamily={isActive ? "MEDIUM" : "REGULAR"} fontSize={"XS"}>
+        <Paragraph
+          color={isActive ? colors.primary.heading : colors.secondary.heading}
+          fontFamily={isActive ? "MEDIUM" : "REGULAR"}
+          fontSize={"XS"}
+        >
           {label}
         </Paragraph>
       )}
diff --git a/apps/mobile/app/components/ui/input/form-input.tsx b/apps/mobile/app/components/ui/input/form-input.tsx
index bda9120e7..ecbf53cda 100644
--- a/apps/mobile/app/components/ui/input/form-input.tsx
+++ b/apps/mobile/app/components/ui/input/form-input.tsx
@@ -291,12 +291,13 @@ export function FormInput({
   const borderColor = useMemo(() => {
     if (fieldError) return colors.error.border;
     if (focused) return customColor || colors.selected.border;
-    return colors.primary.border;
+    return "transparent";
   }, [colors, customColor, fieldError, focused]);
 
   const style: ViewStyle = {
     borderWidth: 1,
     borderRadius: defaultBorderRadius,
+    backgroundColor: colors.secondary.background,
     borderColor: borderColor,
     flexDirection: "row",
     justifyContent: "space-between",
diff --git a/apps/mobile/app/components/ui/pressable/index.tsx b/apps/mobile/app/components/ui/pressable/index.tsx
index 694db496a..7c0df72a6 100644
--- a/apps/mobile/app/components/ui/pressable/index.tsx
+++ b/apps/mobile/app/components/ui/pressable/index.tsx
@@ -56,6 +56,7 @@ type ButtonTypes =
   | "accent"
   | "shade"
   | "secondary"
+  | "tertiary"
   | "selectedAccent"
   | "secondaryAccented"
   | "inverted"
@@ -86,7 +87,7 @@ const buttonTypes = (
 } => ({
   plain: {
     primary: "transparent",
-    text: colors.primary.buttonForeground,
+    text: colors.secondary.buttonForeground,
     selected: colors.primary.hover,
     borderWidth: 0.8,
     borderSelectedColor: getColorLinearShade(
@@ -97,7 +98,7 @@ const buttonTypes = (
   },
   "plain-outline": {
     primary: "transparent",
-    text: colors.primary.buttonForeground,
+    text: colors.secondary.buttonForeground,
     selected: colors.primary.hover,
     borderWidth: 1,
     borderColor: colors.primary.border,
@@ -116,7 +117,19 @@ const buttonTypes = (
   },
   secondary: {
     primary: colors.secondary.background,
-    text: colors.primary.buttonForeground,
+    text: colors.secondary.buttonForeground,
+    selected: colors.secondary.background,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.background,
+      0.05,
+      isDark
+    )
+  },
+  tertiary: {
+    primary: colors.tertiary.background,
+    text: colors.secondary.buttonForeground,
     selected: colors.secondary.background,
     borderWidth: 0.8,
     borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
diff --git a/apps/mobile/app/screens/home/index.tsx b/apps/mobile/app/screens/home/index.tsx
index 33f4174d1..e7f752a63 100755
--- a/apps/mobile/app/screens/home/index.tsx
+++ b/apps/mobile/app/screens/home/index.tsx
@@ -78,9 +78,9 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
           loading={loading || !isFocused}
           headerTitle={strings.routes[route.name]()}
           placeholder={{
-            title: route.name?.toLowerCase(),
-            paragraph: strings.notesEmpty(),
-            button: strings.createNewNote(),
+            title: strings.notePlaceholder.title(),
+            paragraph: strings.notePlaceholder.description(),
+            button: strings.notePlaceholder.button(),
             action: openEditor,
             loading: strings.loadingNotes()
           }}
diff --git a/apps/mobile/app/services/settings.ts b/apps/mobile/app/services/settings.ts
index 3f166b310..2eab0981e 100644
--- a/apps/mobile/app/services/settings.ts
+++ b/apps/mobile/app/services/settings.ts
@@ -28,6 +28,7 @@ import { NotesnookModule } from "../utils/notesnook-module";
 import { scale } from "../utils/size";
 import { useUserStore } from "../stores/use-user-store";
 import ScreenGuardModule from "react-native-screenguard";
+import { THEME_DARK, THEME_LIGHT } from "../common/design/theme";
 
 let isScreenGuardModuleReady = false;
 async function callScreenGuard(callback: () => void) {
@@ -123,7 +124,9 @@ function init() {
     migrateSettings(settingsParsed);
     settings = {
       ...settings,
-      ...settingsParsed
+      ...settingsParsed,
+      darkTheme: THEME_DARK,
+      lighTheme: THEME_LIGHT
     };
   }
   if (settings.fontScale) {
diff --git a/apps/mobile/app/stores/use-theme-store.ts b/apps/mobile/app/stores/use-theme-store.ts
index d0e4ebf65..1e2dece36 100644
--- a/apps/mobile/app/stores/use-theme-store.ts
+++ b/apps/mobile/app/stores/use-theme-store.ts
@@ -24,6 +24,7 @@ import SettingsService from "../services/settings";
 import switchTheme from "react-native-theme-switch-animation";
 
 import changeNavigationBarColor from "react-native-navigation-bar-color";
+import { THEME_DARK, THEME_LIGHT } from "../common/design/theme";
 export interface ThemeStore {
   lightTheme: ThemeDefinition;
   darkTheme: ThemeDefinition;
@@ -70,8 +71,8 @@ function switchThemeWithAnimation(fn: () => void) {
 }
 
 export const useThemeStore = create<ThemeStore>((set, get) => ({
-  lightTheme: SettingsService.get().lighTheme,
-  darkTheme: SettingsService.get().darkTheme,
+  lightTheme: THEME_LIGHT,
+  darkTheme: THEME_DARK,
   colorScheme: SettingsService.get().useSystemTheme
     ? (Appearance.getColorScheme() as "dark" | "light")
     : SettingsService.get().colorScheme,
diff --git a/apps/mobile/fonts/notesnook-icons.glyphmap.json b/apps/mobile/fonts/notesnook-icons.glyphmap.json
index 6e9c0d143..70db35d94 100644
--- a/apps/mobile/fonts/notesnook-icons.glyphmap.json
+++ b/apps/mobile/fonts/notesnook-icons.glyphmap.json
@@ -1 +1 @@
-{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"152fce4d3c3abddf653ca4a50429970ee28d608be9076f922ca422a079f86b8a"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"dark-mode-outline":[1024,[[59662,"currentColor"]]],"dots-three":[1024,[[59663,"#202020"]]],"drive-file-move":[1088,[[59664,"#666666"]]],"edit-pencil":[1024,[[59665,"#181818"]]],"envelope-simple":[1024,[[59666,"white"]]],"eye-closed":[1024,[[59667,"white"]]],"eye-open":[1024,[[59668,"currentColor"]]],"funnel":[1024,[[59669,"#666666"]]],"home":[1024,[[59670,"#181818"]]],"link":[560,[[59671,"#666666"]]],"lock-simple":[1024,[[59672,"white"]]],"menu":[1024,[[59673,"#181818"]]],"note":[1024,[[59674,"#181818"]]],"pin":[939,[[59675,"#666666"]]],"plus":[1024,[[59676,"#666666"]]],"search":[1024,[[59677,"#181818"]]],"shield-check":[1024,[[59678,"#008836"]]],"shopping-mode":[1024,[[59679,"#666666"]]],"sliders":[1024,[[59680,"#181818"]]],"sort-ascending":[1024,[[59681,"#666666"]]],"sort-descending":[1024,[[59682,"currentColor"]]],"square-out":[1024,[[59683,"#181818"]]],"star-filled":[1024,[[59684,"#E5C131"]]],"star":[1024,[[59685,"#666666"]]],"sun":[1024,[[59686,"#666666"]]],"trash":[1024,[[59687,"#666666"]]],"view-list":[1024,[[59688,"#181818"]]],"warning-circle":[1024,[[59689,"#BB3431"]]]}}
\ No newline at end of file
+{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"3c50f9e96133b612a6a07dbd21321f56f12b0452eb7ad0bfa184f3ceb68efa6d"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"cloud":[1024,[[59662,"white"]]],"dark-mode-outline":[1024,[[59663,"currentColor"]]],"dots-three":[1024,[[59664,"#202020"]]],"drive-file-move":[1088,[[59665,"#666666"]]],"edit-pencil":[1024,[[59666,"#181818"]]],"envelope-simple":[1024,[[59667,"white"]]],"eye-closed":[1024,[[59668,"white"]]],"eye-open":[1024,[[59669,"currentColor"]]],"file":[1024,[[59670,"white"]]],"funnel":[1024,[[59671,"#666666"]]],"home":[1024,[[59672,"#181818"]]],"image-outline":[1024,[[59673,"white"]]],"link":[560,[[59674,"#666666"]]],"lock-simple":[1024,[[59675,"white"]]],"lock":[1024,[[59676,"#181818"]]],"menu":[1024,[[59677,"#181818"]]],"note":[1024,[[59678,"#181818"]]],"pin":[939,[[59679,"#666666"]]],"plus":[1024,[[59680,"#666666"]]],"search":[1024,[[59681,"#181818"]]],"shield-check":[1024,[[59682,"#008836"]]],"shopping-mode":[1024,[[59683,"#666666"]]],"sliders":[1024,[[59684,"#181818"]]],"sort-ascending":[1024,[[59685,"#666666"]]],"sort-descending":[1024,[[59686,"currentColor"]]],"square-out":[1024,[[59687,"#181818"]]],"star-filled":[1024,[[59688,"#E5C131"]]],"star":[1024,[[59689,"#666666"]]],"sun":[1024,[[59690,"#666666"]]],"trash":[1024,[[59691,"#666666"]]],"view-list":[1024,[[59692,"#181818"]]],"warning-circle":[1024,[[59693,"#BB3431"]]]}}
\ No newline at end of file
diff --git a/apps/mobile/fonts/notesnook-icons.ttf b/apps/mobile/fonts/notesnook-icons.ttf
index 12319501491733e2c8579259f0c48e2dddadc902..d8c1a1b1cc0efdec71c1ff20fbdb9a9d635b3e4c 100644
GIT binary patch
delta 1042
zcmY+DO>7%Q6vyAp#vip^ryGBzIJV*)$6rZo@7QZMn>0>aHzrb03&nMWqEeHlO`U{B
zC6&SfHdI1Fh)Z#i+ACioQ4f`T2nQqt>H$?E955|HiZ~!u6+#sUxS)8$+w}#coi{r(
z@8kFWJNs$v>AVI6035Ih0t}uxm*FMv{3h<)!*Ow8wY~<2fBzAHxNw}jvhwETnY-6d
z0MN4lu{%qP^-GzzJeVQz6#WZJxM4f!Sp-N9;ySvty1sEUh;NWAqxpE{+Cu%?`G+6k
z+VH=)THlb@$Z2vOAoV<M48C4pUEEMV`Wn|uSfsIb?Tz)I5}W}TX(PaG=n;Osb-zSL
zZ~a*zqpf2^aB6KK1^ti*C`xIPpCq|Lv5@0|FbNcSn0VcU5y?%wVUmmRNs><!CfN##
zIlGDNkE!KSX?bd}JYB7nCSI`klv*xVQ#wC)XPQWs6Nz#%8m5ygCFQ~i_r21xwo;l+
zXPI=PLi4rfuFmDiR&MTUEuSpESWX;q9mSL*XJmj@-es|90yYLhO3<JWIaAmMavnzt
zt55X$5vrhwaj$=zWJr#P25$r%6wzpfR+%boM`bxm-e&xOv%AmQZIWUt({HkINg8K#
zSW?+GXPw7PmKmvPj6a*uAL;K%#<4_`J(vMn$HaGuW-&=LB=JH7MnQ#B0G>#gBFO*B
z`V6*WpcoMIF-GFHF6MC(CtXFmLI)(P*Ut<2*dv<6BFNEs+^x#^PUELN&h$?jJDlMu
z-_sw4&SpcQtSW~>aws@7qznxS8u?F<nIwflo}ET}k8CmC`Ju66bXDFXb|Z3NKvuJ%
zVIx!-!d_Zm^+l-GV|Mkj(1xQBf;ePRVeZG4tSDp*bu5e%1;s@4fX^dFM2|10q$%DB
zj}*%nxZi7~2aIE3YS`hi`g(ngq;$G@fOylYgp%@U&MB&_*9;eft*X{le5$&ik}bVP
z&sFhLF{bJcxx#rxZvEnYUmUo;`{i%1_D=i_PLmRzWUrXl!I+zyu_BeA`Aux1`F+gQ
z?8Ji2Bk}%bG(L0sq~$%!1IxZOYMrz0+8)@g_OkuEL)k<BIHnvQI6immJ1;wLJ9k}S
z*DHsgxM$tFz2V+Q?_c7DK3CtQXV(0uGp+6TXH>{QrukCpyq%1YQIaN^<`=2`e#?!;
PF<v+AYo=W=?WKPKwcPKs

delta 352
zcmaD6vn0HpfsuiMfs3Jmftf+UKUm+$UL>XxD6$5K6OwZi3mAA`oo8TR<N;!*^qk5x
zLj{Q!3=B*G3=Aqf8L5dW`lY(Z85q=Jfa=XMfCB9QSrUQ#DL}qTMs7((ku;FSptb`@
zOv=emPF%8QjROONx(|>ak(*dySitDW7zPwr0u)flOUzBJu$sCb$Ug$KB&#65xa8i}
zdq4}c41f+OVPIjtGjW4Gqvpg9?u?q7Ef|@(H{a&@$FezAsD*L!MiB+3&6(ouf-)5n
z4Ey8xZN4&avjB}{V0flek_MwE^Jtng$uUe0)U=r#tI09BS5tcO22Fv<M>Jh+Em%uf
z*RWn;<6x^}FJa%rVaCb8>BgDBxs6MK%a5yr>jt+7&jMaH-VWXyd@6kF1SABG3H%UZ
a1BapZW<RZ^Ow8I0+LOQOgiQ|7{R04^(Ogpi

diff --git a/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf b/apps/mobile/ios/nanoicons-fonts/notesnook-icons.ttf
index 12319501491733e2c8579259f0c48e2dddadc902..d8c1a1b1cc0efdec71c1ff20fbdb9a9d635b3e4c 100644
GIT binary patch
delta 1042
zcmY+DO>7%Q6vyAp#vip^ryGBzIJV*)$6rZo@7QZMn>0>aHzrb03&nMWqEeHlO`U{B
zC6&SfHdI1Fh)Z#i+ACioQ4f`T2nQqt>H$?E955|HiZ~!u6+#sUxS)8$+w}#coi{r(
z@8kFWJNs$v>AVI6035Ih0t}uxm*FMv{3h<)!*Ow8wY~<2fBzAHxNw}jvhwETnY-6d
z0MN4lu{%qP^-GzzJeVQz6#WZJxM4f!Sp-N9;ySvty1sEUh;NWAqxpE{+Cu%?`G+6k
z+VH=)THlb@$Z2vOAoV<M48C4pUEEMV`Wn|uSfsIb?Tz)I5}W}TX(PaG=n;Osb-zSL
zZ~a*zqpf2^aB6KK1^ti*C`xIPpCq|Lv5@0|FbNcSn0VcU5y?%wVUmmRNs><!CfN##
zIlGDNkE!KSX?bd}JYB7nCSI`klv*xVQ#wC)XPQWs6Nz#%8m5ygCFQ~i_r21xwo;l+
zXPI=PLi4rfuFmDiR&MTUEuSpESWX;q9mSL*XJmj@-es|90yYLhO3<JWIaAmMavnzt
zt55X$5vrhwaj$=zWJr#P25$r%6wzpfR+%boM`bxm-e&xOv%AmQZIWUt({HkINg8K#
zSW?+GXPw7PmKmvPj6a*uAL;K%#<4_`J(vMn$HaGuW-&=LB=JH7MnQ#B0G>#gBFO*B
z`V6*WpcoMIF-GFHF6MC(CtXFmLI)(P*Ut<2*dv<6BFNEs+^x#^PUELN&h$?jJDlMu
z-_sw4&SpcQtSW~>aws@7qznxS8u?F<nIwflo}ET}k8CmC`Ju66bXDFXb|Z3NKvuJ%
zVIx!-!d_Zm^+l-GV|Mkj(1xQBf;ePRVeZG4tSDp*bu5e%1;s@4fX^dFM2|10q$%DB
zj}*%nxZi7~2aIE3YS`hi`g(ngq;$G@fOylYgp%@U&MB&_*9;eft*X{le5$&ik}bVP
z&sFhLF{bJcxx#rxZvEnYUmUo;`{i%1_D=i_PLmRzWUrXl!I+zyu_BeA`Aux1`F+gQ
z?8Ji2Bk}%bG(L0sq~$%!1IxZOYMrz0+8)@g_OkuEL)k<BIHnvQI6immJ1;wLJ9k}S
z*DHsgxM$tFz2V+Q?_c7DK3CtQXV(0uGp+6TXH>{QrukCpyq%1YQIaN^<`=2`e#?!;
PF<v+AYo=W=?WKPKwcPKs

delta 352
zcmaD6vn0HpfsuiMfs3Jmftf+UKUm+$UL>XxD6$5K6OwZi3mAA`oo8TR<N;!*^qk5x
zLj{Q!3=B*G3=Aqf8L5dW`lY(Z85q=Jfa=XMfCB9QSrUQ#DL}qTMs7((ku;FSptb`@
zOv=emPF%8QjROONx(|>ak(*dySitDW7zPwr0u)flOUzBJu$sCb$Ug$KB&#65xa8i}
zdq4}c41f+OVPIjtGjW4Gqvpg9?u?q7Ef|@(H{a&@$FezAsD*L!MiB+3&6(ouf-)5n
z4Ey8xZN4&avjB}{V0flek_MwE^Jtng$uUe0)U=r#tI09BS5tcO22Fv<M>Jh+Em%uf
z*RWn;<6x^}FJa%rVaCb8>BgDBxs6MK%a5yr>jt+7&jMaH-VWXyd@6kF1SABG3H%UZ
a1BapZW<RZ^Ow8I0+LOQOgiQ|7{R04^(Ogpi

diff --git a/packages/icons/svgs/cloud.svg b/packages/icons/svgs/cloud.svg
new file mode 100755
index 000000000..36098840e
--- /dev/null
+++ b/packages/icons/svgs/cloud.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66667 13.3333C1.64 13.3333 0 11.6933 0 9.66659C0 7.63992 1.64 5.99992 3.66667 5.99992C4.33333 4.43325 5.86667 3.33325 7.66667 3.33325C9.95333 3.33325 11.8267 5.10659 12 7.35325L12.3333 7.33325C14 7.33325 15.3333 8.66659 15.3333 10.3333C15.3333 11.9999 14 13.3333 12.3333 13.3333H3.66667ZM3.66667 6.66659C2 6.66659 0.666667 7.99992 0.666667 9.66659C0.666667 11.3333 2 12.6666 3.66667 12.6666C4.81333 12.6666 11.1 12.6666 12.3333 12.6666C13.62 12.6666 14.6667 11.6199 14.6667 10.3333C14.6667 9.04659 13.62 7.99992 12.3333 7.99992C11.96 7.99992 11.6 8.08659 11.2867 8.24659C11.3333 8.05992 11.3333 7.86659 11.3333 7.66659C11.3333 5.63992 9.69333 3.99992 7.66667 3.99992C5.97333 3.99992 4.55333 5.14659 4.12667 6.69992L3.66667 6.66659Z" fill="white"/>
+</svg>
diff --git a/packages/icons/svgs/file.svg b/packages/icons/svgs/file.svg
new file mode 100755
index 000000000..978af93bb
--- /dev/null
+++ b/packages/icons/svgs/file.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33384 7.33333C8.22718 7.33333 7.33384 6.44 7.33384 5.33333V2.66667H4.66718C3.93384 2.66667 3.33384 3.26667 3.33384 4V12.6667C3.33384 13.4 3.93384 14 4.66718 14H10.6672C11.4005 14 12.0005 13.4 12.0005 12.6667V7.33333H9.33384ZM8.00051 5.33333C8.00051 6.06667 8.60051 6.66667 9.33384 6.66667H11.7272L8.00051 2.94V5.33333ZM4.66718 2H8.00051L12.6672 6.66667V12.6667C12.6672 13.7733 11.7738 14.6667 10.6672 14.6667H4.66718C3.56051 14.6667 2.66718 13.7733 2.66718 12.6667V4C2.66718 2.89333 3.56051 2 4.66718 2Z" fill="white"/>
+</svg>
diff --git a/packages/icons/svgs/image-outline.svg b/packages/icons/svgs/image-outline.svg
new file mode 100755
index 000000000..5e160b15d
--- /dev/null
+++ b/packages/icons/svgs/image-outline.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33282 2H11.9995C13.1062 2 13.9995 2.89333 13.9995 4V12.6667C13.9995 13.7733 13.1062 14.6667 11.9995 14.6667H3.33282C2.22616 14.6667 1.33282 13.7733 1.33282 12.6667V4C1.33282 2.89333 2.22616 2 3.33282 2ZM3.33282 2.66667C2.59949 2.66667 1.99949 3.26667 1.99949 4V11.7267L4.85949 8.86L6.52616 10.5267L9.85949 7.19333L13.3328 10.6667V4C13.3328 3.26667 12.7328 2.66667 11.9995 2.66667H3.33282ZM6.52616 11.4733L4.85949 9.80667L1.99949 12.6667C1.99949 13.4 2.59949 14 3.33282 14H11.9995C12.7328 14 13.3328 13.4 13.3328 12.6667V11.6067L9.85949 8.14L6.52616 11.4733ZM4.99949 4C5.91949 4 6.66616 4.74667 6.66616 5.66667C6.66616 6.58667 5.91949 7.33333 4.99949 7.33333C4.07949 7.33333 3.33282 6.58667 3.33282 5.66667C3.33282 4.74667 4.07949 4 4.99949 4ZM4.99949 4.66667C4.44616 4.66667 3.99949 5.11333 3.99949 5.66667C3.99949 6.22 4.44616 6.66667 4.99949 6.66667C5.55282 6.66667 5.99949 6.22 5.99949 5.66667C5.99949 5.11333 5.55282 4.66667 4.99949 4.66667Z" fill="white"/>
+</svg>
diff --git a/packages/icons/svgs/lock.svg b/packages/icons/svgs/lock.svg
new file mode 100755
index 000000000..eec2609ed
--- /dev/null
+++ b/packages/icons/svgs/lock.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1792_1075)">
+<path d="M9 4H8.5V3C8.5 1.62 7.38 0.5 6 0.5C4.62 0.5 3.5 1.62 3.5 3V4H3C2.45 4 2 4.45 2 5V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V5C10 4.45 9.55 4 9 4ZM4.5 3C4.5 2.17 5.17 1.5 6 1.5C6.83 1.5 7.5 2.17 7.5 3V4H4.5V3ZM9 10H3V5H9V10ZM6 8.5C6.55 8.5 7 8.05 7 7.5C7 6.95 6.55 6.5 6 6.5C5.45 6.5 5 6.95 5 7.5C5 8.05 5.45 8.5 6 8.5Z" fill="#181818"/>
+</g>
+<defs>
+<clipPath id="clip0_1792_1075">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/intl/locale/en.po b/packages/intl/locale/en.po
index 1b2b5da38..9a9edff30 100644
--- a/packages/intl/locale/en.po
+++ b/packages/intl/locale/en.po
@@ -792,6 +792,10 @@ msgstr "Add to notebook"
 msgid "Add your first note"
 msgstr "Add your first note"
 
+#: src/strings.ts:2794
+msgid "Add Your First Note"
+msgstr "Add Your First Note"
+
 #: src/strings.ts:991
 msgid "Add your first notebook"
 msgstr "Add your first notebook"
@@ -1922,6 +1926,10 @@ msgstr "Confirm password required"
 msgid "Confirm pin"
 msgstr "Confirm pin"
 
+#: src/strings.ts:1380
+msgid "Confirm your email to sync notes"
+msgstr "Confirm your email to sync notes"
+
 #: src/strings.ts:2674
 msgid "Confirmation email sent"
 msgstr "Confirmation email sent"
@@ -4580,6 +4588,10 @@ msgstr "No notebooks selected to move"
 msgid "No notebooks yet"
 msgstr "No notebooks yet"
 
+#: src/strings.ts:2791
+msgid "No notes yet"
+msgstr "No notes yet"
+
 #: src/strings.ts:202
 msgid "No one can view this {type} except you."
 msgstr "No one can view this {type} except you."
@@ -5066,10 +5078,6 @@ msgstr "Plan limits"
 msgid "Plans"
 msgstr "Plans"
 
-#: src/strings.ts:1380
-msgid "Please confirm your email to sync notes"
-msgstr "Please confirm your email to sync notes"
-
 #: src/strings.ts:1018
 msgid "Please confirm your identity by entering a recovery code."
 msgstr "Please confirm your identity by entering a recovery code."
@@ -8242,6 +8250,10 @@ msgstr "Your support request has been forwarded to our support team. We will get
 msgid "Your tags"
 msgstr "Your tags"
 
+#: src/strings.ts:2793
+msgid "Your thoughts deserve a home. Create your first note and start organizing your life today."
+msgstr "Your thoughts deserve a home. Create your first note and start organizing your life today."
+
 #: src/strings.ts:690
 msgid "yr"
 msgstr "yr"
diff --git a/packages/intl/locale/pseudo-LOCALE.po b/packages/intl/locale/pseudo-LOCALE.po
index eb5b952f5..8f95cd92d 100644
--- a/packages/intl/locale/pseudo-LOCALE.po
+++ b/packages/intl/locale/pseudo-LOCALE.po
@@ -792,6 +792,10 @@ msgstr ""
 msgid "Add your first note"
 msgstr ""
 
+#: src/strings.ts:2794
+msgid "Add Your First Note"
+msgstr ""
+
 #: src/strings.ts:991
 msgid "Add your first notebook"
 msgstr ""
@@ -1911,6 +1915,10 @@ msgstr ""
 msgid "Confirm pin"
 msgstr ""
 
+#: src/strings.ts:1380
+msgid "Confirm your email to sync notes"
+msgstr ""
+
 #: src/strings.ts:2674
 msgid "Confirmation email sent"
 msgstr ""
@@ -4560,6 +4568,10 @@ msgstr ""
 msgid "No notebooks yet"
 msgstr ""
 
+#: src/strings.ts:2791
+msgid "No notes yet"
+msgstr ""
+
 #: src/strings.ts:202
 msgid "No one can view this {type} except you."
 msgstr ""
@@ -5040,10 +5052,6 @@ msgstr ""
 msgid "Plans"
 msgstr ""
 
-#: src/strings.ts:1380
-msgid "Please confirm your email to sync notes"
-msgstr ""
-
 #: src/strings.ts:1018
 msgid "Please confirm your identity by entering a recovery code."
 msgstr ""
@@ -8181,6 +8189,10 @@ msgstr ""
 msgid "Your tags"
 msgstr ""
 
+#: src/strings.ts:2793
+msgid "Your thoughts deserve a home. Create your first note and start organizing your life today."
+msgstr ""
+
 #: src/strings.ts:690
 msgid "yr"
 msgstr ""
diff --git a/packages/intl/src/strings.ts b/packages/intl/src/strings.ts
index 20cfff356..009d79059 100644
--- a/packages/intl/src/strings.ts
+++ b/packages/intl/src/strings.ts
@@ -1377,7 +1377,7 @@ $day$: Current day (eg. Monday)`,
   loginMessage: () => t`You are not logged in`,
   loginMessageActionText: () => t`Login to encrypt and sync notes`,
   syncDisabled: () => t`Sync is disabled`,
-  syncDisabledActionText: () => t`Please confirm your email to sync notes`,
+  syncDisabledActionText: () => t`Confirm your email to sync notes`,
   autoBackupsOffMessage: () => t`Automatic backups are off`,
   autoBackupsOffActionText: () =>
     t`Get Notesnook Pro to enable automatic backups`,
@@ -2853,5 +2853,11 @@ Continue without attachments?`,
   tagsEmptyBody: () =>
     t`Create your first tag to start organizing your workspace.`,
   newestFirst: () => t`Newest First`,
-  oldestFirst: () => t`Oldest First`
+  oldestFirst: () => t`Oldest First`,
+  notePlaceholder: {
+    title: () => t`No notes yet`,
+    description: () =>
+      t`Your thoughts deserve a home. Create your first note and start organizing your life today.`,
+    button: () => t`Add Your First Note`
+  }
 };