diff --git a/src/screens/TransactionHistoryScreen.tsx b/src/screens/TransactionHistoryScreen.tsx
index d0a6ef1..63a21a5 100644
--- a/src/screens/TransactionHistoryScreen.tsx
+++ b/src/screens/TransactionHistoryScreen.tsx
@@ -1,11 +1,14 @@
+import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
+import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 import Button from "@components/Button";
 import Input from "@components/Input";
 import TransactionInformationsItem from "@components/TransactionInformationsItem";
-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 useTransactionsHistory, { type OperatorsFilter } from "@hooks/useTransactionsHistory";
 import { LOG } from "@logger";
+import Card from "@re-card";
 import theme from "@themes/Theme";
 import { useCallback, useState } from "react";
 import { RefreshControl, ScrollView, Switch } from "react-native";
@@ -28,9 +31,13 @@ const TransactionHistoryScreen = () => {
 		setOperatorsFilter,
 	} = useTransactionsHistory();
 
+	const { showModal } = useModalsManagerContext();
+
 	return (
-		<BackgroundWithBeasyIconAndWhiteContentArea>
-			<>
+		<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
+			<BarWithBeasyAndNotificationsIcon />
+
+			<Card variant={"curvedTopContainer"} padding={"s"} height={"100%"} mt={"m"}>
 				{showFiltersModal && (
 					<FiltersModal
 						setShowFiltersModal={setShowFiltersModal}
@@ -39,7 +46,7 @@ const TransactionHistoryScreen = () => {
 					/>
 				)}
 				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
-				<Box px={"m"} mt={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
+				<Box px={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
 					<Box flex={1}>
 						<Input placeholder="Reference" onChangeText={setReferenceFilter} />
 					</Box>
@@ -56,15 +63,25 @@ const TransactionHistoryScreen = () => {
 							name="filter"
 							size={30}
 							color="black"
-							onPress={() => setShowFiltersModal(true)}
+							// onPress={() => setShowFiltersModal(true)}
+							onPress={() =>
+								showModal(
+									<FiltersModal
+										setShowFiltersModal={setShowFiltersModal}
+										setOperatorsFilter={setOperatorsFilter}
+										operatorsFilter={operatorsFilter}
+									/>,
+								)
+							}
 						/>
 					</Box>
 				</Box>
 				<ScrollView
+					// style={{ backgroundColor: "red" }}
 					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
 					contentContainerStyle={{
 						gap: 10,
-						padding: 10,
+						padding: 5,
 						// marginTop: 10,
 						paddingBottom: 30,
 						flexDirection: "column",
@@ -82,8 +99,8 @@ const TransactionHistoryScreen = () => {
 						/>
 					))}
 				</ScrollView>
-			</>
-		</BackgroundWithBeasyIconAndWhiteContentArea>
+			</Card>
+		</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 	);
 };
 
@@ -122,147 +139,140 @@ const FiltersModal: React.FC<FiltersModalProps> = ({
 		});
 	}, [filterOm, filterMtn, filterFlooz, filterWave, filterCb, setOperatorsFilter]);
 
+	const { closeModal } = useModalsManagerContext();
+
 	const saveFilters = useCallback(() => {
 		saveOperatorsFilters();
 		setShowFiltersModal(false);
-	}, [saveOperatorsFilters, setShowFiltersModal]);
+		closeModal();
+	}, [saveOperatorsFilters, setShowFiltersModal, closeModal]);
 
 	return (
-		<>
-			{/* Overlay */}
+		<Card variant={"absoluteForegroundScreenSizedTransparentCard"}>
 			<Box
-				width={"100%"}
-				height={"100%"}
-				backgroundColor={"black"}
-				opacity={0.5}
-				position={"absolute"}
-				zIndex={10}
-				// p={"m"}
-			/>
-
-			{/* Content */}
+				backgroundColor={"white"}
+				width={"90%"}
+				// height={"70%"}
+				maxHeight={"80%"}
+				borderRadius={10}
+				p={"m"}
+				flexDirection={"column"}
+				style={{ margin: "auto" }}
+			>
+				<Box
+					justifyContent={"space-between"}
+					alignItems={"center"}
+					flexDirection={"row"}
+					width={"100%"}
+				>
+					<Text fontSize={20} variant={"black"} fontWeight={"bold"}>
+						Paramétrage filtre
+					</Text>
+					<Icon
+						name="close-outline"
+						size={30}
+						color="black"
+						onPress={() => {
+							closeModal();
+							setShowFiltersModal(false);
+						}}
+					/>
+				</Box>
 
-			<Box width={"100%"} height={"100%"} position={"absolute"} zIndex={11} p={"m"}>
+				<Text fontSize={20} fontWeight={"bold"} my={"s"}>
+					Opérateurs
+				</Text>
 				<Box
-					backgroundColor={"white"}
 					width={"100%"}
-					height={"100%"}
+					backgroundColor={"lightGray"}
 					borderRadius={10}
-					p={"m"}
-					flexDirection={"column"}
+					p={"s"}
+					gap={"s"}
 				>
 					<Box
+						flexDirection={"row"}
+						alignItems={"center"}
 						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
+					>
+						<Text fontWeight={"bold"}>Orange Money</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterOm}
+							onValueChange={setFilterOm}
+						/>
+					</Box>
+					<Box
+						flexDirection={"row"}
 						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
+					>
+						<Text fontWeight={"bold"}>MTN Money</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterMtn}
+							onValueChange={setFilterMtn}
+						/>
+					</Box>
+					<Box
 						flexDirection={"row"}
-						width={"100%"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
 					>
-						<Text fontSize={20} variant={"black"} fontWeight={"bold"}>
-							Paramétrage filtre
-						</Text>
-						<Icon
-							name="close-outline"
-							size={30}
-							color="black"
-							onPress={() => setShowFiltersModal(false)}
+						<Text fontWeight={"bold"}>Flooz Money</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterFlooz}
+							onValueChange={setFilterFlooz}
 						/>
 					</Box>
-
-					<Text fontSize={20} fontWeight={"bold"} my={"s"}>
-						Opérateurs
-					</Text>
 					<Box
-						width={"100%"}
-						backgroundColor={"lightGray"}
-						borderRadius={10}
-						p={"s"}
-						gap={"s"}
+						flexDirection={"row"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
 					>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Orange Money</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterOm}
-								onValueChange={setFilterOm}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>MTN Money</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterMtn}
-								onValueChange={setFilterMtn}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Flooz Money</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterFlooz}
-								onValueChange={setFilterFlooz}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Wave</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterWave}
-								onValueChange={setFilterWave}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Carte Bancaire</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterCb}
-								onValueChange={setFilterCb}
-							/>
-						</Box>
+						<Text fontWeight={"bold"}>Wave</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterWave}
+							onValueChange={setFilterWave}
+						/>
 					</Box>
-					<Box style={{ marginTop: "auto" }}>
-						<Button
-							variant={"full"}
-							label={"Valider"}
-							textVariants={"white"}
-							onPress={saveFilters}
+					<Box
+						flexDirection={"row"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						py={"s"}
+					>
+						<Text fontWeight={"bold"}>Carte Bancaire</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterCb}
+							onValueChange={setFilterCb}
 						/>
 					</Box>
 				</Box>
+				<Box style={{ marginTop: 20 }}>
+					<Button
+						variant={"full"}
+						label={"Valider"}
+						textVariants={"white"}
+						onPress={saveFilters}
+					/>
+				</Box>
 			</Box>
-		</>
+		</Card>
 	);
 };