diff --git a/apps/mobile/app/components/auth/auth-modal.js b/apps/mobile/app/components/auth/auth-modal.js
index 2da011237..459aa36c7 100644
--- a/apps/mobile/app/components/auth/auth-modal.js
+++ b/apps/mobile/app/components/auth/auth-modal.js
@@ -126,11 +126,11 @@ const AuthModal = () => {
 
         {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
           <Button
-            title="Skip for now"
+            title="Skip"
             onPress={() => {
               hideAuth();
             }}
-            iconSize={20}
+            iconSize={16}
             type="gray"
             iconPosition="right"
             icon="chevron-right"
diff --git a/apps/mobile/app/components/auth/login.js b/apps/mobile/app/components/auth/login.js
index eb0d3ceb5..9b784c9f2 100644
--- a/apps/mobile/app/components/auth/login.js
+++ b/apps/mobile/app/components/auth/login.js
@@ -18,9 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useEffect, useState } from "react";
-import { View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
-import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import { useThemeStore } from "../../stores/use-theme-store";
@@ -30,13 +29,12 @@ import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
-import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { SVG } from "./background";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -64,6 +62,7 @@ export const Login = ({ changeMode }) => {
     await sleep(500);
     Progress.present();
   });
+  const deviceMode = useSettingStore((state) => state.deviceMode);
 
   useEffect(() => {
     async () => {
@@ -82,62 +81,70 @@ export const Login = ({ changeMode }) => {
     <>
       <ForgotPassword />
       <SheetProvider context="two_factor_verify" />
-      <Animated.View
-        entering={FadeInDown}
-        exiting={FadeOutUp}
+      <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
+          alignSelf: "center",
+          height: "100%",
           minHeight: "100%"
         }}
       >
         <View
           style={{
-            height: 250,
-            overflow: "hidden"
-          }}
-        >
-          <SvgView
-            src={SVG(colors.night ? colors.icon : "black")}
-            height={700}
-          />
-        </View>
-        <View
-          style={{
-            width: "100%",
-            justifyContent: "center",
-            alignSelf: "center",
-            paddingHorizontal: 12,
-            marginBottom: 30,
-            marginTop: 15
+            flex: 0.45,
+            justifyContent: "flex-end",
+            paddingHorizontal: 20,
+            backgroundColor: colors.nav,
+            marginBottom: 20,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.border,
+            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            marginTop: deviceMode !== "mobile" ? 50 : null,
+            width: deviceMode === "mobile" ? null : "50%"
           }}
         >
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <View
+              style={{
+                width: 100,
+                height: 5,
+                backgroundColor: colors.accent,
+                borderRadius: 2,
+                marginRight: 7
+              }}
+            />
+
+            <View
+              style={{
+                width: 20,
+                height: 5,
+                backgroundColor: colors.nav,
+                borderRadius: 2
+              }}
+            />
+          </View>
           <Heading
             style={{
-              textAlign: "center"
+              marginBottom: 25,
+              marginTop: 10
             }}
-            size={30}
-            color={colors.heading}
+            extraBold
+            size={SIZE.xxl}
           >
-            Welcome back!
+            Login to your {"\n"}account
           </Heading>
-          <Paragraph
-            style={{
-              textDecorationLine: "underline",
-              textAlign: "center",
-              marginTop: 5
-            }}
-            onPress={() => {
-              if (loading) return;
-              changeMode(1);
-            }}
-            size={SIZE.md}
-          >
-            {"Don't have an account? Sign up"}
-          </Paragraph>
         </View>
+
         <View
           style={{
             width: DDS.isTab
@@ -147,10 +154,9 @@ export const Login = ({ changeMode }) => {
               : focused
               ? "100%"
               : "99.9%",
-            padding: 12,
             backgroundColor: colors.bg,
-            flexGrow: 1,
-            alignSelf: "center"
+            alignSelf: "center",
+            paddingHorizontal: 20
           }}
         >
           <Input
@@ -217,28 +223,22 @@ export const Login = ({ changeMode }) => {
 
           <View
             style={{
-              marginTop: 25,
-              alignSelf: "center"
+              marginTop: 25
             }}
           >
             <Button
-              style={{
-                width: 250,
-                borderRadius: 100
-              }}
               loading={loading}
               onPress={() => {
                 if (loading) return;
                 login();
               }}
+              style={{
+                width: 250,
+                borderRadius: 100
+              }}
+              fontSize={SIZE.md}
               type="accent"
-              title={
-                loading
-                  ? null
-                  : step === LoginSteps.emailAuth
-                  ? "Login"
-                  : "Continue"
-              }
+              title={!loading ? "Continue" : null}
             />
 
             {step === LoginSteps.passwordAuth && (
@@ -261,9 +261,34 @@ export const Login = ({ changeMode }) => {
                 type="errorShade"
               />
             )}
+
+            {!loading ? (
+              <TouchableOpacity
+                onPress={() => {
+                  if (loading) return;
+                  changeMode(1);
+                }}
+                activeOpacity={0.8}
+                style={{
+                  alignSelf: "center",
+                  marginTop: 12,
+                  paddingVertical: 12
+                }}
+              >
+                <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+                  Don't have an account?{" "}
+                  <Paragraph
+                    size={SIZE.xs + 1}
+                    style={{ color: colors.accent }}
+                  >
+                    Sign up
+                  </Paragraph>
+                </Paragraph>
+              </TouchableOpacity>
+            ) : null}
           </View>
         </View>
-      </Animated.View>
+      </View>
     </>
   );
 };
diff --git a/apps/mobile/app/components/auth/signup.js b/apps/mobile/app/components/auth/signup.js
index 2eaffd61c..56e1e6e7c 100644
--- a/apps/mobile/app/components/auth/signup.js
+++ b/apps/mobile/app/components/auth/signup.js
@@ -18,8 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { Dimensions, View } from "react-native";
-import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
+import { TouchableOpacity, View } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
@@ -32,11 +31,10 @@ import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
-import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { SVG } from "./background";
 import { hideAuth } from "./common";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 export const Signup = ({ changeMode, trial }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -50,6 +48,7 @@ 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 validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
@@ -96,69 +95,77 @@ export const Signup = ({ changeMode, trial }) => {
 
   return (
     <>
-      <Animated.View
-        entering={FadeInDown}
-        exiting={FadeOutUp}
+      <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
+          alignSelf: "center",
+          height: "100%",
           minHeight: "100%"
         }}
       >
         <View
           style={{
-            height: 250,
-            overflow: "hidden"
+            flex: 0.35,
+            justifyContent: "flex-end",
+            paddingHorizontal: 20,
+            backgroundColor: colors.nav,
+            marginBottom: 20,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.border,
+            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            marginTop: deviceMode !== "mobile" ? 50 : null,
+            width: deviceMode === "mobile" ? null : "50%"
           }}
         >
-          <SvgView
-            src={SVG(colors.night ? colors.icon : "black")}
-            height={700}
-          />
+          <View
+            style={{
+              flexDirection: "row"
+            }}
+          >
+            <View
+              style={{
+                width: 100,
+                height: 5,
+                backgroundColor: colors.accent,
+                borderRadius: 2,
+                marginRight: 7
+              }}
+            />
+
+            <View
+              style={{
+                width: 20,
+                height: 5,
+                backgroundColor: colors.nav,
+                borderRadius: 2
+              }}
+            />
+          </View>
+          <Heading
+            extraBold
+            style={{
+              marginBottom: 25,
+              marginTop: 10
+            }}
+            size={SIZE.xxl}
+          >
+            Create your {"\n"}account
+          </Heading>
         </View>
 
-        <View
-          style={{
-            width: "100%",
-            justifyContent: "center",
-            alignSelf: "center",
-            paddingHorizontal: 12,
-            marginBottom: 30,
-            marginTop: Dimensions.get("window").height < 700 ? -75 : 15
-          }}
-        >
-          <Heading
-            style={{
-              textAlign: "center"
-            }}
-            size={30}
-            color={colors.heading}
-          >
-            Create your account
-          </Heading>
-          <Paragraph
-            style={{
-              textDecorationLine: "underline",
-              textAlign: "center"
-            }}
-            onPress={() => {
-              if (loading) return;
-              changeMode(0);
-            }}
-            size={SIZE.md}
-          >
-            Already have an account? Log in
-          </Paragraph>
-        </View>
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            padding: 12,
+            paddingHorizontal: 20,
             backgroundColor: colors.bg,
-            flexGrow: 1,
-            alignSelf: "center"
+            alignSelf: "center",
+            flex: 0.6
           }}
         >
           <Input
@@ -217,37 +224,13 @@ export const Signup = ({ changeMode, trial }) => {
             validationType="confirmPassword"
             customValidator={() => password.current}
             placeholder="Confirm password"
-            marginBottom={5}
+            marginBottom={12}
             onSubmit={signup}
           />
-          <View
-            style={{
-              marginTop: 25,
-              alignSelf: "center"
-            }}
-          >
-            <Button
-              style={{
-                width: 250,
-                borderRadius: 100
-              }}
-              loading={loading}
-              onPress={() => {
-                if (loading) return;
-                signup();
-              }}
-              type="accent"
-              title={loading ? null : "Agree and continue"}
-            />
-          </View>
 
           <Paragraph
             style={{
-              textAlign: "center",
-              position: "absolute",
-              bottom: 0,
-              alignSelf: "center",
-              marginBottom: 20
+              marginBottom: 25
             }}
             size={SIZE.xs}
             color={colors.icon}
@@ -263,7 +246,7 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.accent}
             >
-              terms of service{" "}
+              Terms of Service{" "}
             </Paragraph>
             and{" "}
             <Paragraph
@@ -276,11 +259,46 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.accent}
             >
-              privacy policy.
-            </Paragraph>
+              Privacy Policy.
+            </Paragraph>{" "}
+            You also agree to recieve marketing emails from us which you can
+            opt-out of from app settings.
           </Paragraph>
+
+          <Button
+            title={!loading ? "Continue" : null}
+            type="accent"
+            loading={loading}
+            onPress={signup}
+            fontSize={SIZE.md}
+            style={{
+              marginRight: 12,
+              width: 250,
+              borderRadius: 100
+            }}
+          />
+
+          <TouchableOpacity
+            onPress={() => {
+              if (loading) return;
+              changeMode(0);
+            }}
+            activeOpacity={0.8}
+            style={{
+              alignSelf: "center",
+              marginTop: 12,
+              paddingVertical: 12
+            }}
+          >
+            <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+              Already have an account?{" "}
+              <Paragraph size={SIZE.xs + 1} style={{ color: colors.accent }}>
+                Login
+              </Paragraph>
+            </Paragraph>
+          </TouchableOpacity>
         </View>
-      </Animated.View>
+      </View>
     </>
   );
 };
