diff --git a/frontend-prep/src/components/ProductCard.css b/frontend-prep/src/components/ProductCard.css
index 2ab86d2d..d0f543ea 100644
--- a/frontend-prep/src/components/ProductCard.css
+++ b/frontend-prep/src/components/ProductCard.css
@@ -404,9 +404,10 @@ div[data-category="gros&semi"] .success-message {
     transform: scale(1.05);
 }
 
-.media-indicator i {
+.media-indicator svg {
     color: #ffffff;
-    font-size: 18px;
+    width: 18px;
+    height: 18px;
     animation: cameraPulse 2s ease-in-out infinite;
 }
 
@@ -453,7 +454,7 @@ div[data-category="zipette&co"] .media-indicator:hover {
     border-color: #f5f5f0;
 }
 
-div[data-category="zipette&co"] .media-indicator i {
+div[data-category="zipette&co"] .media-indicator svg {
     color: #1a1a1a;
 }
 
@@ -621,8 +622,9 @@ div[data-category="gros&semi"] .details-button:hover {
     transform: scale(0.95);
 }
 
-.video-close-btn i {
-    font-size: 18px;
+.video-close-btn svg {
+    width: 18px;
+    height: 18px;
 }
 
 .video-player {
@@ -670,8 +672,9 @@ div[data-category="gros&semi"] .details-button:hover {
         height: 36px;
     }
 
-    .video-close-btn i {
-        font-size: 16px;
+    .video-close-btn svg {
+        width: 16px;
+        height: 16px;
     }
 
     .video-player {
@@ -702,8 +705,9 @@ div[data-category="gros&semi"] .details-button:hover {
         right: 10px;
     }
 
-    .media-indicator i {
-        font-size: 16px;
+    .media-indicator svg {
+        width: 16px;
+        height: 16px;
     }
 }
 
diff --git a/frontend-prep/src/components/ProductCard.tsx b/frontend-prep/src/components/ProductCard.tsx
index e9398d23..4fe92e53 100644
--- a/frontend-prep/src/components/ProductCard.tsx
+++ b/frontend-prep/src/components/ProductCard.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useCart } from "../context/useCart";
+import { Camera, Info, X } from "lucide-react";
 import "./ProductCard.css";
 
 function getTextColor(hex: string): string {
@@ -139,7 +140,7 @@ function ProductCard({
                             onClick={handleVideoToggle}
                             aria-label="Voir la vidéo du produit"
                         >
-                            <i className="fas fa-camera"></i>
+                            <Camera size={18} />
                         </button>
                     )}
                     {/* ✨ Bouton "Détails" */}
@@ -148,7 +149,7 @@ function ProductCard({
                         onClick={handleDetailsClick}
                         aria-label="Voir les détails du produit"
                     >
-                        <i className="fas fa-info-circle"></i>
+                        <Info size={14} />
                         <span>Détails</span>
                     </button>
                     {isOutOfStock && (
@@ -229,7 +230,7 @@ function ProductCard({
                             onClick={handleCloseVideo}
                             aria-label="Fermer la vidéo"
                         >
-                            <i className="fas fa-times"></i>
+                            <X size={18} />
                         </button>
                         <video
                             src={videoUrl}
diff --git a/frontend-prep/src/pages/User/Cart.tsx b/frontend-prep/src/pages/User/Cart.tsx
index 4423db76..dc599d98 100644
--- a/frontend-prep/src/pages/User/Cart.tsx
+++ b/frontend-prep/src/pages/User/Cart.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { isUserAuthenticated, getProductById, getMediaUrl } from "../../api/api";
 import type { Product } from "../../api/api";
-import { Trash2, ShoppingCart, AlertTriangle } from "lucide-react";
+import { Trash2, ShoppingCart, AlertTriangle, Leaf, X } from "lucide-react";
 import "./Cart.css";
 
 interface CartItemWithMedia {
@@ -169,18 +169,9 @@ function Cart() {
                                                 />
                                             ) : (
                                                 <div className="cart-row-img-placeholder">
-                                                    <i className="fas fa-leaf"></i>
+                                                    <Leaf size={20} />
                                                 </div>
                                             )}
-                                            {(item as CartItemWithMedia).hasVideo && (item as CartItemWithMedia).videoUrl && (
-                                                <button
-                                                    className="cart-row-video-badge"
-                                                    onClick={(e) => { e.stopPropagation(); setCurrentVideoUrl((item as CartItemWithMedia).videoUrl!); setShowVideo(true); }}
-                                                    aria-label="Voir la vidéo"
-                                                >
-                                                    <i className="fas fa-camera"></i>
-                                                </button>
-                                            )}
                                         </div>
 
                                         {/* Infos */}
@@ -247,7 +238,7 @@ function Cart() {
                 <div className="video-modal" onClick={() => { setShowVideo(false); setCurrentVideoUrl(""); }}>
                     <div className="video-modal-content" onClick={(e) => e.stopPropagation()}>
                         <button className="video-close-btn" onClick={() => { setShowVideo(false); setCurrentVideoUrl(""); }}>
-                            <i className="fas fa-times"></i>
+                            <X size={18} />
                         </button>
                         <video src={currentVideoUrl} controls autoPlay className="video-player">
                             Votre navigateur ne supporte pas la lecture de vidéos.
diff --git a/frontend-prep/src/pages/User/OrderDetails.tsx b/frontend-prep/src/pages/User/OrderDetails.tsx
index e8d4e2c3..5e881e63 100644
--- a/frontend-prep/src/pages/User/OrderDetails.tsx
+++ b/frontend-prep/src/pages/User/OrderDetails.tsx
@@ -24,6 +24,8 @@ import {
     Mail,
     CreditCard,
     ShoppingBag,
+    Camera,
+    X,
 } from "lucide-react";
 
 interface OrderProduct {
@@ -622,7 +624,7 @@ function OrderDetails() {
                                                             }}
                                                             aria-label="Voir la vidéo du produit"
                                                         >
-                                                            <i className="fas fa-camera"></i>
+                                                            <Camera size={14} />
                                                             <span>Vidéo</span>
                                                         </button>
                                                     )}
@@ -767,7 +769,7 @@ function OrderDetails() {
                                 onClick={handleCloseVideo}
                                 aria-label="Fermer la vidéo"
                             >
-                                <i className="fas fa-times"></i>
+                                <X size={18} />
                             </button>
                             <video
                                 src={currentVideoUrl}