diff --git a/app/login/page.tsx b/app/login/page.tsx
index d80bace..e2489db 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -7,7 +7,7 @@ import { loginSchema, LoginFormData } from "@/lib/validations";
 import { Input } from "@/components/ui/Input";
 import Button from "@/components/Button";
 import Link from "next/link";
-import Image from "next/image";
+import TeaIconsBackground from "@/components/TeaIconsBackground";
 import { ROUTES } from "@/utils/constants";
 import { GoogleLoginButton } from "@/components/GoogleLoginButton";
 import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk";
@@ -79,66 +79,7 @@ export default function LoginPage() {
 
   return (
     <div className="min-h-screen relative flex items-center justify-center py-12 px-4">
-      {/* Background avec icônes de thé */}
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        {/* Fond dégradé beige clair */}
-        <div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
-
-        {/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
-        <div key={animationKey} className="absolute inset-0 opacity-[0.5]">
-          {/* Ligne 1 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-
-          {/* Ligne 2 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 3 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 4 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
-
-          {/* Ligne 5 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 6 - 5 icons */}
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 7 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-        </div>
-
-        {/* Overlay lumineux pour harmoniser */}
-        <div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
-      </div>
+      <TeaIconsBackground animationKey={animationKey} />
 
       <div className="w-full max-w-md relative z-10">
 
diff --git a/app/page.tsx b/app/page.tsx
index bcc4d1c..dd80b01 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,82 +1,33 @@
 'use client';
 
 import Link from "next/link";
-import Image from "next/image";
 import Button from "@/components/Button";
 import CountdownTimer from "@/components/CountdownTimer";
 import GamePeriod from "@/components/GamePeriod";
 import GrandPrize from "@/components/GrandPrize";
 import AboutContest from "@/components/AboutContest";
+import TeaIconsBackground from "@/components/TeaIconsBackground";
+import { PrizeCard } from "@/components/ui";
 import { useState } from "react";
 import { useAuth } from "@/contexts/AuthContext";
 import { ROUTES } from "@/utils/constants";
 
+const HOME_PRIZES = [
+  { imageSrc: "/images/lots/infuseur.png", imageAlt: "Infuseur à thé premium", badge: "60%", title: "Infuseur à thé premium", description: "Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac" },
+  { imageSrc: "/images/lots/the-detox.png", imageAlt: "Boîte 100g thé détox", badge: "20%", title: "Boîte 100g thé détox", description: "Mélange détox aux plantes bio" },
+  { imageSrc: "/images/lots/the-signature.png", imageAlt: "Boîte 100g thé signature", badge: "10%", title: "Boîte 100g thé signature", description: "Notre mélange signature exclusif" },
+  { imageSrc: "/images/lots/coffret-39.png", imageAlt: "Coffret découverte 39€", badge: "6%", title: "Coffret découverte 39€", description: "Sélection de nos meilleurs thés" },
+  { imageSrc: "/images/lots/coffret-69.jpg", imageAlt: "Coffret prestige 69€", badge: "4%", title: "Coffret prestige 69€", description: "Une expérience complète" },
+  { imageSrc: "/images/lots/grand-prix.png", imageAlt: "Grand prix - 1 an de thé", badge: "1 an de THÉ", title: "Tirage Final", description: "Livraison mensuelle pendant 12 mois", isGrandPrix: true },
+];
+
 export default function HomePage() {
   const [animationKey] = useState(Date.now());
   const { isAuthenticated } = useAuth();
 
   return (
     <div className="min-h-screen -mt-[4.5rem] relative">
-      {/* Background avec icônes de thé */}
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        {/* Fond dégradé beige clair */}
-        <div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
-
-        {/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
-        <div key={animationKey} className="absolute inset-0 opacity-[0.5]">
-          {/* Ligne 1 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-
-          {/* Ligne 2 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 3 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 4 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
-
-          {/* Ligne 5 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 6 - 5 icons */}
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 7 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-        </div>
-
-        {/* Overlay lumineux pour harmoniser */}
-        <div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
-      </div>
+      <TeaIconsBackground animationKey={animationKey} />
 
       {/* Hero Section - Bannière principale */}
       <section className="relative min-h-[600px] pt-32 pb-24 overflow-hidden">
@@ -205,137 +156,9 @@ export default function HomePage() {
             </p>
 
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {/* Prize 1 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
-                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
-                  <Image
-                    src="/images/lots/infuseur.png"
-                    alt="Infuseur à thé premium"
-                    width={400}
-                    height={400}
-                    className="w-full h-full object-contain object-center"
-                  />
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    60%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
-                  <p className="text-gray-600 text-sm">
-                    Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 2 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
-                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
-                  <Image
-                    src="/images/lots/the-detox.png"
-                    alt="Boîte 100g thé détox"
-                    width={400}
-                    height={400}
-                    className="w-full h-full object-contain object-center"
-                  />
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-orange-100 text-orange-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    20%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé détox</h3>
-                  <p className="text-gray-600 text-sm">
-                    Mélange détox aux plantes bio
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 3 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
-                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
-                  <Image
-                    src="/images/lots/the-signature.png"
-                    alt="Boîte 100g thé signature"
-                    width={400}
-                    height={400}
-                    className="w-full h-full object-contain object-center"
-                  />
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    10%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé signature</h3>
-                  <p className="text-gray-600 text-sm">
-                    Notre mélange signature exclusif
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 4 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
-                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
-                  <Image
-                    src="/images/lots/coffret-39.png"
-                    alt="Coffret découverte 39€"
-                    width={400}
-                    height={400}
-                    className="w-full h-full object-contain object-center"
-                  />
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-purple-100 text-purple-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    6%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3>
-                  <p className="text-gray-600 text-sm">
-                    Sélection de nos meilleurs thés
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 5 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
-                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
-                  <Image
-                    src="/images/lots/coffret-69.jpg"
-                    alt="Coffret prestige 69€"
-                    width={400}
-                    height={400}
-                    className="w-full h-full object-contain object-center"
-                  />
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    4%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3>
-                  <p className="text-gray-600 text-sm">
-                    Une expérience complète
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 6 - Tirage Final */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border-2 border-[#d4a574] h-full flex flex-col">
-                <div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center p-2">
-                  <Image
-                    src="/images/lots/grand-prix.png"
-                    alt="Grand prix - 1 an de thé"
-                    width={400}
-                    height={400}
-                    className="w-full h-full object-contain object-center"
-                  />
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white text-sm font-bold px-3 py-1 rounded-full mb-3 shadow-md">
-                    1 an de THÉ
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Tirage Final</h3>
-                  <p className="text-gray-600 text-sm">
-                    Livraison mensuelle pendant 12 mois
-                  </p>
-                </div>
-              </div>
+              {HOME_PRIZES.map((prize, index) => (
+                <PrizeCard key={index} {...prize} />
+              ))}
             </div>
 
             <div className="text-center mt-12">
diff --git a/app/page.tsx.backup b/app/page.tsx.backup
deleted file mode 100644
index bff6090..0000000
--- a/app/page.tsx.backup
+++ /dev/null
@@ -1,311 +0,0 @@
-'use client';
-
-import Link from "next/link";
-import Image from "next/image";
-import Button from "@/components/Button";
-import CountdownTimer from "@/components/CountdownTimer";
-import GamePeriod from "@/components/GamePeriod";
-import GrandPrize from "@/components/GrandPrize";
-import AboutContest from "@/components/AboutContest";
-import { useState } from "react";
-
-export default function HomePage() {
-  const [animationKey] = useState(Date.now());
-
-  return (
-    <div className="min-h-screen -mt-[4.5rem] relative">
-      {/* Background avec icônes de thé */}
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        {/* Fond dégradé beige clair */}
-        <div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
-
-        {/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
-        <div key={animationKey} className="absolute inset-0 opacity-[0.5]">
-          {/* Ligne 1 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-
-          {/* Ligne 2 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 3 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 4 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
-
-          {/* Ligne 5 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 6 - 5 icons */}
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 7 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-        </div>
-
-        {/* Overlay lumineux pour harmoniser */}
-        <div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
-      </div>
-
-      {/* Hero Section - Bannière principale */}
-      <section className="relative min-h-[600px] pt-32 pb-24 overflow-hidden">
-
-        <div className="w-full relative z-10">
-          <div className="w-full text-center px-4">
-            <h1 className="text-5xl md:text-7xl font-bold text-[#5a5a4e] mb-6 leading-tight drop-shadow-sm">
-              Jeu Concours Thé Tip Top<br />
-              <span className="text-[#d4a574]">Nice</span>
-            </h1>
-            <p className="text-xl md:text-2xl text-[#6a6a5e] mb-8 leading-relaxed max-w-4xl mx-auto">
-              À l'occasion de l'ouverture de notre 10<sup>ème</sup> boutique de thé premium à Nice,<br />
-              participez à notre concours et gagnez des thés et accessoires exclusifs !
-            </p>
-
-            <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
-              <Link href="/register">
-                <button className="bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold text-lg px-12 py-5 rounded-full shadow-2xl transition-all w-full sm:w-auto hover:scale-105">
-                  Jouer maintenant
-                </button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Game Period & Countdown Section */}
-      <section className="py-20 bg-transparent">
-        <div className="container mx-auto px-4">
-          <div className="max-w-6xl mx-auto">
-            {/* Countdown Timer */}
-            <CountdownTimer
-              endDate={new Date('2025-12-31T23:59:59')}
-              title="Fin du concours dans"
-            />
-
-            {/* Game Period Cards */}
-            <GamePeriod
-              purchaseStartDate={new Date('2025-01-01')}
-              purchaseEndDate={new Date('2025-12-31')}
-              gameStartDate={new Date('2025-01-01')}
-              gameEndDate={new Date('2025-12-31')}
-            />
-
-            {/* Grand Prize Banner */}
-            <GrandPrize
-              prizeAmount="360€"
-              drawDate={new Date('2026-01-15')}
-              participantsCount={15420}
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* About Contest Section */}
-      <AboutContest />
-
-      {/* How to Participate Section */}
-      <section className="py-20 bg-white/60 backdrop-blur-sm">
-        <div className="container mx-auto px-4">
-          <div className="max-w-5xl mx-auto">
-            <h2 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4">
-              Comment participer?
-            </h2>
-            <p className="text-center text-gray-600 mb-16 text-lg max-w-2xl mx-auto">
-              3 étapes simples pour découvrir votre lot et rejoindre nos milliers de gagnants
-            </p>
-
-            <div className="grid md:grid-cols-3 gap-12">
-              {/* Step 1 */}
-              <div className="text-center relative">
-                <div className="absolute top-0 right-0 w-8 h-8 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold text-sm">
-                  1
-                </div>
-                <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
-                  <svg className="w-10 h-10 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                  </svg>
-                </div>
-                <h3 className="text-2xl font-bold mb-3 text-gray-900">Inscrivez-vous</h3>
-                <p className="text-gray-600 leading-relaxed">
-                  Créez votre compte rapidement avec Google, Facebook ou votre email
-                </p>
-              </div>
-
-              {/* Step 2 */}
-              <div className="text-center relative">
-                <div className="absolute top-0 right-0 w-8 h-8 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold text-sm">
-                  2
-                </div>
-                <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
-                  <svg className="w-10 h-10 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
-                  </svg>
-                </div>
-                <h3 className="text-2xl font-bold mb-3 text-gray-900">Entrez votre code</h3>
-                <p className="text-gray-600 leading-relaxed">
-                  Saisissez le code à 10 caractères de votre ticket d'achat à 49€
-                </p>
-              </div>
-
-              {/* Step 3 */}
-              <div className="text-center relative">
-                <div className="absolute top-0 right-0 w-8 h-8 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold text-sm">
-                  3
-                </div>
-                <div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
-                  <svg className="w-10 h-10 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
-                  </svg>
-                </div>
-                <h3 className="text-2xl font-bold mb-3 text-gray-900">Découvrez votre lot</h3>
-                <p className="text-gray-600 leading-relaxed">
-                  Résultat immédiat ! 100% des participants remportent un prix
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Prizes Section */}
-      <section className="py-20 bg-transparent">
-        <div className="container mx-auto px-4">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4">
-              Lots à gagner
-            </h2>
-            <p className="text-center text-gray-600 mb-16 text-lg max-w-3xl mx-auto">
-              Découvrez nos magnifiques prix, des accessoires premium aux coffrets exclusifs
-            </p>
-
-            <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
-              {/* Prize 1 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
-                <div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center p-8">
-                  <div className="text-7xl">🍵</div>
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    60%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
-                  <p className="text-gray-600 text-sm">
-                    Un infuseur élégant pour vos thés en vrac
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 2 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
-                <div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center p-8">
-                  <div className="text-7xl">📦</div>
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-orange-100 text-orange-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    20%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé détox</h3>
-                  <p className="text-gray-600 text-sm">
-                    Mélange détox aux plantes bio
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 3 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
-                <div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center p-8">
-                  <div className="text-7xl">🌿</div>
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    10%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé signature</h3>
-                  <p className="text-gray-600 text-sm">
-                    Notre mélange signature exclusif
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 4 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
-                <div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center p-8">
-                  <div className="text-7xl">🎁</div>
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-purple-100 text-purple-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    6%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3>
-                  <p className="text-gray-600 text-sm">
-                    Sélection de nos meilleurs thés
-                  </p>
-                </div>
-              </div>
-
-              {/* Prize 5 */}
-              <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border-2 border-[#f59e0b]">
-                <div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center p-8">
-                  <div className="text-7xl">🏆</div>
-                </div>
-                <div className="p-6">
-                  <div className="inline-block bg-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
-                    4%
-                  </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 69€</h3>
-                  <p className="text-gray-600 text-sm">
-                    Une expérience complète
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div className="text-center mt-12">
-              <Link href="/lots">
-                <Button
-                  variant="outline"
-                  size="lg"
-                  className="border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-semibold px-8"
-                >
-                  Voir tous les lots
-                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </Button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </section>
-
-    </div>
-  );
-}
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 976143f..c6ec600 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -5,7 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useAuth } from "@/contexts/AuthContext";
 import { registerSchema, RegisterFormData } from "@/lib/validations";
 import Link from "next/link";
-import Image from "next/image";
+import TeaIconsBackground from "@/components/TeaIconsBackground";
 import { ROUTES } from "@/utils/constants";
 
 export default function RegisterPage() {
@@ -36,66 +36,7 @@ export default function RegisterPage() {
 
   return (
     <div className="min-h-screen relative flex items-center justify-center py-12 px-4">
-      {/* Background avec icônes de thé */}
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        {/* Fond dégradé beige clair */}
-        <div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
-
-        {/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
-        <div key={animationKey} className="absolute inset-0 opacity-[0.5]">
-          {/* Ligne 1 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-
-          {/* Ligne 2 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 3 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 4 - 5 icons */}
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
-
-          {/* Ligne 5 - 5 icons */}
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
-
-          {/* Ligne 6 - 5 icons */}
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
-
-          {/* Ligne 7 - 5 icons */}
-          <Image src="/images/tea-icons/gift-box.png" alt="Boîte cadeau" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
-          <Image src="/images/tea-icons/teapot-green.png" alt="Théière verte" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
-          <Image src="/images/tea-icons/tea-leaves.png" alt="Feuilles de thé" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
-          <Image src="/images/tea-icons/tea-cup.png" alt="Tasse de thé" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
-          <Image src="/images/tea-icons/teapot-pink.png" alt="Théière rose" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
-        </div>
-
-        {/* Overlay lumineux pour harmoniser */}
-        <div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
-      </div>
+      <TeaIconsBackground animationKey={animationKey} />
 
       <div className="w-full max-w-md relative z-10">
 
diff --git a/components/TeaIconsBackground.tsx b/components/TeaIconsBackground.tsx
new file mode 100644
index 0000000..59251fd
--- /dev/null
+++ b/components/TeaIconsBackground.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+
+interface TeaIconsBackgroundProps {
+  animationKey?: number;
+}
+
+const TEA_ICONS = [
+  // Ligne 1 - 5 icons
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '5%', left: '10%', duration: '28s' },
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '7%', left: '30%', duration: '32s' },
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '6%', left: '50%', duration: '30s' },
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '8%', left: '70%', duration: '27s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '5%', left: '90%', duration: '31s' },
+  // Ligne 2 - 5 icons
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '18%', left: '15%', duration: '29s' },
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '20%', left: '35%', duration: '26s' },
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '19%', left: '55%', duration: '33s' },
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '21%', left: '75%', duration: '28s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '18%', left: '95%', duration: '30s' },
+  // Ligne 3 - 5 icons
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '31%', left: '10%', duration: '27s' },
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '33%', left: '30%', duration: '31s' },
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '32%', left: '50%', duration: '29s' },
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '34%', left: '70%', duration: '26s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '31%', left: '90%', duration: '32s' },
+  // Ligne 4 - 5 icons
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '44%', left: '15%', duration: '28s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '46%', left: '35%', duration: '30s' },
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '45%', left: '55%', duration: '33s' },
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '47%', left: '75%', duration: '27s' },
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '44%', left: '95%', duration: '29s' },
+  // Ligne 5 - 5 icons
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '57%', left: '10%', duration: '31s' },
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '59%', left: '30%', duration: '26s' },
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '58%', left: '50%', duration: '30s' },
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '60%', left: '70%', duration: '28s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '57%', left: '90%', duration: '32s' },
+  // Ligne 6 - 5 icons
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '70%', left: '15%', duration: '29s' },
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '72%', left: '35%', duration: '27s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '71%', left: '55%', duration: '31s' },
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '73%', left: '75%', duration: '28s' },
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '70%', left: '95%', duration: '30s' },
+  // Ligne 7 - 5 icons
+  { src: '/images/tea-icons/gift-box.png', alt: 'Boîte cadeau', top: '83%', left: '10%', duration: '26s' },
+  { src: '/images/tea-icons/teapot-green.png', alt: 'Théière verte', top: '85%', left: '30%', duration: '32s' },
+  { src: '/images/tea-icons/tea-leaves.png', alt: 'Feuilles de thé', top: '84%', left: '50%', duration: '29s' },
+  { src: '/images/tea-icons/tea-cup.png', alt: 'Tasse de thé', top: '86%', left: '70%', duration: '27s' },
+  { src: '/images/tea-icons/teapot-pink.png', alt: 'Théière rose', top: '83%', left: '90%', duration: '31s' },
+];
+
+export const TeaIconsBackground: React.FC<TeaIconsBackgroundProps> = ({ animationKey }) => {
+  return (
+    <div className="fixed inset-0 -z-10 overflow-hidden">
+      {/* Fond dégradé beige clair */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
+
+      {/* Icônes de thé dispersées avec animation */}
+      <div key={animationKey} className="absolute inset-0 opacity-[0.5]">
+        {TEA_ICONS.map((icon, index) => (
+          <Image
+            key={index}
+            src={icon.src}
+            alt={icon.alt}
+            width={56}
+            height={56}
+            className="absolute animate-float-gentle"
+            style={{
+              top: icon.top,
+              left: icon.left,
+              animationDuration: icon.duration,
+            }}
+          />
+        ))}
+      </div>
+
+      {/* Overlay lumineux pour harmoniser */}
+      <div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
+    </div>
+  );
+};
+
+export default TeaIconsBackground;