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,55 +36,57 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 
 		return (
 			// <BeasyDefaultBackgroundWrapper>
-			<SafeAreaView>
-				<Box style={{ height: "100%" }}>
+			<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
+				<Box style={{ height: "100%" }} flexDirection={"column"}>
 					<BarWithBeasyAndNotificationsIcon />
+					<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
+							</Text>
+						</Box>
+
+						<Box
+							flex={1}
+							flexDirection={"row"}
+							justifyContent={"space-between"}
+							flexWrap={"wrap"}
+							rowGap={"m"}
+						>
+							{isLoading && (
+								<Box flex={1}>
+									<Text textAlign={"center"}>
+										Chargement des méthodes de paiement...
+									</Text>
+								</Box>
+							)}
+							{!isLoading &&
+								!error &&
+								paymentTypesWithActiveStatus.map((paymentType) => (
+									<PaymentOptionContainer key={paymentType.id}>
+										<PaymentOption
+											onPress={() =>
+												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 flex={1} p={"l"}>
-							<Box height={100}>
-								<Text fontSize={20} fontWeight={"bold"}>
-									Types de paiement
-								</Text>
-							</Box>
-
-							<Box
-								flex={1}
-								flexDirection={"row"}
-								justifyContent={"space-between"}
-								flexWrap={"wrap"}
-								rowGap={"m"}
-							>
-								{isLoading && (
-									<Box flex={1}>
-										<Text textAlign={"center"}>
-											Chargement des méthodes de paiement...
-										</Text>
-									</Box>
-								)}
-								{!isLoading &&
-									!error &&
-									paymentTypesWithActiveStatus.map((paymentType) => (
-										<PaymentOptionContainer key={paymentType.id}>
-											<PaymentOption
-												onPress={() =>
-													navigation.navigate(
-														"paymentAmountInputScreen",
-														{
-															paymentType: paymentType.code,
-														},
-													)
-												}
-												paymentMethod={paymentType.code}
-											/>
-										</PaymentOptionContainer>
-									))}
-							</Box>
-						</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>
 	);
 };