diff --git a/apps/mobile/app/components/auth/auth-modal.js b/apps/mobile/app/components/auth/auth-modal.js
index 0f3660817..6111e0438 100644
--- a/apps/mobile/app/components/auth/auth-modal.js
+++ b/apps/mobile/app/components/auth/auth-modal.js
@@ -90,11 +90,7 @@ const AuthModal = () => {
         style={{
           width: "100%"
         }}
-        contentContainerStyle={{
-          height: Platform.OS === "android" ? "100%" : "100%"
-        }}
         keyboardShouldPersistTaps="handled"
-        bounces={false}
       >
         {currentAuthMode !== AuthMode.login ? (
           <Signup
diff --git a/apps/mobile/app/components/auth/login.js b/apps/mobile/app/components/auth/login.js
index 4f6419635..45aaa37f2 100644
--- a/apps/mobile/app/components/auth/login.js
+++ b/apps/mobile/app/components/auth/login.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useEffect, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
@@ -71,7 +71,7 @@ export const Login = ({ changeMode }) => {
     }, 5000);
   });
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const { width, height } = useWindowDimensions();
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -95,14 +95,11 @@ export const Login = ({ changeMode }) => {
           backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
-          alignSelf: "center",
-          height: "100%",
-          minHeight: "100%"
+          alignSelf: "center"
         }}
       >
         <View
           style={{
-            flexGrow: 0.8,
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.nav,
@@ -114,7 +111,8 @@ export const Login = ({ changeMode }) => {
             borderColor: deviceMode !== "mobile" ? colors.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%"
+            width: deviceMode === "mobile" ? null : "50%",
+            minHeight: height * 0.4
           }}
         >
           <View
@@ -164,8 +162,7 @@ export const Login = ({ changeMode }) => {
               : "99.9%",
             backgroundColor: colors.bg,
             alignSelf: "center",
-            paddingHorizontal: 20,
-            flexGrow: 1
+            paddingHorizontal: 20
           }}
         >
           <Input