diff --git a/apps/mobile/app/components/intro/index.js b/apps/mobile/app/components/intro/index.js
index 55e07c122..c502d617a 100644
--- a/apps/mobile/app/components/intro/index.js
+++ b/apps/mobile/app/components/intro/index.js
@@ -19,104 +19,193 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import {
-  Dimensions,
-  Image,
+  Linking,
   TouchableOpacity,
   useWindowDimensions,
   View
 } from "react-native";
+import { SwiperFlatList } from "react-native-swiper-flatlist";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import { DDS } from "../../services/device-detection";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevation } from "../../utils";
-import { tabBarRef } from "../../utils/global-refs";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
-import { SvgView } from "../ui/svg";
-import { BouncingView } from "../ui/transitions/bouncing-view";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
-let SVG_D = (color, color2) =>
-  `<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="485.83373" height="483.5" viewBox="0 0 485.83373 483.5" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M677.54186,336.34717H597.80041a11.47812,11.47812,0,0,1-9.06567-4.39356h0a11.62154,11.62154,0,0,1-2.17652-9.96777,201.63052,201.63052,0,0,0-.00049-93.647,11.62425,11.62425,0,0,1,2.17676-9.96729,11.47753,11.47753,0,0,1,9.06592-4.39355h79.74145a11.6235,11.6235,0,0,1,11.439,9.75537,337.96108,337.96108,0,0,1,0,102.8584A11.6235,11.6235,0,0,1,677.54186,336.34717Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M597.80041,219.978a5.51264,5.51264,0,0,0-4.35449,2.1084,5.65943,5.65943,0,0,0-1.05371,4.85351,207.656,207.656,0,0,1,.00048,96.44531,5.65638,5.65638,0,0,0,1.053,4.85254l.00049.00049a5.5112,5.5112,0,0,0,4.35425,2.10889h79.74145a5.58248,5.58248,0,0,0,5.50879-4.667,331.9854,331.9854,0,0,0,0-101.03516,5.58248,5.58248,0,0,0-5.50879-4.667Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M660.14054,248.82872h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00633,6.00633,0,0,1,5.99977-5.99977h41.845a6.00633,6.00633,0,0,1,5.99976,5.99977V242.829A6.00632,6.00632,0,0,1,660.14054,248.82872Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M660.14054,278.4545h-41.845a6.00632,6.00632,0,0,1-5.99977-5.99976V270.1101a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34464A6.00632,6.00632,0,0,1,660.14054,278.4545Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M660.14054,308.08029h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34463A6.00632,6.00632,0,0,1,660.14054,308.08029Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M827.54186,412.34717H747.80041a11.47812,11.47812,0,0,1-9.06567-4.39356h0a11.62154,11.62154,0,0,1-2.17652-9.96777,201.63052,201.63052,0,0,0-.00049-93.647,11.62425,11.62425,0,0,1,2.17676-9.96729,11.47753,11.47753,0,0,1,9.06592-4.39355h79.74145a11.6235,11.6235,0,0,1,11.439,9.75537,337.96108,337.96108,0,0,1,0,102.8584A11.6235,11.6235,0,0,1,827.54186,412.34717Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M747.80041,295.978a5.51264,5.51264,0,0,0-4.35449,2.1084,5.65943,5.65943,0,0,0-1.05371,4.85351,207.656,207.656,0,0,1,.00048,96.44531,5.65638,5.65638,0,0,0,1.053,4.85254l.00049.00049a5.5112,5.5112,0,0,0,4.35425,2.10889h79.74145a5.58248,5.58248,0,0,0,5.50879-4.667,331.9854,331.9854,0,0,0,0-101.03516,5.58248,5.58248,0,0,0-5.50879-4.667Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M668.54186,498.84717H588.80041a11.97546,11.97546,0,0,1-9.45825-4.584,12.1192,12.1192,0,0,1-2.27-10.394,201.13112,201.13112,0,0,0-.00049-93.41357,12.12077,12.12077,0,0,1,2.27026-10.39356,11.97561,11.97561,0,0,1,9.4585-4.584h79.74145a12.12667,12.12667,0,0,1,11.93311,10.1792,338.45925,338.45925,0,0,1,0,103.01074A12.12668,12.12668,0,0,1,668.54186,498.84717Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M810.14054,339.82872h-41.845a6.00633,6.00633,0,0,1-5.99977-5.99977v-2.34463a6.00633,6.00633,0,0,1,5.99977-5.99977h41.845a6.00633,6.00633,0,0,1,5.99976,5.99977V333.829A6.00632,6.00632,0,0,1,810.14054,339.82872Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M810.14054,369.4545h-41.845a6.00632,6.00632,0,0,1-5.99977-5.99976V361.1101a6.00632,6.00632,0,0,1,5.99977-5.99976h41.845a6.00632,6.00632,0,0,1,5.99976,5.99976v2.34464A6.00632,6.00632,0,0,1,810.14054,369.4545Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><circle cx="271.81102" cy="228.5" r="23" fill="${color}"/><path d="M639.89416,433.75h-8v-8a3,3,0,0,0-6,0v8h-8a3,3,0,0,0,0,6h8v8a3,3,0,0,0,6,0v-8h8a3,3,0,0,0,0-6Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M657.89416,225.25h-42a4.50508,4.50508,0,0,1-4.5-4.5v-8a4.50508,4.50508,0,0,1,4.5-4.5h42a4.50508,4.50508,0,0,1,4.5,4.5v8A4.50508,4.50508,0,0,1,657.89416,225.25Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M809.89416,302.25h-42a4.50508,4.50508,0,0,1-4.5-4.5v-8a4.50508,4.50508,0,0,1,4.5-4.5h42a4.50508,4.50508,0,0,1,4.5,4.5v8A4.50508,4.50508,0,0,1,809.89416,302.25Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><polygon points="88.596 471.061 100.856 471.061 104.689 423.773 88.594 423.773 88.596 471.061" fill="#ffb8b8"/><path d="M442.55234,675.30845l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38647,15.38623v.5l-39.53051.00146Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><polygon points="22.596 471.061 34.856 471.061 40.689 423.773 22.594 423.773 22.596 471.061" fill="#ffb8b8"/><path d="M376.55234,675.30845l24.1438-.001h.001a15.38605,15.38605,0,0,1,15.38647,15.38623v.5l-39.53051.00146Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><path d="M381.85436,664.37256a4.98141,4.98141,0,0,1-3.375-1.31836h0a4.961,4.961,0,0,1-1.61572-3.53711L371.947,483.30371l69.81115,17.45215,21.53955,64.61768a70.461,70.461,0,0,1,3.54541,25.82421l-2.67456,62.63672a4.996,4.996,0,0,1-4.99438,4.75879h-11.709a5.02349,5.02349,0,0,1-4.95483-4.32959l-8.3689-69.1416a37.82338,37.82338,0,0,0-5.53173-15.16406l-16.46949-26.07617a1.00011,1.00011,0,0,0-1.83764.41015L397.378,659.38037a4.99328,4.99328,0,0,1-4.687,4.39649l-10.552.58691C382.04406,664.36914,381.94934,664.37256,381.85436,664.37256Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><circle cx="73.05767" cy="136.40609" r="24.56103" fill="#ffb8b8"/><path d="M441.4237,507.92236a5.07628,5.07628,0,0,1-1.25293-.15918H440.17l-69.26428-17.75976a4.9985,4.9985,0,0,1-3.66285-5.81543L383.15,398.49707a31.21377,31.21377,0,0,1,18.24975-22.53955,30.11308,30.11308,0,0,1,28.26563,2.07519c.96973.605,1.94653,1.26465,2.90259,1.96094a30.96046,30.96046,0,0,1,12.57885,24.5293l1.2649,98.32861a5.00656,5.00656,0,0,1-4.988,5.0708Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M378.03248,508.93008a10.05576,10.05576,0,0,1,4.214-14.83233l-3.08079-35.6018,16.326,8.84848.42262,32.4515a10.11027,10.11027,0,0,1-17.8818,9.13415Z" transform="translate(-357.08314 -208.25)" fill="#ffb8b8"/><path d="M383.86511,489.38916a5.53224,5.53224,0,0,1-1.36573-.17285,5.49559,5.49559,0,0,1-3.97192-3.98633l-8.02319-31.88379a47.37028,47.37028,0,0,1,3.76123-33.13476l16.80884-32.88184a15.54083,15.54083,0,0,1,18.8081-11.01855,15.35574,15.35574,0,0,1,9.47485,7.10058,15.56707,15.56707,0,0,1,1.65406,11.91309l-23.92749,53.50586.28418,32.03564a5.5186,5.5186,0,0,1-3.58448,5.20459l-8.00732,2.97363A5.48,5.48,0,0,1,383.86511,489.38916Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M498.40087,495.83467a10.05578,10.05578,0,0,1-8.493-12.86954l-28.99341-20.88926,17.35654-6.60182,24.8717,20.84893a10.11027,10.11027,0,0,1-4.74186,19.51169Z" transform="translate(-357.08314 -208.25)" fill="#ffb8b8"/><path d="M483.223,480.58057a5.52249,5.52249,0,0,1-2.46265-.58155L451.3612,465.28174a47.381,47.381,0,0,1-22.66064-24.46533L414.74328,406.626a15.54363,15.54363,0,0,1,3.91772-21.44434,15.35158,15.35158,0,0,1,11.59034-2.54346,15.56975,15.56975,0,0,1,10.08081,6.51221l24.94507,53.03955L489.743,462.87256a5.51764,5.51764,0,0,1,1.60669,6.11182l-2.96973,8.0083a5.474,5.474,0,0,1-2.00684,2.59619,5.49717,5.49717,0,0,1-3.15014.9917Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M424.98332,369.5931c1.305.571,3.97732-9.82732,2.78025-11.90707-1.78025-3.09293-1.675-3.07072-2.85681-5.117s-1.44623-4.84712.08417-6.64761,5.072-1.56163,5.77042.69581c-.4493-4.2878,3.79189-7.73454,7.993-8.70313s8.63244-.36723,12.85668-1.22917c4.90243-1.00032,10.00316-5.10972,8.04719-10.5007a7.5931,7.5931,0,0,0-1.48106-2.43408c-2.25993-2.54094-5.42117-3.62594-8.512-4.675-6.43006-2.18246-13.036-4.39233-19.82212-4.15141A28.7977,28.7977,0,0,0,404.3967,333.533a26.15571,26.15571,0,0,0-1.08344,4.02534c-2.32924,12.52423,4.94368,24.87794,16.75623,29.64715Z" transform="translate(-357.08314 -208.25)" fill="#2f2e41"/><polygon points="38.9 273.343 39.457 240.414 56.9 205.343 42.9 241.343 38.9 273.343" opacity="0.2"/><path d="M554.16035,564.23244,480.522,533.63692a11.47817,11.47817,0,0,1-6.68609-7.53565h0a11.62155,11.62155,0,0,1,1.81454-10.04,201.63062,201.63062,0,0,0,35.9304-86.47983,11.62422,11.62422,0,0,1,5.83445-8.36925,11.47751,11.47751,0,0,1,10.05779-.57884l73.63839,30.59552a11.62349,11.62349,0,0,1,6.8205,13.39769,337.96147,337.96147,0,0,1-39.46512,94.98607A11.6235,11.6235,0,0,1,554.16035,564.23244Z" transform="translate(-357.08314 -208.25)" fill="${color2}"/><path d="M525.17093,426.17415a5.51263,5.51263,0,0,0-4.83017.27629,5.65945,5.65945,0,0,0-2.83529,4.07775,207.65608,207.65608,0,0,1-37.00407,89.064,5.65636,5.65636,0,0,0-.88946,4.88515l.00027.00064a5.51116,5.51116,0,0,0,3.21185,3.61814l73.63839,30.59552a5.58247,5.58247,0,0,0,6.87782-2.19616,331.98566,331.98566,0,0,0,38.76558-93.30238,5.58248,5.58248,0,0,0-3.29652-6.42343Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M564.38028,494.28148l-38.6424-16.05527a6.00633,6.00633,0,0,1-3.23855-7.84259l.8996-2.16518a6.00632,6.00632,0,0,1,7.84258-3.23856l38.6424,16.05527a6.00634,6.00634,0,0,1,3.23855,7.84259l-.8996,2.16518A6.00632,6.00632,0,0,1,564.38028,494.28148Z" transform="translate(-357.08314 -208.25)" fill="#808080"/><path d="M553.01334,521.63984l-38.6424-16.05527a6.00633,6.00633,0,0,1-3.23855-7.84259l.89959-2.16518a6.00634,6.00634,0,0,1,7.84259-3.23856L558.517,508.39351a6.00633,6.00633,0,0,1,3.23856,7.84258l-.8996,2.16519A6.00632,6.00632,0,0,1,553.01334,521.63984Z" transform="translate(-357.08314 -208.25)" fill="#808080"/><path d="M579.86437,455.832a4.48944,4.48944,0,0,1-1.68725-.33057l-38.938-15.74267a4.50518,4.50518,0,0,1-2.48535-5.8584l2.99878-7.417a4.50027,4.50027,0,0,1,5.85864-2.48486l38.938,15.74267a4.50518,4.50518,0,0,1,2.48535,5.8584l-2.99878,7.417a4.51079,4.51079,0,0,1-4.17139,2.81543Z" transform="translate(-357.08314 -208.25)" fill="${color}"/><path d="M498.08314,691.75h-140a1,1,0,1,1,0-2h140a1,1,0,0,1,0,2Z" transform="translate(-357.08314 -208.25)" fill="${color}"/></svg>`;
-
-export const SVG_Z =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245.487 113.9115"><g transform="translate(15.9581 -70.1437)"><path fill="#f2f2f2" d="M181.8672 183.796H88.3134v-54.8973l-.43-.2765 15.1857-14.7907a41.4878 41.4878 0 0 1 28.6939-11.8174l27.916-.2551.04.0477 22.2131 26.426-.0655.7316z" style="stroke-width:.264583"/><path fill="#fff" d="M105.9334 112.1178h55.9519v.5292h-55.9519zM100.3772 117.6741h55.9519v.5292h-55.9519z" style="stroke-width:.264583"/><path fill="#fff" d="M178.6826 154.0514h10.1706v8.9897h-10.1706z" data-name="Rectangle 371" style="stroke-width:.264583"/><path fill="#fff" d="M178.6826 138.4916h10.1706v8.8471h-10.1706z" data-name="Rectangle 372" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M166.653 102.649h9.1202v31.5648h-9.1202z" style="stroke-width:.264583"/><path fill="#e6e6e6" d="M181.8672 183.7957h-50.0656v-36.3798a35.3975 35.3975 0 0 1 8.4588-22.9515l19.3804-22.7213 22.2264 26.4599z" style="stroke-width:.264583"/><path fill="#fff" d="M155.3064 156.4369h10.1706v8.9897h-10.1706z" data-name="Rectangle 374" style="stroke-width:.264583"/><path fill="#fff" d="M155.3064 140.8768h10.1706v8.8471h-10.1706z" data-name="Rectangle 375" style="stroke-width:.264583"/><path fill="#fff" d="M106.7252 154.0514h10.1706v8.9897h-10.1706z" data-name="Rectangle 378" style="stroke-width:.264583"/><path fill="#fff" d="M106.7252 138.4916h10.1706v8.8471h-10.1706z" data-name="Rectangle 379" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M91.7626 85.332h11.0675v38.3117H91.7626z" style="stroke-width:.264583"/><path fill="#f2f2f2" d="M110.199 183.7954H-3.295v-66.6167l-.5047-.325.119-.116 20.73-20.1916A41.863 41.863 0 0 1 46.0038 84.621l37.2782-.3406.0402.0477 26.9535 32.0651-.0773.8764z" style="stroke-width:.264583"/><path fill="#e6e6e6" d="M110.199 183.7954H49.4881V134.88a29.9322 29.9322 0 0 1 7.1528-19.408l26.6087-31.1956 26.9492 32.0815Z" style="stroke-width:.264583"/><path fill="#fff" d="M80.3413 150.6172h9.8174v8.6775h-9.8174zM80.3413 135.5359h9.8174v8.6775h-9.8174z" data-name="Rectangle 381" style="stroke-width:.264583"/><path fill="#fff" d="M19.0243 147.7216H31.369v10.9112H19.0243z" data-name="Rectangle 385" style="stroke-width:.264583"/><path fill="#fff" d="M19.0243 128.8356H31.369v10.7381H19.0243z" data-name="Rectangle 386" style="stroke-width:.264583"/><ellipse cx="20.8891" cy="154.324" fill="#3f3d56" data-name="Ellipse 519" rx="8.7979" ry="17.9515" style="stroke-width:.264583"/><path fill="#808080" d="M21.7016 183.7075c-3.5237-21.1402-.0354-42.2063 0-42.4164l.6856.1162c-.0355.209-3.5036 21.1635 0 42.1862z" data-name="Path 2702" style="fill:#999;stroke-width:.264583"/><path fill="#808080" d="M-54.7406 146.1809h9.0223v.6953h-9.0223z" data-name="Rectangle 388" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-28.142)"/><path fill="#808080" d="M-129.2795 83.128h.6953v9.0226h-.6953z" data-name="Rectangle 389" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-61.842)"/><ellipse cx="-.4146" cy="141.6901" fill="#808080" data-name="Ellipse 520" rx="12.6968" ry="25.9067" style="fill:#333;stroke-width:.264583"/><path fill="#3f3d56" d="M.9996 184.0552c-5.0784-30.47-.0514-60.829 0-61.1323l.5056.0857c-.0513.3025-5.0636 30.5798 0 60.9624z" data-name="Path 2703" style="fill:#e6e6e6;stroke-width:.264583"/><path fill="#3f3d56" d="M-67.7316 125.3486h13.0209v.513h-13.0209z" data-name="Rectangle 390" style="fill:#ccc;stroke-width:.264583" transform="rotate(-28.142)"/><path fill="#3f3d56" d="M-129.3145 54.7885h.513v13.0209h-.513z" data-name="Rectangle 391" style="fill:#b3b3b3;stroke-width:.264583" transform="rotate(-61.842)"/><path fill="#3f3d56" d="m159.149 89.5463 2.7831-2.2262c-2.1621-.2381-3.0506.9406-3.413 1.874-1.6892-.7014-3.5283.2178-3.5283.2178l5.5687 2.0217a4.2137 4.2137 0 0 0-1.4097-1.8876z" data-name="Path 2708" style="stroke-width:.264583"/><path fill="#3f3d56" d="m108.853 72.401 2.7831-2.2262c-2.1621-.2381-3.0506.9406-3.413 1.874-1.6892-.7013-3.5283.2178-3.5283.2178l5.5687 2.0217a4.214 4.214 0 0 0-1.4105-1.8873z" data-name="Path 2709" style="stroke-width:.264583"/><path fill="#3f3d56" d="m178.9044 76.546 2.7831-2.2262c-2.1622-.2381-3.0506.9406-3.4131 1.874-1.6891-.7014-3.5282.2178-3.5282.2178l5.5687 2.0217a4.2138 4.2138 0 0 0-1.4097-1.8876z" data-name="Path 2710" style="stroke-width:.264583"/><path fill="#3f3d56" d="M60.5922 179.896a4.2088 4.2088 0 0 0-2.1077.5656 4.5297 4.5297 0 0 0-7.567 3.365h13.8924a4.2299 4.2299 0 0 0-4.2174-3.9304z" data-name="Path 2712" style="stroke-width:.264583"/><path fill="#3f3d56" d="M132.852 179.896a4.2088 4.2088 0 0 0-2.1076.5656 4.5297 4.5297 0 0 0-7.5671 3.365h13.8925a4.2299 4.2299 0 0 0-4.2178-3.9307z" data-name="Path 2713" style="stroke-width:.264583"/><g fill="#3f3d56" data-name="Group 204"><path d="M97.2576 176.8633H77.5234v.6366h3.0777v6.0476h.6365v-6.0476H93.225v6.0476h.6365v-6.0476h3.396z" data-name="Path 2714"/><path d="M77.5623 174.9588h19.7342v.6366H77.5623z" data-name="Rectangle 400"/><path d="M77.5623 173.3674h19.7342v.6365H77.5623z" data-name="Rectangle 401"/></g><ellipse cx="215.2396" cy="158.3491" fill="#e6e6e6" data-name="Ellipse 525" rx="7.7041" ry="15.7197" style="stroke-width:.264583"/><path fill="#3f3d56" d="M214.3815 184.0552c3.0816-18.4886.031-36.9094 0-37.0946l-.3069.053c.031.1833 3.0726 18.5551 0 36.9908z" data-name="Path 2716" style="stroke-width:.264583"/><path fill="#3f3d56" d="M-38.7353 256.9106h.3115v7.9035h-.3115z" data-name="Rectangle 406" style="stroke-width:.264583" transform="rotate(-61.847)"/><path fill="#3f3d56" d="M114.2645 243.4071h7.9035v.3115h-7.9035z" data-name="Rectangle 407" style="stroke-width:.264583" transform="rotate(-28.153)"/><g fill="#3f3d56" data-name="Group 205"><path d="M169.5172 176.8633H149.783v.6366h3.0776v6.0476h.6366v-6.0476h11.9872v6.0476h.6366v-6.0476h3.396z" data-name="Path 2714-2"/><path d="M149.8219 174.9588h19.7342v.6366h-19.7342z" data-name="Rectangle 400-2"/><path d="M149.8219 173.3674h19.7342v.6365h-19.7342z" data-name="Rectangle 401-2"/></g><path fill="#f2f2f2" d="m90.2625 105.5306-2.3728-5.5049-4.763.085-2.8892 5.488.0583.0732h-.0208v11.4152h9.981v-11.4153zM164.4423 119.3093l-1.9175-4.0238-3.849.062-2.3348 4.0115.0471.0535h-.0168v8.3438h8.0658v-8.3438z" data-name="Path 2700" style="stroke-width:.264583"/><path fill="#fff" d="M10.3066 102.6488h55.9519v.5292H10.3066zM10.3066 103.178h55.9519v.5292H10.3066zM166.653 104.181h9.1202v.5292h-9.1202zM166.653 109.7372h9.1202v.5292h-9.1202zM91.7626 87.2476h11.0675v.5292H91.7626zM91.7626 92.8039h11.0675v.5292H91.7626z" style="stroke-width:.264583"/></g></svg>';
-
 const Intro = ({ navigation }) => {
   const colors = useThemeStore((state) => state.colors);
   const isTelemetryEnabled = useSettingStore(
     (state) => state.settings.telemetry
   );
-  const { height } = useWindowDimensions();
-  const insets = useGlobalSafeAreaInsets();
-  useNavigationFocus(navigation, {
-    onFocus: () => {
-      tabBarRef.current.lock();
-    }
-  });
+  const { width } = useWindowDimensions();
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+
+  const renderItem = React.useCallback(
+    ({ item }) => (
+      <View
+        style={{
+          justifyContent: "center",
+          width: deviceMode !== "mobile" ? width / 2 : width,
+          paddingHorizontal:
+            deviceMode !== "mobile" ? (width / 2) * 0.05 : width * 0.05
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row"
+          }}
+        >
+          <View
+            style={{
+              width: 100,
+              height: 5,
+              backgroundColor: colors.accent,
+              borderRadius: 2,
+              marginRight: 7
+            }}
+          />
+
+          <View
+            style={{
+              width: 20,
+              height: 5,
+              backgroundColor: colors.nav,
+              borderRadius: 2
+            }}
+          />
+        </View>
+        <View
+          style={{
+            marginTop: 10,
+            marginBottom: 20,
+            maxWidth: "90%",
+            width: "100%"
+          }}
+        >
+          {item.headings?.map((heading) => (
+            <Heading
+              key={heading}
+              style={{
+                marginBottom: 5
+              }}
+              extraBold
+              size={SIZE.xxl}
+            >
+              {heading}
+            </Heading>
+          ))}
+
+          {item.body ? <Paragraph size={SIZE.sm}>{item.body}</Paragraph> : null}
+
+          {item.tesimonial ? (
+            <Paragraph
+              style={{
+                fontStyle: "italic",
+                fontSize: SIZE.lg
+              }}
+              onPress={() => {
+                Linking.openURL(item.link);
+              }}
+            >
+              {item.tesimonial} — {item.user}
+            </Paragraph>
+          ) : null}
+        </View>
+      </View>
+    ),
+    [colors.accent, colors.nav, deviceMode, width]
+  );
 
   return (
     <View
       testID="notesnook.splashscreen"
       style={{
         width: "100%",
-        height: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-        marginTop: insets.top
+        height: "100%"
       }}
     >
-      <Image
-        source={require("../../assets/images/notesnook.png")}
-        style={{
-          width: 40,
-          height: 40,
-          position: "absolute",
-          top: 0
-        }}
-      />
       <View
         style={{
-          flexGrow: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          marginBottom: 100
+          flex: 0.65,
+          width: deviceMode !== "mobile" ? width / 2 : "100%",
+          backgroundColor: colors.nav,
+          marginBottom: 20,
+          borderBottomWidth: 1,
+          borderBottomColor: colors.border,
+          alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+          borderWidth: deviceMode !== "mobile" ? 1 : null,
+          borderColor: deviceMode !== "mobile" ? colors.border : null,
+          borderRadius: deviceMode !== "mobile" ? 20 : null,
+          marginTop: deviceMode !== "mobile" ? 50 : null
         }}
       >
-        <SvgView
-          width={height / 4 > 200 ? 200 : height / 4}
-          height={height / 4 > 200 ? 200 : height / 4}
-          src={SVG_D(colors.nav, colors.border)}
-        />
-
-        <View
-          style={{
-            marginTop: 40,
-            marginBottom: 20,
-            maxWidth: "80%",
-            opacity: 0.8
+        <SwiperFlatList
+          autoplay
+          autoplayDelay={10}
+          autoplayLoop={true}
+          index={0}
+          useReactNativeGestureHandler={true}
+          showPagination
+          data={[
+            {
+              headings: ["Open source.", "End to end encrypted.", "Private."],
+              body: "Write notes with freedom, no spying, no tracking."
+            },
+            {
+              headings: [
+                "Privacy for everyone",
+                "— not just the",
+                "privileged few"
+              ],
+              body: "Your privacy matters to us, no matter who you are. In a world where everyone is trying to spy on you, Notesnook encrypts all your data before it leaves your device. With Notesnook no one can ever sell your data again."
+            },
+            {
+              tesimonial:
+                "You simply cannot get any better of a note taking app than @notesnook. The UI is clean and slick, it is feature rich, encrypted, reasonably priced (esp. for students & educators) & open source",
+              link: "https://twitter.com/andrewsayer/status/1637817220113002503",
+              user: "@andrewsayer on Twitter"
+            }
+          ]}
+          paginationActiveColor={colors.accent}
+          paginationStyleItem={{
+            width: 10,
+            height: 5,
+            marginRight: 4,
+            marginLeft: 4
           }}
-        >
-          <Heading>Safe & encrypted notes</Heading>
-          <Paragraph size={SIZE.md + 4}>
-            {"Write with freedom.\nNever compromise on\nprivacy again."}
-          </Paragraph>
-        </View>
+          paginationDefaultColor={colors.border}
+          renderItem={renderItem}
+        />
       </View>
 
       <View
         style={{
           width: "100%",
-          zIndex: 20,
-          position: "absolute",
-          bottom: height / 10
+          flex: 0.3,
+          justifyContent: "center"
         }}
       >
+        <Button
+          width={250}
+          onPress={async () => {
+            navigation.navigate("AppLock", {
+              welcome: true
+            });
+          }}
+          style={{
+            paddingHorizontal: 24,
+            alignSelf: "center",
+            ...getElevation(5),
+            borderRadius: 100
+          }}
+          fontSize={SIZE.md}
+          type="accent"
+          title="Get started"
+        />
+
         <TouchableOpacity
           activeOpacity={1}
           style={{
@@ -134,7 +223,7 @@ const Intro = ({ navigation }) => {
           }}
         >
           <Icon
-            size={SIZE.lg}
+            size={SIZE.md}
             name={
               isTelemetryEnabled ? "checkbox-marked" : "checkbox-blank-outline"
             }
@@ -144,61 +233,17 @@ const Intro = ({ navigation }) => {
           <Paragraph
             style={{
               flexShrink: 1,
-              marginLeft: 12
+              marginLeft: 6
             }}
-            size={SIZE.md}
+            size={SIZE.xs}
           >
             Help improve Notesnook by sending completely anonymized{" "}
-            <Heading size={SIZE.md}>private analytics and bug reports.</Heading>
+            <Heading size={SIZE.xs}>private analytics and bug reports.</Heading>
           </Paragraph>
         </TouchableOpacity>
-
-        <Button
-          fontSize={SIZE.md}
-          height={45}
-          width={250}
-          onPress={async () => {
-            navigation.navigate("AppLock", {
-              welcome: true
-            });
-          }}
-          style={{
-            paddingHorizontal: 24,
-            alignSelf: "center",
-            borderRadius: 100,
-            ...getElevation(5)
-          }}
-          type="accent"
-          title="Get started"
-        />
       </View>
-
-      {colors.night ? null : (
-        <BouncingView
-          style={{
-            position: "absolute",
-            bottom: DDS.isTab ? -300 : -100,
-            zIndex: -1
-          }}
-          duration={3000}
-        >
-          <SvgView
-            width={Dimensions.get("window").width}
-            height={Dimensions.get("window").width}
-            src={SVG_Z}
-          />
-        </BouncingView>
-      )}
     </View>
   );
 };
 
 export default Intro;
-
-/**
- * 1. Welcome Screen
- * 2. Select privacy mode
- * 3. Ask to Sign up
- * 4. Sign up
- * 5. Home Screen
- */
diff --git a/apps/mobile/app/components/launcher/index.js b/apps/mobile/app/components/launcher/index.js
index 61e9f25da..7a6fc46b6 100644
--- a/apps/mobile/app/components/launcher/index.js
+++ b/apps/mobile/app/components/launcher/index.js
@@ -42,7 +42,6 @@ import { eOpenAnnouncementDialog } from "../../utils/events";
 import { getGithubVersion } from "../../utils/github-version";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { SVG } from "../auth/background";
 import Migrate from "../sheets/migrate";
 import NewFeature from "../sheets/new-feature/index";
 import { Update } from "../sheets/update";
@@ -50,7 +49,6 @@ import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import Seperator from "../ui/seperator";
-import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { Walkthrough } from "../walkthroughs";
@@ -89,7 +87,7 @@ const Launcher = React.memo(
 
     const init = useCallback(async () => {
       if (!db.isInitialized) {
-        await RNBootSplash.hide({ fade: true });
+        RNBootSplash.hide({ fade: true });
         DatabaseLogger.info("Initializing database");
         await db.init();
       }
@@ -132,7 +130,6 @@ const Launcher = React.memo(
       if (NewFeature.present()) return;
       if (await checkAppUpdateAvailable()) return;
       if (await checkForRateAppRequest()) return;
-      if (await checkNeedsBackup()) return;
       if (await PremiumService.getRemainingTrialDaysStatus()) return;
 
       if (introCompleted) {
@@ -175,23 +172,6 @@ const Launcher = React.memo(
       return false;
     };
 
-    const checkNeedsBackup = async () => {
-      return false;
-      // let { nextBackupRequestTime, reminder } = SettingsService.get();
-      // if (reminder === 'off' || !reminder) {
-      //   if (nextBackupRequestTime < Date.now()) {
-      //     presentSheet({
-      //       title: 'Backup & restore',
-      //       paragraph: 'Please enable automatic backups to keep your data safe',
-      //       component: <SettingsBackupAndRestore isSheet={true} />
-      //     });
-
-      //     return true;
-      //   }
-      // }
-      // return false;
-    };
-
     const onUnlockBiometrics = useCallback(async () => {
       if (!(await BiometricService.isBiometryAvailable())) return;
       if (Platform.OS === "android") {
@@ -247,18 +227,10 @@ const Launcher = React.memo(
           width: "100%",
           height: "100%",
           position: "absolute",
-          zIndex: 999
+          zIndex: 999,
+          justifyContent: "center"
         }}
       >
-        <View
-          style={{
-            height: 250,
-            overflow: "hidden"
-          }}
-        >
-          <SvgView src={SVG(colors.night ? "white" : "black")} height={700} />
-        </View>
-
         <View
           style={{
             flex: 1,
@@ -294,14 +266,13 @@ const Launcher = React.memo(
               textAlign: "center"
             }}
           >
-            Unlock to access your notes
+            Unlock your notes
           </Heading>
 
           <Paragraph
             style={{
               alignSelf: "center",
               textAlign: "center",
-              fontSize: SIZE.md,
               maxWidth: "90%"
             }}
           >
@@ -312,8 +283,7 @@ const Launcher = React.memo(
             style={{
               width: "100%",
               padding: 12,
-              backgroundColor: colors.bg,
-              flexGrow: 1
+              backgroundColor: colors.bg
             }}
           >
             {user ? (
@@ -353,14 +323,9 @@ const Launcher = React.memo(
               <Button
                 title="Unlock with Biometrics"
                 width={250}
-                height={45}
-                style={{
-                  borderRadius: 100
-                }}
                 onPress={onUnlockBiometrics}
                 icon={"fingerprint"}
                 type={user ? "grayAccent" : "accent"}
-                fontSize={SIZE.md}
               />
             </View>
           </View>
diff --git a/apps/mobile/app/components/premium/compact-features.js b/apps/mobile/app/components/premium/compact-features.js
index b6f2a7a37..950effb3a 100644
--- a/apps/mobile/app/components/premium/compact-features.js
+++ b/apps/mobile/app/components/premium/compact-features.js
@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { ScrollView } from "react-native";
 import { FeatureBlock } from "./feature";
+import { ScrollView } from "react-native-actions-sheet";
 
 export const CompactFeatures = ({
   vertical,
   features = [],
-  maxHeight = 500,
+  maxHeight = 600,
   scrollRef
 }) => {
   let data = vertical
@@ -80,14 +80,11 @@ export const CompactFeatures = ({
   return (
     <ScrollView
       horizontal={!vertical}
-      nestedScrollEnabled
-      onMomentumScrollEnd={() => {
-        scrollRef?.current?.handleChildScrollEnd();
-      }}
       showsHorizontalScrollIndicator={false}
       style={{
         width: "100%",
-        maxHeight: maxHeight
+        maxHeight: maxHeight,
+        paddingHorizontal: 12
       }}
     >
       {data.map((item) => (
diff --git a/apps/mobile/app/components/premium/feature.js b/apps/mobile/app/components/premium/feature.js
index d15be7ed5..cc3493d11 100644
--- a/apps/mobile/app/components/premium/feature.js
+++ b/apps/mobile/app/components/premium/feature.js
@@ -41,18 +41,19 @@ export const FeatureBlock = ({
         flexDirection: "row",
         alignItems: "center",
         paddingHorizontal: 12,
-        marginBottom: 10
+        marginBottom: 10,
+        backgroundColor: colors.nav,
+        borderRadius: 10,
+        paddingVertical: 12
       }}
     >
-      <Icon color={colors.accent} name="check" size={SIZE.lg} />
-
       <Paragraph
         style={{
           flexWrap: "wrap",
           marginLeft: 5,
           flexShrink: 1
         }}
-        size={SIZE.md}
+        size={SIZE.sm}
       >
         {content}
       </Paragraph>
diff --git a/apps/mobile/app/components/premium/pricing-plans.js b/apps/mobile/app/components/premium/pricing-plans.js
index c6b66e344..3590c2e36 100644
--- a/apps/mobile/app/components/premium/pricing-plans.js
+++ b/apps/mobile/app/components/premium/pricing-plans.js
@@ -232,8 +232,7 @@ export const PricingPlans = ({
             width={250}
             style={{
               paddingHorizontal: 12,
-              marginBottom: 15,
-              borderRadius: 100
+              marginBottom: 15
             }}
           />
         </>
@@ -398,8 +397,7 @@ export const PricingPlans = ({
                     style={{
                       paddingHorizontal: 12,
                       marginTop: 30,
-                      marginBottom: 10,
-                      borderRadius: 100
+                      marginBottom: 10
                     }}
                   />
                   {Platform.OS !== "ios" &&
diff --git a/apps/mobile/app/components/sheet-provider/index.js b/apps/mobile/app/components/sheet-provider/index.js
index 7850519e6..c517d26d3 100644
--- a/apps/mobile/app/components/sheet-provider/index.js
+++ b/apps/mobile/app/components/sheet-provider/index.js
@@ -196,12 +196,11 @@ const SheetProvider = ({ context = "global" }) => {
             accentColor={data.iconColor || "accent"}
             accentText="light"
             type="accent"
-            height={45}
+            height={40}
             width={250}
             style={{
-              borderRadius: 100
+              marginBottom: 25
             }}
-            fontSize={SIZE.md}
           />
         ) : null}
 
diff --git a/apps/mobile/app/components/sheets/add-notebook/index.js b/apps/mobile/app/components/sheets/add-notebook/index.js
index 898ae5e75..0524bd607 100644
--- a/apps/mobile/app/components/sheets/add-notebook/index.js
+++ b/apps/mobile/app/components/sheets/add-notebook/index.js
@@ -309,7 +309,6 @@ export class AddNotebookSheet extends React.Component {
               borderRadius: 100,
               paddingHorizontal: 24
             }}
-            fontSize={SIZE.md}
             onPress={this.addNewNotebook}
           />
         </View>
diff --git a/apps/mobile/app/components/sheets/reminder/index.tsx b/apps/mobile/app/components/sheets/reminder/index.tsx
index 2df109b6d..7a1b7c55e 100644
--- a/apps/mobile/app/components/sheets/reminder/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder/index.tsx
@@ -243,7 +243,6 @@ export default function ReminderSheet({
             borderRadius: 100,
             paddingHorizontal: 24
           }}
-          fontSize={SIZE.md}
           onPress={saveReminder}
         />
       </View>
diff --git a/apps/mobile/app/components/sheets/topic-sheet/index.tsx b/apps/mobile/app/components/sheets/topic-sheet/index.tsx
index 405a0ac44..9d7ff9ccc 100644
--- a/apps/mobile/app/components/sheets/topic-sheet/index.tsx
+++ b/apps/mobile/app/components/sheets/topic-sheet/index.tsx
@@ -65,7 +65,6 @@ import { deleteItems } from "../../../utils/functions";
 import { presentDialog } from "../../dialog/functions";
 import { Properties } from "../../properties";
 import Sort from "../sort";
-import Heading from "../../ui/typography/heading";
 
 type ConfigItem = { id: string; type: string };
 class TopicSheetConfig {
diff --git a/apps/mobile/app/components/tabs/index.tsx b/apps/mobile/app/components/tabs/index.tsx
index 7c24fedde..a5facdc36 100644
--- a/apps/mobile/app/components/tabs/index.tsx
+++ b/apps/mobile/app/components/tabs/index.tsx
@@ -302,6 +302,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       translateX.value = value;
     })
     .onEnd((event) => {
+      if (locked.value || forcedLock.value) return;
       if (currentTab.value === 2 && Platform.OS === "android") return;
       const velocityX =
         event.velocityX < 0 ? event.velocityX * -1 : event.velocityX;
diff --git a/apps/mobile/app/components/ui/input/index.tsx b/apps/mobile/app/components/ui/input/index.tsx
index 8d61fdd7e..87339cb2a 100644
--- a/apps/mobile/app/components/ui/input/index.tsx
+++ b/apps/mobile/app/components/ui/input/index.tsx
@@ -119,7 +119,7 @@ const Input = ({
     ? colors.red
     : focus
     ? customColor || colors.accent
-    : colors.nav;
+    : colors.border;
 
   const validate = async (value: string) => {
     if (!validationType) return;
diff --git a/apps/mobile/app/components/ui/sheet/index.js b/apps/mobile/app/components/ui/sheet/index.js
index 0bee3343a..c53b06f5f 100644
--- a/apps/mobile/app/components/ui/sheet/index.js
+++ b/apps/mobile/app/components/ui/sheet/index.js
@@ -105,6 +105,9 @@ const SheetWrapper = ({
       defaultOverlayOpacity={overlayOpacity}
       overlayColor={pitchBlack ? "#585858" : "#2b2b2b"}
       keyboardShouldPersistTaps="always"
+      openAnimationConfig={{
+        friction: 9
+      }}
       ExtraOverlayComponent={
         <>
           {overlay}
diff --git a/apps/mobile/app/components/ui/typography/heading.tsx b/apps/mobile/app/components/ui/typography/heading.tsx
index 03e65ee79..16958f8c0 100644
--- a/apps/mobile/app/components/ui/typography/heading.tsx
+++ b/apps/mobile/app/components/ui/typography/heading.tsx
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useMemo } from "react";
-import { Platform, Text, TextProps } from "react-native";
+import { Platform, Text, TextProps, ViewStyle } from "react-native";
 import Animated, {
   ComplexAnimationBuilder,
   Layout
@@ -30,15 +30,26 @@ interface HeadingProps extends TextProps {
   size?: number;
   layout?: ComplexAnimationBuilder;
   animated?: boolean;
+  extraBold?: boolean;
 }
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
+const extraBoldStyle = {
+  fontFamily: Platform.OS === "android" ? "OpenSans-Bold" : undefined,
+  fontWeight: Platform.OS === "ios" ? "800" : undefined
+};
+const boldStyle = {
+  fontFamily: Platform.OS === "android" ? "OpenSans-SemiBold" : undefined,
+  fontWeight: Platform.OS === "ios" ? "600" : undefined
+};
+
 const Heading = ({
   color,
   size = SIZE.xl,
   style,
   animated,
+  extraBold,
   ...restProps
 }: HeadingProps) => {
   const colors = useThemeStore((state) => state.colors);
@@ -53,11 +64,9 @@ const Heading = ({
       style={[
         {
           fontSize: size || SIZE.xl,
-          color: color || colors.heading,
-          fontFamily:
-            Platform.OS === "android" ? "OpenSans-SemiBold" : undefined,
-          fontWeight: Platform.OS === "ios" ? "600" : undefined
+          color: color || colors.heading
         },
+        extraBold ? (extraBoldStyle as ViewStyle) : (boldStyle as ViewStyle),
         style
       ]}
     ></Component>
diff --git a/apps/mobile/app/navigation/navigation-stack.js b/apps/mobile/app/navigation/navigation-stack.js
index 360dfa77b..e56b747cf 100644
--- a/apps/mobile/app/navigation/navigation-stack.js
+++ b/apps/mobile/app/navigation/navigation-stack.js
@@ -50,6 +50,7 @@ import { useSettingStore } from "../stores/use-setting-store";
 import { useThemeStore } from "../stores/use-theme-store";
 import { history } from "../utils";
 import { rootNavigatorRef } from "../utils/global-refs";
+import Auth from "../components/auth";
 const NativeStack = createNativeStackNavigator();
 const IntroStack = createNativeStackNavigator();
 
@@ -64,6 +65,7 @@ const IntroStack = createNativeStackNavigator();
 
 const IntroStackNavigator = () => {
   const colors = useThemeStore((state) => state.colors);
+  const height = useSettingStore((state) => state.dimensions.height);
   return (
     <IntroStack.Navigator
       screenOptions={{
@@ -71,12 +73,14 @@ const IntroStackNavigator = () => {
         lazy: false,
         animation: "none",
         contentStyle: {
-          backgroundColor: colors.bg
+          backgroundColor: colors.bg,
+          minHeight: height
         }
       }}
       initialRouteName={"Intro"}
     >
       <NativeStack.Screen name="Intro" component={Intro} />
+      <NativeStack.Screen name="Auth" component={Auth} />
       <NativeStack.Screen name="AppLock" component={AppLock} />
     </IntroStack.Navigator>
   );
@@ -120,7 +124,7 @@ const _Tabs = () => {
         animation: "none",
         contentStyle: {
           backgroundColor: colors.bg,
-          height: !introCompleted ? undefined : screenHeight
+          minHeight: !introCompleted ? undefined : screenHeight
         }
       }}
     >
diff --git a/apps/mobile/app/navigation/tabs-holder.js b/apps/mobile/app/navigation/tabs-holder.js
index abd76113e..894742ff7 100644
--- a/apps/mobile/app/navigation/tabs-holder.js
+++ b/apps/mobile/app/navigation/tabs-holder.js
@@ -271,13 +271,13 @@ const _TabsHolder = () => {
     setTimeout(() => {
       switch (current) {
         case "tablet":
-          introCompleted && tabBarRef.current?.goToIndex(0, false);
+          tabBarRef.current?.goToIndex(0, false);
           break;
         case "smallTablet":
           if (!fullscreen) {
-            introCompleted && tabBarRef.current?.closeDrawer(false);
+            tabBarRef.current?.closeDrawer(false);
           } else {
-            introCompleted && tabBarRef.current?.openDrawer(false);
+            tabBarRef.current?.openDrawer(false);
           }
           break;
         case "mobile":
@@ -416,64 +416,66 @@ const _TabsHolder = () => {
         backgroundColor="transparent"
       />
 
-      {deviceMode && widths[deviceMode] ? (
-        <FluidTabs
-          ref={tabBarRef}
-          dimensions={dimensions}
-          widths={!introCompleted ? widths["mobile"] : widths[deviceMode]}
-          enabled={deviceMode !== "tablet" && !fullscreen}
-          onScroll={onScroll}
-          onChangeTab={onChangeTab}
-          onDrawerStateChange={() => true}
-        >
-          <View
-            key="1"
-            style={{
-              height: "100%",
-              width: fullscreen
-                ? 0
-                : widths[!introCompleted ? "mobile" : deviceMode]?.a
-            }}
-          >
-            <SideMenu />
-          </View>
-
-          <View
-            key="2"
-            style={{
-              height: "100%",
-              width: fullscreen
-                ? 0
-                : widths[!introCompleted ? "mobile" : deviceMode]?.b
-            }}
-          >
-            {deviceMode === "mobile" ? (
-              <Animated.View
-                onTouchEnd={() => {
-                  tabBarRef.current?.closeDrawer();
-                  animatedOpacity.value = withTiming(0);
-                  animatedTranslateY.value = withTiming(-9999);
+      {!introCompleted ? (
+        <NavigationStack />
+      ) : (
+        <>
+          {deviceMode && widths[deviceMode] ? (
+            <FluidTabs
+              ref={tabBarRef}
+              dimensions={dimensions}
+              widths={widths[deviceMode]}
+              enabled={deviceMode !== "tablet" && !fullscreen}
+              onScroll={onScroll}
+              onChangeTab={onChangeTab}
+              onDrawerStateChange={() => true}
+            >
+              <View
+                key="1"
+                style={{
+                  height: "100%",
+                  width: fullscreen ? 0 : widths[deviceMode]?.a
                 }}
-                style={[
-                  {
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    zIndex: 999,
-                    backgroundColor: "rgba(0,0,0,0.2)"
-                  },
-                  animatedStyle
-                ]}
-                ref={overlayRef}
-              />
-            ) : null}
+              >
+                <SideMenu />
+              </View>
 
-            <NavigationStack />
-          </View>
+              <View
+                key="2"
+                style={{
+                  height: "100%",
+                  width: fullscreen ? 0 : widths[deviceMode]?.b
+                }}
+              >
+                {deviceMode === "mobile" ? (
+                  <Animated.View
+                    onTouchEnd={() => {
+                      tabBarRef.current?.closeDrawer();
+                      animatedOpacity.value = withTiming(0);
+                      animatedTranslateY.value = withTiming(-9999);
+                    }}
+                    style={[
+                      {
+                        position: "absolute",
+                        width: "100%",
+                        height: "100%",
+                        zIndex: 999,
+                        backgroundColor: "rgba(0,0,0,0.2)"
+                      },
+                      animatedStyle
+                    ]}
+                    ref={overlayRef}
+                  />
+                ) : null}
 
-          <EditorWrapper key="3" width={widths} dimensions={dimensions} />
-        </FluidTabs>
-      ) : null}
+                <NavigationStack />
+              </View>
+
+              <EditorWrapper key="3" width={widths} dimensions={dimensions} />
+            </FluidTabs>
+          ) : null}
+        </>
+      )}
     </View>
   );
 };
diff --git a/apps/mobile/app/package.json b/apps/mobile/app/package.json
index f7cfbd735..f14a9b0eb 100644
--- a/apps/mobile/app/package.json
+++ b/apps/mobile/app/package.json
@@ -28,7 +28,8 @@
     "zustand": "^3.6.0",
     "fflate": "^0.7.3",
     "timeago.js": "4.0.2",
-    "react-native-blob-util": "0.17.3"
+    "react-native-blob-util": "0.17.3",
+    "react-native-swiper-flatlist": "3.2.2"
   },
   "sideEffects": false
 }
diff --git a/apps/mobile/app/screens/editor/index.tsx b/apps/mobile/app/screens/editor/index.tsx
index 36c02f99c..53f42cab4 100755
--- a/apps/mobile/app/screens/editor/index.tsx
+++ b/apps/mobile/app/screens/editor/index.tsx
@@ -46,6 +46,7 @@ import { useEditor } from "./tiptap/use-editor";
 import { useEditorEvents } from "./tiptap/use-editor-events";
 import { editorController } from "./tiptap/utils";
 import { useLayoutEffect } from "react";
+import useKeyboard from "../../hooks/use-keyboard";
 
 const style: ViewStyle = {
   height: "100%",
@@ -232,6 +233,8 @@ const AppSection = ({
 
 const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
   const readonly = useEditorStore((state) => state.readonly);
+  const keyboard = useKeyboard();
+
   const onPress = async () => {
     if (editor.note.current) {
       await db.notes?.note(editor.note.current.id).readonly();
@@ -241,7 +244,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
     }
   };
 
-  return readonly && IconButton ? (
+  return readonly && IconButton && !keyboard.keyboardShown ? (
     <IconButton
       name="pencil-lock"
       type="grayBg"
@@ -249,7 +252,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
       color="accent"
       customStyle={{
         position: "absolute",
-        bottom: 20,
+        bottom: 60,
         width: 60,
         height: 60,
         right: 12,
diff --git a/apps/mobile/app/screens/editor/tiptap/commands.ts b/apps/mobile/app/screens/editor/tiptap/commands.ts
index 48871c900..2107b516b 100644
--- a/apps/mobile/app/screens/editor/tiptap/commands.ts
+++ b/apps/mobile/app/screens/editor/tiptap/commands.ts
@@ -217,7 +217,7 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     );
   };
 
-  updateWebclip = async ({ src, hash }: ImageAttributes) => {
+  updateWebclip = async ({ src, hash }: Partial<ImageAttributes>) => {
     await this.doAsync(
       `editor && editor.commands.updateWebClip(${JSON.stringify({
         hash
@@ -225,7 +225,7 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     );
   };
 
-  updateImage = async ({ src, hash }: ImageAttributes) => {
+  updateImage = async ({ src, hash }: Partial<ImageAttributes>) => {
     await this.doAsync(
       `editor && editor.commands.updateImage(${JSON.stringify({
         hash
diff --git a/apps/mobile/app/screens/settings/app-lock.js b/apps/mobile/app/screens/settings/app-lock.js
index 12fcee4bf..cb33eaee8 100644
--- a/apps/mobile/app/screens/settings/app-lock.js
+++ b/apps/mobile/app/screens/settings/app-lock.js
@@ -17,34 +17,36 @@ 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, { useState } from "react";
-import { Dimensions, LayoutAnimation, Platform, View } from "react-native";
+import React from "react";
+import { Platform, View } from "react-native";
 import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { SVG_Z } from "../../components/intro";
-import { WelcomeNotice } from "../../components/intro/welcome";
+import { AuthMode } from "../../components/auth";
 import { Button } from "../../components/ui/button";
 import { PressableButton } from "../../components/ui/pressable";
 import Seperator from "../../components/ui/seperator";
-import { SvgView } from "../../components/ui/svg";
-import { BouncingView } from "../../components/ui/transitions/bouncing-view";
 import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
 import BiometicService from "../../services/biometrics";
 import { DDS } from "../../services/device-detection";
-import { presentSheet, ToastEvent } from "../../services/event-manager";
+import {
+  ToastEvent,
+  eSendEvent,
+  presentSheet
+} from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { getElevation } from "../../utils";
+import { eOpenLoginDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
-import { requestInAppReview } from "../../services/app-review";
 const AppLock = ({ route }) => {
   const colors = useThemeStore((state) => state.colors);
   const appLockMode = useSettingStore((state) => state.settings.appLockMode);
-  const [step, setStep] = useState(0);
   const welcome = route?.params?.welcome;
+  const deviceMode = useSettingStore((state) => state.deviceMode);
 
   const modes = [
     {
@@ -77,13 +79,12 @@ const AppLock = ({ route }) => {
         exiting={!welcome ? undefined : FadeOutUp}
         entering={!welcome ? undefined : FadeInDown}
         style={{
-          justifyContent: !welcome ? undefined : "center",
           height: !welcome ? undefined : "100%",
           width: !welcome ? undefined : "100%"
         }}
       >
-        {step === 0 ? (
-          <>
+        <>
+          {!welcome ? (
             <View
               style={{
                 flexDirection: "row",
@@ -126,124 +127,164 @@ const AppLock = ({ route }) => {
                 </Paragraph>
               </View>
             </View>
-            <Seperator />
+          ) : (
             <View
               style={{
-                paddingHorizontal: 12,
-                width: DDS.isTab && welcome ? "50%" : "100%",
-                alignSelf: "center"
+                flex: 0.35,
+                justifyContent: "flex-end",
+                paddingHorizontal: 20,
+                backgroundColor: colors.nav,
+                marginBottom: 20,
+                borderBottomWidth: 1,
+                borderBottomColor: colors.border,
+                alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+                borderWidth: deviceMode !== "mobile" ? 1 : null,
+                borderColor: deviceMode !== "mobile" ? colors.border : null,
+                borderRadius: deviceMode !== "mobile" ? 20 : null,
+                marginTop: deviceMode !== "mobile" ? 50 : null,
+                width: deviceMode === "mobile" ? null : "50%"
               }}
             >
-              {modes.map((item) => (
-                <PressableButton
-                  key={item.title}
-                  type={appLockMode === item.value ? "grayBg" : "transparent"}
-                  onPress={async () => {
-                    if (
-                      !(await BiometicService.isBiometryAvailable()) &&
-                      !useUserStore.getState().user
-                    ) {
-                      ToastEvent.show({
-                        heading: "Biometrics not enrolled",
-                        type: "error",
-                        message:
-                          "To use app lock, you must enable biometrics such as Fingerprint lock or Face ID on your phone or create an account."
-                      });
-                      return;
-                    }
-                    SettingsService.set({ appLockMode: item.value });
-                    if (!welcome) {
-                      requestInAppReview();
-                    }
-                  }}
-                  customStyle={{
-                    justifyContent: "flex-start",
-                    alignItems: "flex-start",
-                    paddingHorizontal: 12,
-                    paddingVertical: 12,
-                    marginTop: 0,
-                    marginBottom: 12,
-                    borderWidth: 1,
-                    borderColor:
-                      appLockMode === item.value ? item.activeColor : colors.nav
-                  }}
+              <View
+                style={{
+                  flexDirection: "row"
+                }}
+              >
+                <View
                   style={{
-                    marginBottom: 10
+                    width: 100,
+                    height: 5,
+                    backgroundColor: colors.accent,
+                    borderRadius: 2,
+                    marginRight: 7
                   }}
-                >
-                  <Heading
-                    color={
-                      appLockMode === item.value ? item.activeColor : colors.pri
-                    }
-                    style={{ maxWidth: "95%" }}
-                    size={SIZE.md}
-                  >
-                    {item.title}
-                  </Heading>
-                  <Paragraph
-                    color={
-                      appLockMode === item.value
-                        ? item.activeColor
-                        : colors.icon
-                    }
-                    style={{ maxWidth: "95%" }}
-                    size={SIZE.sm}
-                  >
-                    {item.desc}
-                  </Paragraph>
-                </PressableButton>
-              ))}
-
-              {welcome && (
-                <Button
-                  fontSize={SIZE.md}
-                  height={45}
-                  width={250}
-                  onPress={async () => {
-                    LayoutAnimation.configureNext({
-                      ...LayoutAnimation.Presets.linear,
-                      delete: {
-                        duration: 50,
-                        property: "opacity",
-                        type: "linear"
-                      }
-                    });
-                    setStep(1);
-                  }}
-                  style={{
-                    paddingHorizontal: 24,
-                    alignSelf: "center",
-                    borderRadius: 100,
-                    ...getElevation(5),
-                    marginTop: 30
-                  }}
-                  type="accent"
-                  title="Next"
                 />
-              )}
-            </View>
-          </>
-        ) : (
-          <WelcomeNotice />
-        )}
 
-        {welcome && !colors.night ? (
-          <BouncingView
+                <View
+                  style={{
+                    width: 20,
+                    height: 5,
+                    backgroundColor: colors.nav,
+                    borderRadius: 2
+                  }}
+                />
+              </View>
+              <Heading
+                style={{
+                  marginTop: 10
+                }}
+                extraBold
+                size={SIZE.xxl}
+              >
+                Protect your notes
+              </Heading>
+              <Paragraph
+                style={{
+                  marginBottom: 25
+                }}
+              >
+                Choose how you want to secure your notes locally.
+              </Paragraph>
+            </View>
+          )}
+
+          <Seperator />
+          <View
             style={{
-              position: "absolute",
-              bottom: DDS.isTab ? -300 : -130,
-              zIndex: -1
+              paddingHorizontal: 12,
+              width: DDS.isTab && welcome ? "50%" : "100%",
+              alignSelf: "center",
+              flex: 0.65
             }}
-            animated={false}
-            duration={3000}
           >
-            <SvgView
-              width={Dimensions.get("window").width}
-              height={Dimensions.get("window").width}
-              src={SVG_Z}
-            />
-          </BouncingView>
-        ) : null}
+            {modes.map((item) => (
+              <PressableButton
+                key={item.title}
+                type={appLockMode === item.value ? "grayBg" : "transparent"}
+                onPress={async () => {
+                  if (
+                    !(await BiometicService.isBiometryAvailable()) &&
+                    !useUserStore.getState().user
+                  ) {
+                    ToastEvent.show({
+                      heading: "Biometrics not enrolled",
+                      type: "error",
+                      message:
+                        "To use app lock, you must enable biometrics such as Fingerprint lock or Face ID on your phone or create an account."
+                    });
+                    return;
+                  }
+                  SettingsService.set({ appLockMode: item.value });
+                }}
+                customStyle={{
+                  justifyContent: "flex-start",
+                  alignItems: "flex-start",
+                  paddingHorizontal: 12,
+                  paddingVertical: 12,
+                  marginTop: 0,
+                  marginBottom: 12,
+                  borderWidth: 1,
+                  borderColor:
+                    appLockMode === item.value ? item.activeColor : colors.nav
+                }}
+                style={{
+                  marginBottom: 10
+                }}
+              >
+                <Heading
+                  color={
+                    appLockMode === item.value ? item.activeColor : colors.pri
+                  }
+                  style={{ maxWidth: "95%" }}
+                  size={SIZE.md}
+                >
+                  {item.title}
+                </Heading>
+                <Paragraph
+                  color={
+                    appLockMode === item.value ? item.activeColor : colors.icon
+                  }
+                  style={{ maxWidth: "95%" }}
+                  size={SIZE.sm}
+                >
+                  {item.desc}
+                </Paragraph>
+              </PressableButton>
+            ))}
+
+            {welcome && (
+              <Button
+                fontSize={SIZE.md}
+                width={250}
+                onPress={async () => {
+                  eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
+                  setTimeout(() => {
+                    SettingsService.set({
+                      introCompleted: true
+                    });
+                    Navigation.replace(
+                      {
+                        name: "Notes"
+                      },
+                      {
+                        canGoBack: false
+                      }
+                    );
+                  }, 1000);
+                }}
+                style={{
+                  paddingHorizontal: 24,
+                  alignSelf: "center",
+                  ...getElevation(5),
+                  marginTop: 30,
+                  borderRadius: 100
+                }}
+                type="accent"
+                title="Next"
+              />
+            )}
+          </View>
+        </>
       </Animated.View>
     </>
   );
diff --git a/apps/mobile/app/services/premium.js b/apps/mobile/app/services/premium.js
index 2ca48e15c..742dbe76c 100644
--- a/apps/mobile/app/services/premium.js
+++ b/apps/mobile/app/services/premium.js
@@ -179,7 +179,6 @@ const onUserStatusCheck = async (type) => {
 const showVerifyEmailDialog = () => {
   presentSheet({
     title: "Confirm your email",
-    icon: "email",
     paragraph:
       "We have sent you an email confirmation link. Please check your email inbox. If you cannot find the email, check your spam folder.",
     action: async () => {
@@ -369,7 +368,7 @@ const features_list = [
       "Rich note editing experience with markdown, tables, checklists and more"
   },
   {
-    content: "Export your notes in Pdf, markdown and html formats"
+    content: "Export your notes in PDF, markdown and html formats"
   }
 ];
 
@@ -388,7 +387,7 @@ const sheet = (context, promo, trial) => {
         <Seperator />
         <CompactFeatures
           scrollRef={ref}
-          maxHeight={300}
+          maxHeight={400}
           features={features_list}
           vertical
         />
diff --git a/apps/mobile/native/ios/Make Note/Info.plist b/apps/mobile/native/ios/Make Note/Info.plist
index 2cfe5067c..9448ee2c5 100644
--- a/apps/mobile/native/ios/Make Note/Info.plist	
+++ b/apps/mobile/native/ios/Make Note/Info.plist	
@@ -52,6 +52,7 @@
 	</dict>
 	<key>UIAppFonts</key>
 	<array>
+		<string>OpenSans-Bold.ttf</string>
 		<string>OpenSans-SemiBold.ttf</string>
 		<string>OpenSans-Regular.ttf</string>
 		<string>MaterialCommunityIcons.ttf</string>
diff --git a/apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj b/apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj
index 8b596d877..0b53f4983 100644
--- a/apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj
+++ b/apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj
@@ -23,6 +23,8 @@
 		6515C42F2580AA3000E83E39 /* StoreKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 6515C42E2580AA2F00E83E39 /* StoreKit.framework */; };
 		6529A13E279BC4C70048D4A8 /* BootSplash.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6529A13D279BC4C70048D4A8 /* BootSplash.storyboard */; };
 		6593E4A3281C345400492C50 /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 6593E4A2281C345400492C50 /* AppDelegate.mm */; };
+		659670B22A2754FD00C5D2AF /* OpenSans-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 659670B12A2754FD00C5D2AF /* OpenSans-Bold.ttf */; };
+		659670B32A2754FD00C5D2AF /* OpenSans-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 659670B12A2754FD00C5D2AF /* OpenSans-Bold.ttf */; };
 		659BE46725E11A5100E05671 /* notesnook-text.png in Resources */ = {isa = PBXBuildFile; fileRef = 659BE46625E11A5100E05671 /* notesnook-text.png */; };
 		65AA857925E6DDEC00772A01 /* WidgetKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 65AA857825E6DDEC00772A01 /* WidgetKit.framework */; };
 		65AA857B25E6DDEC00772A01 /* SwiftUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 65AA857A25E6DDEC00772A01 /* SwiftUI.framework */; };
@@ -116,6 +118,7 @@
 		6552012E27019F6E00A43C51 /* OpenSans-SemiBold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "OpenSans-SemiBold.ttf"; path = "../android/app/src/main/assets/fonts/OpenSans-SemiBold.ttf"; sourceTree = "<group>"; };
 		6552012F27019F7700A43C51 /* OpenSans-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "OpenSans-Regular.ttf"; path = "../android/app/src/main/assets/fonts/OpenSans-Regular.ttf"; sourceTree = "<group>"; };
 		6593E4A2281C345400492C50 /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = Notesnook/AppDelegate.mm; sourceTree = "<group>"; };
+		659670B12A2754FD00C5D2AF /* OpenSans-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "OpenSans-Bold.ttf"; path = "../android/app/src/main/assets/fonts/OpenSans-Bold.ttf"; sourceTree = "<group>"; };
 		659BE46625E11A5100E05671 /* notesnook-text.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "notesnook-text.png"; path = "Notesnook/Images.xcassets/notesnook-text.png"; sourceTree = "<group>"; };
 		65A7F34F255689AD00699170 /* Notesnook.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = Notesnook.entitlements; path = Notesnook/Notesnook.entitlements; sourceTree = "<group>"; };
 		65AA857725E6DDEC00772A01 /* NotesWidgetExtension.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = NotesWidgetExtension.appex; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -294,6 +297,7 @@
 				6510E6D62877215700DACAA9 /* build.bundle */,
 				65EC5B71272A7EE200FB3748 /* NotesWidgetExtensionDebug.entitlements */,
 				6552012F27019F7700A43C51 /* OpenSans-Regular.ttf */,
+				659670B12A2754FD00C5D2AF /* OpenSans-Bold.ttf */,
 				6552012E27019F6E00A43C51 /* OpenSans-SemiBold.ttf */,
 				65D145C429DC30470056FE7D /* MaterialCommunityIcons.ttf */,
 				13B07FAE1A68108700A75B9A /* Notesnook */,
@@ -538,6 +542,7 @@
 			files = (
 				6510626F27042891009661C3 /* OpenSans-Regular.ttf in Resources */,
 				65D145C529DC30470056FE7D /* MaterialCommunityIcons.ttf in Resources */,
+				659670B22A2754FD00C5D2AF /* OpenSans-Bold.ttf in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				6529A13E279BC4C70048D4A8 /* BootSplash.storyboard in Resources */,
 				6510E6D72877215700DACAA9 /* build.bundle in Resources */,
@@ -575,6 +580,7 @@
 			files = (
 				6510E6D82877215700DACAA9 /* build.bundle in Resources */,
 				65D145C629DC30470056FE7D /* MaterialCommunityIcons.ttf in Resources */,
+				659670B32A2754FD00C5D2AF /* OpenSans-Bold.ttf in Resources */,
 				6510627727042896009661C3 /* OpenSans-SemiBold.ttf in Resources */,
 				6510627527042893009661C3 /* OpenSans-Regular.ttf in Resources */,
 				65B5014725A672B200E2D264 /* MainInterface.storyboard in Resources */,
diff --git a/apps/mobile/native/package.json b/apps/mobile/native/package.json
index 3f596fee9..624ec8346 100644
--- a/apps/mobile/native/package.json
+++ b/apps/mobile/native/package.json
@@ -57,12 +57,12 @@
     "@bam.tech/react-native-image-resizer": "3.0.5",
     "react-native-navigation-bar-color": "2.0.2",
     "react-native-actions-shortcuts": "^1.0.1",
-    "react-native-in-app-review": "4.3.3",
     "react-native-zip-archive": "6.0.9",
     "react-native-vector-icons": "9.2.0",
     "react-native-pdf": "6.6.2",
     "react-native-blob-util": "0.17.3",
     "@ammarahmed/react-native-share-extension": "^2.5.2"
+    "react-native-in-app-review": "4.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/apps/mobile/package-lock.json b/apps/mobile/package-lock.json
index 85ec701fc..cdbd885f5 100644
--- a/apps/mobile/package-lock.json
+++ b/apps/mobile/package-lock.json
@@ -14,7 +14,8 @@
       ],
       "dependencies": {
         "react": "18.0.0",
-        "react-native": "0.69.7"
+        "react-native": "0.69.7",
+        "react-native-swiper-flatlist": "3.2.2"
       },
       "devDependencies": {
         "otplib": "12.0.1",
@@ -48,6 +49,7 @@
         "react-native-qrcode-svg": "^6.0.6",
         "react-native-reanimated-material-menu": "github:ammarahm-ed/react-native-reanimated-material-menu",
         "react-native-reanimated-progress-bar": "1.0.1",
+        "react-native-swiper-flatlist": "3.2.2",
         "timeago.js": "4.0.2",
         "toggle-switch-react-native": "3.2.0",
         "url": "^0.11.0",
@@ -20544,6 +20546,14 @@
         "react-native": ">=0.50.0"
       }
     },
+    "node_modules/react-native-swiper-flatlist": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-native-swiper-flatlist/-/react-native-swiper-flatlist-3.2.2.tgz",
+      "integrity": "sha512-VVtxJCb2QHGA3ZpLiFqEHv6wyTlnlov5kL0dPKCb9Kc/W1wx8x2ZRFJU2Xja60CKbXDr5zwpxRayBm3bLgFEPg==",
+      "peerDependencies": {
+        "react-native": ">=0.59.0"
+      }
+    },
     "node_modules/react-native-tooltips": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/react-native-tooltips/-/react-native-tooltips-1.0.3.tgz",
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index febf49bba..1b31f9d74 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -34,6 +34,7 @@
     "@notesnook/core": "*",
     "@notesnook/editor": "*",
     "@notesnook/editor-mobile": "*",
+    "react-native-swiper-flatlist": "3.2.2",
     "@notesnook/logger": "*"
   }
 }
diff --git a/apps/web/desktop/autolaunch.ts b/apps/web/desktop/autolaunch.ts
index de858fb13..e68ab5d22 100644
--- a/apps/web/desktop/autolaunch.ts
+++ b/apps/web/desktop/autolaunch.ts
@@ -47,7 +47,11 @@ export class AutoLaunch {
         LINUX_DESKTOP_ENTRY(hidden)
       );
     } else {
-      app.setLoginItemSettings({ openAtLogin: true, openAsHidden: hidden });
+      app.setLoginItemSettings({
+        openAtLogin: true,
+        openAsHidden: hidden,
+        args: ["--hidden"]
+      });
     }
   }
 
diff --git a/apps/web/desktop/cli.ts b/apps/web/desktop/cli.ts
index 1498feb3f..9848d0d16 100644
--- a/apps/web/desktop/cli.ts
+++ b/apps/web/desktop/cli.ts
@@ -24,15 +24,18 @@ export type CLIOptions = {
   note?: boolean | string;
   notebook?: boolean | string;
   reminder?: boolean | string;
+  hidden?: boolean;
 };
 
 export async function parseArguments(): Promise<CLIOptions> {
   const result: CLIOptions = {
     note: false,
     notebook: false,
-    reminder: false
+    reminder: false,
+    hidden: false
   };
-  await yargs(hideBin(process.argv))
+  const { hidden } = await yargs(hideBin(process.argv))
+    .boolean("hidden")
     .command("new", "Create a new item", (yargs) => {
       return yargs
         .command("note", "Create a new note", {}, () => {
@@ -76,5 +79,6 @@ export async function parseArguments(): Promise<CLIOptions> {
         );
     })
     .parse();
+  result.hidden = hidden;
   return result;
 }
diff --git a/apps/web/desktop/electron.js b/apps/web/desktop/electron.js
index 8cc221b2e..7ec22070f 100644
--- a/apps/web/desktop/electron.js
+++ b/apps/web/desktop/electron.js
@@ -64,6 +64,7 @@ async function createWindow() {
   setTheme(getTheme());
 
   const mainWindow = new BrowserWindow({
+    show: false,
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
@@ -87,11 +88,17 @@ async function createWindow() {
     }
   });
 
+  mainWindow.on("show", () => {
+    if (getPrivacyMode()) {
+      setPrivacyMode({ privacyMode: getPrivacyMode() });
+    }
+  });
+
   mainWindowState.manage(mainWindow);
   globalThis.window = mainWindow;
   setupMenu();
   setupJumplist();
-  setupDesktopIntegration();
+  setupDesktopIntegration(cliOptions.hidden);
 
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
@@ -100,10 +107,6 @@ async function createWindow() {
   if (isDevelopment())
     mainWindow.webContents.openDevTools({ mode: "right", activate: true });
 
-  if (getPrivacyMode()) {
-    setPrivacyMode({ privacyMode: getPrivacyMode() });
-  }
-
   try {
     await mainWindow.loadURL(`${createURL(cliOptions)}`);
   } catch (e) {
@@ -169,7 +172,7 @@ function createURL(options) {
   return url;
 }
 
-function setupDesktopIntegration() {
+function setupDesktopIntegration(hidden) {
   const desktopIntegration = getDesktopIntegration();
 
   if (
@@ -179,6 +182,17 @@ function setupDesktopIntegration() {
     setupTray();
   }
 
+  globalThis.window.on("ready-to-show", () => {
+    if (!hidden) {
+      globalThis.window.show();
+    }
+
+    if (hidden && !desktopIntegration.minimizeToSystemTray) {
+      globalThis.window.show();
+      globalThis.window.minimize();
+    }
+  });
+
   // when close to system tray is enabled, it becomes nigh impossible
   // to "quit" the app. This is necessary in order to fix that.
   if (desktopIntegration.closeToSystemTray) {
@@ -212,9 +226,5 @@ function setupDesktopIntegration() {
 
   if (desktopIntegration.autoStart) {
     AutoLaunch.enable(desktopIntegration.startMinimized);
-
-    if (process.platform === "win32" && desktopIntegration.startMinimized) {
-      globalThis.window.minimize();
-    }
   }
 }
diff --git a/apps/web/desktop/ipc/actions/setDesktopIntegration.js b/apps/web/desktop/ipc/actions/setDesktopIntegration.js
index e38162921..7d7a7343a 100644
--- a/apps/web/desktop/ipc/actions/setDesktopIntegration.js
+++ b/apps/web/desktop/ipc/actions/setDesktopIntegration.js
@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { AutoLaunch } from "../../autolaunch";
 import { setDesktopIntegration } from "../../config/desktopIntegration";
+import { destroyTray, setupTray } from "../../tray";
 
 export default (args) => {
   if (!globalThis.window) return;
@@ -29,5 +30,11 @@ export default (args) => {
     AutoLaunch.disable();
   }
 
+  if (args.closeToSystemTray || args.minimizeToSystemTray) {
+    setupTray();
+  } else {
+    destroyTray();
+  }
+
   setDesktopIntegration(args);
 };
diff --git a/apps/web/desktop/tray.ts b/apps/web/desktop/tray.ts
index ea5f7b228..257c98f58 100644
--- a/apps/web/desktop/tray.ts
+++ b/apps/web/desktop/tray.ts
@@ -25,6 +25,10 @@ import { sendMessageToRenderer } from "./ipc/utils";
 import { isFlatpak } from "./utils";
 
 let tray: Tray | undefined = undefined;
+export function destroyTray() {
+  if (tray) tray.destroy();
+}
+
 export function setupTray() {
   if (tray) tray.destroy();
 
diff --git a/packages/editor-mobile/src/components/editor.tsx b/packages/editor-mobile/src/components/editor.tsx
index 08276cdca..ae6141dc1 100644
--- a/packages/editor-mobile/src/components/editor.tsx
+++ b/packages/editor-mobile/src/components/editor.tsx
@@ -251,9 +251,14 @@ const Tiptap = ({
           />
         </div>
 
-        {settings.noToolbar || !layout ? null : (
+        {!layout ? null : (
           <Toolbar
-            sx={{ pl: "10px", pt: "5px", minHeight: 45 }}
+            sx={{
+              pl: "10px",
+              pt: "5px",
+              minHeight: 45,
+              display: settings.noToolbar ? "none" : "flex"
+            }}
             theme={toolbarTheme}
             editor={_editor}
             location="bottom"