updated with the card created for the moment

src/screens/HomePageWithPaymentOptions.tsx

 import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import getPaymentTypes from "@/utils/requests/getPaymentTypes";
 import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
+import PaymentOption from "@components/PaymentOption";
 import Box from "@components/bases/Box";
+import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
 import { LOG } from "@logger";
+import Card from "@re-card";
+import Text from "@re-text";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { Dimensions } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 
 const log = LOG.extend("HomePageWithPaymentOptions");
 
@@ -33,14 +36,16 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 
 		return (
 			// <BeasyDefaultBackgroundWrapper>
-			<SafeAreaView>
-				<Box style={{ height: "100%" }}>
+			<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
+				<Box style={{ height: "100%" }} flexDirection={"column"}>
 					<BarWithBeasyAndNotificationsIcon />
-					{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
-							<BalanceContainer balance={78000} label="Total des ventes" />
-						</Box> */}
-
-					{/* <Box flex={1} p={"l"}>
+					<Card
+						variant={"curvedTopContainer"}
+						height={Dimensions.get("window").height / 2 + 150}
+						// marginTop={"auto"}
+						style={{ marginTop: "auto" }}
+						padding={"l"}
+					>
 						<Box height={100}>
 							<Text fontSize={20} fontWeight={"bold"}>
 								Types de paiement
@@ -67,21 +72,21 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 									<PaymentOptionContainer key={paymentType.id}>
 										<PaymentOption
 											onPress={() =>
-													navigation.navigate(
-														"paymentAmountInputScreen",
-														{
+												navigation.navigate("paymentAmountInputScreen", {
 													paymentType: paymentType.code,
-														},
-													)
+												})
 											}
 											paymentMethod={paymentType.code}
 										/>
 									</PaymentOptionContainer>
 								))}
 						</Box>
+					</Card>
+					{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
+							<BalanceContainer balance={78000} label="Total des ventes" />
 						</Box> */}
 				</Box>
-			</SafeAreaView>
+			</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 			// </BeasyDefaultBackgroundWrapper>
 		);
 	};

src/screens/UserProfileScreen.tsx

-import Box from "@components/bases/Box";
-import {} from "react";
-import {} from "react-native";
-
 import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
+import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 import Button from "@components/Button";
-import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
+import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
 import { LOG } from "@logger";
+import Card from "@re-card";
 
 const log = LOG.extend("UserProfileScreen");
 const UserProfileScreen = () => {
@@ -17,10 +16,16 @@ const UserProfileScreen = () => {
 	const { userInformations } = useUserAuthenticationContext();
 
 	return (
-		<BackgroundWithBeasyIconAndWhiteContentArea>
+		<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 			<>
-				<Box px={"m"} mt={"m"} gap={"m"}>
-					{/* User Informations */}
+				<BarWithBeasyAndNotificationsIcon />
+				<Card
+					variant="curvedTopContainer"
+					height={"100%"}
+					padding={"m"}
+					gap={"m"}
+					marginTop={"m"}
+				>
 					<Box
 						width={"100%"}
 						// height={200}
@@ -163,9 +168,9 @@ const UserProfileScreen = () => {
 							<Text textAlign={"center"}>{userInformations.marchand.url_echec}</Text>
 						</Box>
 					</Box>
-				</Box>
+				</Card>
 			</>
-		</BackgroundWithBeasyIconAndWhiteContentArea>
+		</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 	);
 };