diff --git a/src/features/auth/slice.ts b/src/features/auth/slice.ts
index aa5484a..a1d92bd 100644
--- a/src/features/auth/slice.ts
+++ b/src/features/auth/slice.ts
@@ -31,7 +31,9 @@ export const authSlice = createSlice({
 			state.token = action.payload.tokens;
 		},
 		logout: (state) => {
-			state = initialState;
+			state.isAuthenticated = false;
+			state.token = {} as Token;
+			state.user = {} as UserData;
 		},
 	},
 });
diff --git a/src/screens/UserProfileScreen.tsx b/src/screens/UserProfileScreen.tsx
index 099b94c..18b01d1 100644
--- a/src/screens/UserProfileScreen.tsx
+++ b/src/screens/UserProfileScreen.tsx
@@ -1,176 +1,147 @@
-import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
-import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
-import Button from "@components/Button";
-import Box from "@components/bases/Box";
-import Text from "@components/bases/Text";
-import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
+import { asp as g } from "@asp/asp";
+import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import * as Button from "@components/ButtonNew";
+import Ionicons from "@expo/vector-icons/Ionicons";
 import { LOG } from "@logger";
-import Card from "@re-card";
+import { Text, View } from "react-native";
+import { useDispatch } from "react-redux";
+import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
+import { logout } from "@/features/auth/slice";
 
 const log = LOG.extend("UserProfileScreen");
 const UserProfileScreen = () => {
 	log.verbose("UserProfileScreen");
 
-	const { logout } = useUserAuthenticationContext();
+	const dispatch = useDispatch();
 
 	const { userInformations } = useUserAuthenticationContext();
 
 	return (
-		<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
-			<>
-				<BarWithBeasyAndNotificationsIcon />
-				<Card
-					variant="curvedTopContainer"
-					height={"100%"}
-					padding={"m"}
-					gap={"m"}
-					marginTop={"m"}
-				>
-					<Box
-						width={"100%"}
-						// height={200}
-						backgroundColor={"lightGray"}
-						borderRadius={10}
-						p={"s"}
-					>
-						<Box
-							width={"100%"}
-							// height={"100%"}
-							flexDirection={"row"}
-							gap={"s"}
-							py={"m"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-						>
-							<Box
-								height={70}
-								aspectRatio={1}
-								borderRadius={50}
-								backgroundColor={"secondary"}
-							>
-								<Text />
-							</Box>
+		<BarnoinPayBackground style={[g.flex_col, g.justify_between]}>
+			<View style={[g.px_lg, g.flex_row, g.justify_between]}>
+				<BeasyLogoIcon />
+				<Ionicons name="notifications" size={24} color="black" />
+			</View>
+
+			<View
+				style={[
+					g.gap_md,
+					g.p_md,
+					{
+						borderTopLeftRadius: 20,
+						borderTopRightRadius: 20,
+						backgroundColor: "white",
+						height: "90%",
+					},
+				]}
+			>
+				<View style={[g.w_full, g.rounded_md, g.p_md, { backgroundColor: "#F4F4F4" }]}>
+					<View style={[g.flex_row, g.gap_sm, g.py_sm]}>
+						<View
+							style={[
+								g.rounded_full,
+								{ height: 70, aspectRatio: 1, backgroundColor: "green" },
+							]}
+						/>
 
-							<Box height={"100%"} flex={1} flexDirection={"column"}>
-								<Text fontWeight={"bold"} variant={"black"} fontSize={20}>
-									{userInformations.first_name} {userInformations.last_name}
-								</Text>
-								<Text>{userInformations.email}</Text>
-							</Box>
-						</Box>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							justifyContent={"space-between"}
-							py={"m"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Utilisateur
+						<View style={[g.flex_1, g.flex_col]}>
+							<Text style={[g.font_bold]}>
+								{userInformations.first_name} {userInformations.last_name}
 							</Text>
-							<Text textAlign={"center"}>{userInformations.username}</Text>
-						</Box>
-					</Box>
+							<Text>{userInformations.email}</Text>
+						</View>
+					</View>
+					<View style={[g.w_full, g.flex_row, g.justify_between, g.py_md]}>
+						<Text style={[g.font_bold]}>Utilisateur</Text>
+						<Text style={[g.text_center]}>{userInformations.username}</Text>
+					</View>
+				</View>
 
-					<Button
-						label={"Deconnexion"}
-						onPress={logout}
-						variant={"danger"}
-						textVariants={"white"}
-					/>
+				<Button.Container
+					style={[g.rounded_lg, { backgroundColor: "#960101ff" }]}
+					onPress={() => dispatch(logout())}
+				>
+					<Button.Label>Deconnexion</Button.Label>
+				</Button.Container>
 
-					<Text fontWeight={"bold"}>Informations sur le marchand</Text>
-					<Box
-						width={"100%"}
-						backgroundColor={"lightGray"}
-						borderRadius={10}
-						p={"s"}
-						flexDirection={"column"}
-						// gap={"m"}
+				<Text style={[g.font_bold]}>Informations sur le marchand</Text>
+				<View
+					style={[
+						g.w_full,
+						g.rounded_md,
+						g.p_sm,
+						g.flex_col,
+						{ backgroundColor: "#F4F4F4" },
+					]}
+				>
+					<View
+						style={[
+							g.w_full,
+							g.flex_row,
+							g.justify_between,
+							g.py_md,
+							{ borderBottomColor: "white", borderBottomWidth: 1 },
+						]}
 					>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							borderBottomWidth={1}
-							borderBottomColor={"white"}
-							justifyContent={"space-between"}
-							py={"m"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Identifiant
-							</Text>
-							<Text textAlign={"center"}>
-								{userInformations.marchand.marchand_id}
-							</Text>
-						</Box>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							borderBottomWidth={1}
-							borderBottomColor={"white"}
-							justifyContent={"space-between"}
-							py={"m"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Entreprise
-							</Text>
-							<Text textAlign={"center"}>{userInformations.marchand.nom}</Text>
-						</Box>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							borderBottomWidth={1}
-							borderBottomColor={"white"}
-							justifyContent={"space-between"}
-							py={"m"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Code
-							</Text>
-							<Text textAlign={"center"}>{userInformations.marchand.code}</Text>
-						</Box>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							borderBottomWidth={1}
-							borderBottomColor={"white"}
-							justifyContent={"space-between"}
-							py={"m"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Addresse
-							</Text>
-							<Text textAlign={"center"}>{userInformations.marchand.adresse}</Text>
-						</Box>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							borderBottomWidth={1}
-							borderBottomColor={"white"}
-							justifyContent={"space-between"}
-							py={"m"}
-							alignItems={"center"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Url succès
-							</Text>
-							<Text textAlign={"center"}>{userInformations.marchand.url_succes}</Text>
-						</Box>
-						<Box
-							width={"100%"}
-							flexDirection={"row"}
-							justifyContent={"space-between"}
-							// alignItems={"center"}
-							py={"m"}
-						>
-							<Text variant={"black"} fontWeight={"bold"}>
-								Url échec
-							</Text>
-							<Text textAlign={"center"}>{userInformations.marchand.url_echec}</Text>
-						</Box>
-					</Box>
-				</Card>
-			</>
-		</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
+						<Text style={[g.font_bold]}>Identifiant</Text>
+						<Text style={[g.text_center]}>{userInformations.marchand.marchand_id}</Text>
+					</View>
+					<View
+						style={[
+							g.w_full,
+							g.flex_row,
+							g.justify_between,
+							g.py_md,
+							{ borderBottomColor: "white", borderBottomWidth: 1 },
+						]}
+					>
+						<Text style={[g.font_bold]}>Entreprise</Text>
+						<Text style={[g.text_center]}>{userInformations.marchand.nom}</Text>
+					</View>
+					<View
+						style={[
+							g.w_full,
+							g.flex_row,
+							g.justify_between,
+							g.py_md,
+							{ borderBottomColor: "white", borderBottomWidth: 1 },
+						]}
+					>
+						<Text style={[g.font_bold]}>Code</Text>
+						<Text style={[g.text_center]}>{userInformations.marchand.code}</Text>
+					</View>
+					<View
+						style={[
+							g.w_full,
+							g.flex_row,
+							g.justify_between,
+							g.py_md,
+							{ borderBottomColor: "white", borderBottomWidth: 1 },
+						]}
+					>
+						<Text style={[g.font_bold]}>Addresse</Text>
+						<Text style={[g.text_center]}>{userInformations.marchand.adresse}</Text>
+					</View>
+					<View
+						style={[
+							g.w_full,
+							g.flex_row,
+							g.justify_between,
+							g.py_md,
+							{ borderBottomColor: "white", borderBottomWidth: 1 },
+						]}
+					>
+						<Text style={[g.font_bold]}>Url succès</Text>
+						<Text style={[g.text_center]}>{userInformations.marchand.url_succes}</Text>
+					</View>
+					<View style={[g.w_full, g.flex_row, g.py_md, g.justify_between]}>
+						<Text style={[g.font_bold]}>Url échec</Text>
+						<Text style={[g.text_center]}>{userInformations.marchand.url_echec}</Text>
+					</View>
+				</View>
+			</View>
+		</BarnoinPayBackground>
 	);
 };