diff --git a/apps/mobile/app/components/auth/signup.js b/apps/mobile/app/components/auth/signup.js
index 285899283..2f9d91f83 100644
--- a/apps/mobile/app/components/auth/signup.js
+++ b/apps/mobile/app/components/auth/signup.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
@@ -49,7 +49,7 @@ export const Signup = ({ changeMode, trial }) => {
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastEvent.show({
@@ -101,13 +101,11 @@ export const Signup = ({ changeMode, trial }) => {
           backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
-          alignSelf: "center",
-          height: "100%"
+          alignSelf: "center"
         }}
       >
         <View
           style={{
-            flexGrow: 1,
             justifyContent: "flex-end",
             paddingHorizontal: 20,
             backgroundColor: colors.nav,
@@ -119,7 +117,8 @@ export const Signup = ({ changeMode, trial }) => {
             borderColor: deviceMode !== "mobile" ? colors.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%"
+            width: deviceMode === "mobile" ? null : "50%",
+            minHeight: height * 0.4
           }}
         >
           <View
@@ -163,8 +162,7 @@ export const Signup = ({ changeMode, trial }) => {
             width: DDS.isTab ? "50%" : "100%",
             paddingHorizontal: 20,
             backgroundColor: colors.bg,
-            alignSelf: "center",
-            flexGrow: 0.5
+            alignSelf: "center"
           }}
         >
           <Input
diff --git a/apps/mobile/app/components/intro/index.js b/apps/mobile/app/components/intro/index.js
index ccad4c092..2c21f5129 100644
--- a/apps/mobile/app/components/intro/index.js
+++ b/apps/mobile/app/components/intro/index.js
@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import {
   Linking,
+  ScrollView,
   TouchableOpacity,
   useWindowDimensions,
   View
@@ -34,15 +35,16 @@ import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 
 const Intro = ({ navigation }) => {
   const colors = useThemeStore((state) => state.colors);
   const isTelemetryEnabled = useSettingStore(
     (state) => state.settings.telemetry
   );
-  const { width } = useWindowDimensions();
+  const { width, height } = useWindowDimensions();
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const insets = useGlobalSafeAreaInsets();
   const renderItem = React.useCallback(
     ({ item }) => (
       <View
@@ -80,7 +82,6 @@ const Intro = ({ navigation }) => {
         <View
           style={{
             marginTop: 10,
-            marginBottom: 20,
             maxWidth: "90%",
             width: "100%"
           }}
@@ -120,16 +121,14 @@ const Intro = ({ navigation }) => {
   );
 
   return (
-    <View
+    <ScrollView
       testID="notesnook.splashscreen"
       style={{
-        width: "100%",
-        height: "100%"
+        width: "100%"
       }}
     >
       <View
         style={{
-          flex: 0.65,
           width: deviceMode !== "mobile" ? width / 2 : "100%",
           backgroundColor: colors.nav,
           marginBottom: 20,
@@ -139,7 +138,10 @@ const Intro = ({ navigation }) => {
           borderWidth: deviceMode !== "mobile" ? 1 : null,
           borderColor: deviceMode !== "mobile" ? colors.border : null,
           borderRadius: deviceMode !== "mobile" ? 20 : null,
-          marginTop: deviceMode !== "mobile" ? 50 : null
+          marginTop: deviceMode !== "mobile" ? 50 : null,
+          paddingTop: insets.top + 10,
+          paddingBottom: insets.top + 10,
+          minHeight: height * 0.7
         }}
       >
         <SwiperFlatList
@@ -184,8 +186,8 @@ const Intro = ({ navigation }) => {
       <View
         style={{
           width: "100%",
-          flex: 0.3,
-          justifyContent: "center"
+          justifyContent: "center",
+          minHeight: height * 0.3
         }}
       >
         <Button
@@ -242,7 +244,7 @@ const Intro = ({ navigation }) => {
           </Paragraph>
         </TouchableOpacity>
       </View>
-    </View>
+    </ScrollView>
   );
 };
 
diff --git a/apps/mobile/app/screens/settings/app-lock.js b/apps/mobile/app/screens/settings/app-lock.js
index afbf4c706..68b11ef1c 100644
--- a/apps/mobile/app/screens/settings/app-lock.js
+++ b/apps/mobile/app/screens/settings/app-lock.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Platform, View } from "react-native";
+import { Platform, ScrollView, View } from "react-native";
 import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { AuthMode } from "../../components/auth";
@@ -141,7 +141,8 @@ const AppLock = ({ route }) => {
                 borderColor: deviceMode !== "mobile" ? colors.border : null,
                 borderRadius: deviceMode !== "mobile" ? 20 : null,
                 marginTop: deviceMode !== "mobile" ? 50 : null,
-                width: deviceMode === "mobile" ? null : "50%"
+                width: deviceMode === "mobile" ? null : "50%",
+                minHeight: 180
               }}
             >
               <View
@@ -188,7 +189,7 @@ const AppLock = ({ route }) => {
           )}
 
           <Seperator />
-          <View
+          <ScrollView
             style={{
               paddingHorizontal: 12,
               width: DDS.isTab && welcome ? "50%" : "100%",
@@ -203,7 +204,8 @@ const AppLock = ({ route }) => {
                 onPress={async () => {
                   if (
                     !(await BiometicService.isBiometryAvailable()) &&
-                    !useUserStore.getState().user
+                    !useUserStore.getState().user &&
+                    item.value !== modes[0].value
                   ) {
                     ToastEvent.show({
                       heading: "Biometrics not enrolled",
@@ -276,13 +278,14 @@ const AppLock = ({ route }) => {
                   alignSelf: "center",
                   ...getElevationStyle(5),
                   marginTop: 30,
-                  borderRadius: 100
+                  borderRadius: 100,
+                  marginBottom: 30
                 }}
                 type="accent"
                 title="Next"
               />
             )}
-          </View>
+          </ScrollView>
         </>
       </Animated.View>
     </>
diff --git a/apps/mobile/app/utils/size/index.js b/apps/mobile/app/utils/size/index.js
index f99b70a49..0809d739c 100644
--- a/apps/mobile/app/utils/size/index.js
+++ b/apps/mobile/app/utils/size/index.js
@@ -42,7 +42,9 @@ const getDpi = (pd) => {
 };
 const correction = (size, multiplier) => {
   let dSize = getDeviceSize();
-  if (dSize >= 4 && dSize <= 5.3 && pixelDensity <= 3) {
+  if (dSize <= 4.5 && pixelDensity <= 3) {
+    return size * 0.85;
+  } else if (dSize <= 5.3 && pixelDensity <= 3) {
     return size * 0.93;
   } else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) {
     if (Platform.OS === "ios") {