diff --git a/src/components/BalanceContainer.tsx b/src/components/BalanceContainer.tsx
index 0f4d409..69c23b9 100644
--- a/src/components/BalanceContainer.tsx
+++ b/src/components/BalanceContainer.tsx
@@ -28,7 +28,9 @@ const BalanceContainer = ({ label, balance }: Props) => {
 			</Box>
 
 			<Box alignItems={"center"} gap={"s"}>
-				<Text fontSize={30}>{balance}</Text>
+				<Text fontSize={30} variant={"black"}>
+					{balance}
+				</Text>
 				<Text color={"gray"}>{label}</Text>
 			</Box>
 		</Box>
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index e535520..1750831 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,16 +1,19 @@
+import type { VariantProps } from "@shopify/restyle";
+import type { Theme } from "@themes/Theme";
 import { TextInput } from "react-native";
 import type { TextInputProps } from "react-native";
 import Box from "./bases/Box";
 import Text from "./bases/Text";
 
-type Props = TextInputProps & {
-	label: string;
-};
+type Props = TextInputProps &
+	VariantProps<Theme, "textVariants", "textVariants"> & {
+		label: string;
+	};
 
-const Input = ({ label, ...rest }: Props) => {
+const Input = ({ label, textVariants, ...rest }: Props) => {
 	return (
 		<Box>
-			<Text color={"gray"}>{label}</Text>
+			<Text variant={textVariants}>{label}</Text>
 			<Box backgroundColor={"lightGray"} height={50} borderRadius={10} my={"m"} p={"s"}>
 				<TextInput style={{ height: "100%" }} {...rest} />
 			</Box>
diff --git a/src/screens/NumberAndOtpForPaymentScreen.tsx b/src/screens/NumberAndOtpForPaymentScreen.tsx
new file mode 100644
index 0000000..3c6060b
--- /dev/null
+++ b/src/screens/NumberAndOtpForPaymentScreen.tsx
@@ -0,0 +1,50 @@
+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import Button from "@components/Button";
+import Input from "@components/Input";
+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 NumberAndOtpForPaymentScreen = () => {
+	return (
+		<BackgroundGreenWhiteContentArea>
+			<SafeAreaView>
+				<Box style={{ height: "100%", width: "100%" }}>
+					<Box
+						px={"l"}
+						flexDirection={"row"}
+						justifyContent={"space-between"}
+						alignItems={"center"}
+					>
+						<BeasyLogoIcon />
+					</Box>
+					<Box height={122} alignItems={"center"} justifyContent={"center"}>
+						<Text color={"white"}>Montant à payer</Text>
+						<Text color={"white"} fontSize={30}>
+							78000
+						</Text>
+					</Box>
+					<Box p={"l"} paddingTop={"x64"}>
+						<Box mb={"l"}>
+							<Input
+								label="Entrez le numero"
+								keyboardType="numeric"
+								textVariants={"black"}
+							/>
+							<Input label="Code OTP" keyboardType="numeric" textVariants={"black"} />
+						</Box>
+						<Button
+							onPress={() => {}}
+							variant={"full"}
+							textVariants={"primary"}
+							label="Paiement"
+						/>
+					</Box>
+				</Box>
+			</SafeAreaView>
+		</BackgroundGreenWhiteContentArea>
+	);
+};
+
+export default NumberAndOtpForPaymentScreen;
diff --git a/src/screens/UserLoginScreen.tsx b/src/screens/UserLoginScreen.tsx
index f004dfa..2f202e1 100644
--- a/src/screens/UserLoginScreen.tsx
+++ b/src/screens/UserLoginScreen.tsx
@@ -35,8 +35,8 @@ const UserLoginScreen = () => {
 					</Box>
 					<ContainerBorderTopCurved>
 						<Box p={"l"} paddingTop={"x100"} mb={"s"}>
-							<Box>
-								<Text fontSize={40} fontWeight={"bold"}>
+							<Box mb={"l"}>
+								<Text fontSize={40} fontWeight={"bold"} variant={"black"}>
 									Connexion
 								</Text>
 								<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>