diff --git a/src/screens/UserLoginScreen.tsx b/src/screens/UserLoginScreen.tsx
index 7108595..bbd31de 100644
--- a/src/screens/UserLoginScreen.tsx
+++ b/src/screens/UserLoginScreen.tsx
@@ -1,17 +1,17 @@
 import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
 import type { MainStackScreenComponentProps } from "@/navigations/Types";
 import Button from "@components/Button";
-import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
 import InputWithTopLabel from "@components/InputWithTopLabel";
-import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackground";
 import Box from "@components/bases/Box";
-import Text from "@components/bases/Text";
+import WrapperWithDefaultBeasyBackgroundAndSafeAreaFull from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaFull";
 import { Fontisto } from "@expo/vector-icons";
 import { LOG } from "@logger";
-import { containers } from "@styles/Commons";
+import Card from "@re-card";
+import Text from "@re-text";
 import { useCallback, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const log = LOG.extend("UserLoginScreen");
 const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ navigation }) => {
@@ -21,14 +21,15 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 	// TODO : Remove default value for email and password
 	const [email, setEmail] = useState("admin");
 	const [password, setPassword] = useState("admin");
+	const insets = useSafeAreaInsets();
 
 	const submit = useCallback(() => {
 		login(email, password);
 	}, [email, password, login]);
 
 	return (
-		<BeasyDefaultBackgroundWrapper>
-			<View style={[containers.containerFull]}>
+		<WrapperWithDefaultBeasyBackgroundAndSafeAreaFull>
+			<Box height={"100%"}>
 				<Box style={{ height: "20%" }} px={"l"}>
 					<Box
 						px={"m"}
@@ -45,7 +46,7 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 						</TouchableOpacity>
 					</Box>
 				</Box>
-				<ContainerBorderTopCurved>
+				<Card variant={"curvedTopContainer"} style={{ marginTop: "auto" }}>
 					<KeyboardAwareScrollView
 						// extraScrollHeight={-125}
 						extraHeight={10}
@@ -96,9 +97,16 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 							/>
 						</Box>
 					</KeyboardAwareScrollView>
-				</ContainerBorderTopCurved>
-			</View>
-		</BeasyDefaultBackgroundWrapper>
+				</Card>
+			</Box>
+			<Box
+				position={"absolute"}
+				bottom={0}
+				height={insets.bottom}
+				backgroundColor={"white"}
+				width={"100%"}
+			/>
+		</WrapperWithDefaultBeasyBackgroundAndSafeAreaFull>
 	);
 };