diff --git a/frontend-prep/src/components/ProductCard.css b/frontend-prep/src/components/ProductCard.css
index 9dc7be91..23b4ae1a 100644
--- a/frontend-prep/src/components/ProductCard.css
+++ b/frontend-prep/src/components/ProductCard.css
@@ -14,7 +14,8 @@
 
 .product-card:hover {
     transform: scale(1.08);
-    box-shadow: 0 8px 25px color-mix(in srgb, var(--category-color, white) 40%, transparent);
+    box-shadow: 0 8px 25px
+        color-mix(in srgb, var(--category-color, white) 40%, transparent);
     z-index: 10;
 }
 
diff --git a/frontend-prep/src/components/ProductCard.tsx b/frontend-prep/src/components/ProductCard.tsx
index d27c56a6..707c5efc 100644
--- a/frontend-prep/src/components/ProductCard.tsx
+++ b/frontend-prep/src/components/ProductCard.tsx
@@ -204,7 +204,7 @@ function ProductCard({
                             {isOutOfStock
                                 ? "Rupture de stock"
                                 : isComingSoon
-                                  ? "Bientôt disponible"
+                                  ? "BIENTÔT DISPONIBLE"
                                   : "Ajouter rapidement"}
                         </button>
 
diff --git a/mobile/src/components/ProductCard.tsx b/mobile/src/components/ProductCard.tsx
index 61fb9d00..5e150d0a 100644
--- a/mobile/src/components/ProductCard.tsx
+++ b/mobile/src/components/ProductCard.tsx
@@ -176,7 +176,9 @@ export default function ProductCard({
                 )}
                 {isComingSoon && (
                     <View style={styles.comingSoonOverlay}>
-                        <Text style={styles.comingSoonText}>COMMING SOON</Text>
+                        <View style={styles.comingSoonBox}>
+                            <Text style={styles.comingSoonText}>BIENTÔT DISPONIBLE</Text>
+                        </View>
                     </View>
                 )}
             </View>
@@ -477,13 +479,14 @@ const styles = StyleSheet.create({
     },
     comingSoonOverlay: {
         position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: [
-            { translateX: -80 },
-            { translateY: -25 },
-            { rotate: "-15deg" },
-        ],
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    comingSoonBox: {
         backgroundColor: "rgba(0,0,0,0.8)",
         borderWidth: 4,
         borderColor: "rgba(34,197,94,0.95)",
@@ -492,7 +495,7 @@ const styles = StyleSheet.create({
     },
     comingSoonText: {
         color: "rgba(34,197,94,0.95)",
-        fontSize: 24,
+        fontSize: 16,
         fontWeight: "900",
         letterSpacing: 2,
         textTransform: "uppercase",