using the card component

src/components/BalanceContainer.tsx

 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import Card from "@re-card";
 import { images } from "@styles/Commons";
 import * as LocalAuthentication from "expo-local-authentication";
 import { useState } from "react";
@@ -23,25 +24,13 @@ const BalanceContainer = ({ label, balance }: Props) => {
 	};
 
 	return (
-		<Box
-			position={"relative"}
-			width={300}
-			height={130}
-			alignItems={"center"}
-			justifyContent={"center"}
-		>
-			<Box
-				width={300}
-				height={130}
-				borderRadius={10}
-				overflow={"hidden"}
-				position={"absolute"}
-			>
+		<Card position={"relative"} variant={"balanceContainer"}>
+			<Card variant={"balanceContainer"} position={"absolute"}>
 				<Image
 					source={require("../../assets/balance_container.png")}
 					style={images.cover}
 				/>
-			</Box>
+			</Card>
 
 			<Box alignItems={"center"} gap={"s"}>
 				<TouchableOpacity onPress={handleLocalAuthentication}>
@@ -63,7 +52,7 @@ const BalanceContainer = ({ label, balance }: Props) => {
 
 				<Text color={"gray"}>{label}</Text>
 			</Box>
-		</Box>
+		</Card>
 	);
 };