define a proper container with the current screen in mind. payment option fit right in.

src/screens/HomePageWithPaymentOptions.tsx

@@ -37,14 +37,27 @@ const HomePageWithPaymentOptions = () => {
 							justifyContent={"space-between"}
 						>
 							{/* Payment Modes */}
+							<Box style={{ width: "48%", height: "26%" }}>
 								<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
+							</Box>
+							<Box style={{ width: "48%", height: "26%" }}>
 								<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
+							</Box>
+
+							<Box style={{ width: "48%", height: "26%" }}>
 								<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
+							</Box>
+
+							<Box style={{ width: "48%", height: "26%" }}>
 								<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
+							</Box>
+
+							<Box style={{ width: "48%", height: "26%" }}>
 								<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
 							</Box>
 						</Box>
 					</Box>
+				</Box>
 			</SafeAreaView>
 		</BackgroundGreenWhiteContentArea>
 	);