add payment option but the logo rounding is a little off

src/components/PaymentOption.tsx

+import { images } from "@styles/Commons";
+import { Image, TouchableOpacity } from "react-native";
+import Box from "./bases/Box";
+
+export enum PaymentMethods {
+	OrangeMoney = 1,
+	MtnMoney = 2,
+	MoobMoney = 3,
+	WaveMoney = 4,
+	VisaCard = 5,
+}
+
+type PaymentOptions = "OrangeMoney" | "MtnMoney" | "MoovMoney" | "WaveMoney" | "VisaCard";
+
+type Props = {
+	onPress: () => void;
+	paymentMethod: PaymentOptions;
+};
+
+const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<Box height={50} p={"s"} style={{ width: "100%", height: "100%" }} overflow={"hidden"}>
+			{children}
+		</Box>
+	);
+};
+
+const MtnMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/mtn_money.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const MoovMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/moov_money.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const WaveMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/wave_money.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const VisaCard = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image source={require("../../assets/operators/visa_card.png")} style={images.cover} />
+		</PaymentOptionContainer>
+	);
+};
+
+const PaymentOption = ({ onPress, paymentMethod }: Props) => {
+	return (
+		<TouchableOpacity style={{ width: "50%", height: "26%" }} onPress={onPress}>
+			{paymentMethod === "OrangeMoney" && <OrangeMoney />}
+			{paymentMethod === "MtnMoney" && <MtnMoney />}
+			{paymentMethod === "MoovMoney" && <MoovMoney />}
+			{paymentMethod === "WaveMoney" && <WaveMoney />}
+			{paymentMethod === "VisaCard" && <VisaCard />}
+		</TouchableOpacity>
+	);
+};
+
+const OrangeMoney = () => {
+	return (
+		<Box height={50} p={"s"} style={{ width: "100%", height: "100%" }} overflow={"hidden"}>
+			<Image
+				source={require("../../assets/operators/orange_money.png")}
+				style={images.cover}
+			/>
+		</Box>
+	);
+};
+
+export default PaymentOption;

src/screens/HomePageWithPaymentOptions.tsx

 import BalanceContainer from "@components/BalanceContainer";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import NotificationIconButton from "@components/NotificationIconButton";
+import PaymentOption from "@components/PaymentOption";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
+import Text from "@components/bases/Text";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 const HomePageWithPaymentOptions = () => {
 	return (
 		<BackgroundGreenWhiteContentArea>
 			<SafeAreaView>
-				<Box
-					p={"l"}
-					flexDirection={"row"}
-					justifyContent={"space-between"}
-					alignItems={"center"}
-				>
-					{/* <Text>HomePageWithPaymentOptions</Text> */}
-					<BeasyLogoIcon />
-					<NotificationIconButton />
-				</Box>
-				<Box
-					height={150}
-					alignItems={"center"}
-					justifyContent={"center"}
-					position={"relative"}
-				>
-					<BalanceContainer balance={78000} label="Total des ventes" />
+				<Box style={{ height: "100%" }}>
+					<Box
+						px={"l"}
+						flexDirection={"row"}
+						justifyContent={"space-between"}
+						alignItems={"center"}
+					>
+						<BeasyLogoIcon />
+						<NotificationIconButton />
+					</Box>
+					<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"}>
+								Méthode de paiement
+							</Text>
+						</Box>
+						<Box flexDirection={"row"} style={{ flexWrap: "wrap" }}>
+							{/* Payment Modes */}
+							<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
+							<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
+							<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
+							<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
+							<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
+						</Box>
+					</Box>
 				</Box>
 			</SafeAreaView>
 		</BackgroundGreenWhiteContentArea>