diff --git a/app/globals.css b/app/globals.css
index 9350a78..69b9080 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -118,24 +118,25 @@
   @keyframes fallDown {
     0% {
       transform: translateY(-100vh) translateX(0px);
-      opacity: 0;
-    }
-    10% {
       opacity: 0.5;
     }
     20% {
       transform: translateY(-60vh) translateX(15px);
+      opacity: 0.5;
     }
     40% {
       transform: translateY(-20vh) translateX(-10px);
+      opacity: 0.5;
     }
     60% {
       transform: translateY(20vh) translateX(20px);
+      opacity: 0.5;
     }
     80% {
       transform: translateY(60vh) translateX(-15px);
+      opacity: 0.5;
     }
-    90% {
+    95% {
       opacity: 0.5;
     }
     100% {
@@ -146,5 +147,7 @@
 
   .animate-float-gentle {
     animation: fallDown 15s linear infinite;
+    opacity: 0;
+    animation-fill-mode: forwards;
   }
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 3a48ddd..06ed891 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -7,6 +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 { ROUTES } from "@/utils/constants";
 import { GoogleLoginButton } from "@/components/GoogleLoginButton";
 import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk";
@@ -20,6 +21,7 @@ export default function LoginPage() {
   const [isFacebookLoading, setIsFacebookLoading] = useState(false);
   const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  const [animationKey] = useState(Date.now());
 
   const hasGoogleAuth = !!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
   const hasFacebookAuth = !!process.env.NEXT_PUBLIC_FACEBOOK_APP_ID;
@@ -76,8 +78,69 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
-      <div className="w-full max-w-md">
+    <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="" 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>
+
+      <div className="w-full max-w-md relative z-10">
 
         {/* Title */}
         <div className="text-center mb-8">
@@ -92,7 +155,7 @@ export default function LoginPage() {
 
           {/* Tabs */}
           <div className="flex border-b border-gray-200">
-            <button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#1a4d2e]">
+            <button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#d4a574]">
               Connexion
             </button>
             <Link
@@ -114,19 +177,19 @@ export default function LoginPage() {
                 )}
 
                 {hasFacebookAuth && (
-                  <button
+                  <Button
                     type="button"
+                    variant="outline"
                     onClick={handleFacebookLogin}
                     disabled={isFacebookLoading || !isFacebookSDKLoaded}
-                    className="w-full flex items-center justify-center gap-3 px-4 py-3 border-2 border-primary-600 rounded-lg hover:bg-primary-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    isLoading={isFacebookLoading}
+                    fullWidth
                   >
-                    <svg className="w-5 h-5" fill="#1877F2" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
                       <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                     </svg>
-                    <span className="font-medium text-primary-600">
-                      {isFacebookLoading ? "Connexion..." : "Continuer avec Facebook"}
-                    </span>
-                  </button>
+                    Facebook
+                  </Button>
                 )}
               </div>
             )}
@@ -156,9 +219,9 @@ export default function LoginPage() {
                 <input
                   id="email"
                   type="email"
-                  placeholder="votre@email.com"
+                  placeholder="email"
                   {...register("email")}
-                  className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
+                  className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
                 />
                 {errors.email && (
                   <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
@@ -174,9 +237,9 @@ export default function LoginPage() {
                   <input
                     id="password"
                     type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
+                    placeholder="mot de passe"
                     {...register("password")}
-                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
+                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
                   />
                   <button
                     type="button"
@@ -204,7 +267,7 @@ export default function LoginPage() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
+                className="w-full bg-[#d4a574] hover:bg-[#c4956a] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
               >
                 {isSubmitting ? "Connexion..." : "Se connecter"}
               </button>
@@ -213,7 +276,7 @@ export default function LoginPage() {
               <div className="text-center">
                 <Link
                   href="/forgot-password"
-                  className="text-sm text-[#1a4d2e] hover:text-[#f59e0b] hover:underline transition-colors"
+                  className="text-sm text-[#5a5a4e] hover:text-[#d4a574] hover:underline transition-colors"
                 >
                   Mot de passe oublié ?
                 </Link>
diff --git a/app/page.tsx b/app/page.tsx
index bcb0346..bff6090 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,15 +7,10 @@ import CountdownTimer from "@/components/CountdownTimer";
 import GamePeriod from "@/components/GamePeriod";
 import GrandPrize from "@/components/GrandPrize";
 import AboutContest from "@/components/AboutContest";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 export default function HomePage() {
-  const [animationKey, setAnimationKey] = useState(0);
-
-  useEffect(() => {
-    // Redémarrer l'animation à chaque chargement de la page
-    setAnimationKey(Date.now());
-  }, []);
+  const [animationKey] = useState(Date.now());
 
   return (
     <div className="min-h-screen -mt-[4.5rem] relative">
@@ -27,53 +22,53 @@ export default function HomePage() {
         {/* 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={{animationDelay: '0s', 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={{animationDelay: '3s', 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={{animationDelay: '6s', 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={{animationDelay: '9s', 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={{animationDelay: '2s', animationDuration: '31s'}} />
+          <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={{animationDelay: '4s', 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={{animationDelay: '7s', 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={{animationDelay: '1s', 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={{animationDelay: '10s', 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={{animationDelay: '5s', animationDuration: '30s'}} />
+          <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={{animationDelay: '8s', 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={{animationDelay: '11s', 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={{animationDelay: '3s', 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={{animationDelay: '6s', 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={{animationDelay: '12s', animationDuration: '32s'}} />
+          <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={{animationDelay: '2s', 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={{animationDelay: '9s', 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={{animationDelay: '4s', 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={{animationDelay: '7s', 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={{animationDelay: '1s', animationDuration: '29s'}} />
+          <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={{animationDelay: '10s', 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={{animationDelay: '5s', 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={{animationDelay: '8s', 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={{animationDelay: '11s', 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={{animationDelay: '3s', animationDuration: '32s'}} />
+          <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={{animationDelay: '6s', 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={{animationDelay: '9s', 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={{animationDelay: '2s', 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={{animationDelay: '12s', 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={{animationDelay: '4s', animationDuration: '30s'}} />
+          <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={{animationDelay: '7s', 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={{animationDelay: '1s', 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={{animationDelay: '10s', 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={{animationDelay: '5s', 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={{animationDelay: '8s', animationDuration: '31s'}} />
+          <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 */}
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 311dcb3..3320e94 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -5,6 +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 { ROUTES } from "@/utils/constants";
 
 export default function RegisterPage() {
@@ -12,6 +13,7 @@ export default function RegisterPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [animationKey] = useState(Date.now());
 
   const {
     register,
@@ -33,8 +35,69 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
-      <div className="w-full max-w-md">
+    <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="" 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>
+
+      <div className="w-full max-w-md relative z-10">
 
         {/* Title */}
         <div className="text-center mb-8">
@@ -55,7 +118,7 @@ export default function RegisterPage() {
             >
               Connexion
             </Link>
-            <button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#1a4d2e]">
+            <button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#d4a574]">
               Inscription
             </button>
           </div>
@@ -75,9 +138,9 @@ export default function RegisterPage() {
                   <input
                     id="firstName"
                     type="text"
-                    placeholder="Jean"
+                    placeholder="prénom"
                     {...register("firstName")}
-                    className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
+                    className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
                   />
                   {errors.firstName && (
                     <p className="mt-1 text-sm text-red-500">{errors.firstName.message}</p>
@@ -91,9 +154,9 @@ export default function RegisterPage() {
                   <input
                     id="lastName"
                     type="text"
-                    placeholder="Dupont"
+                    placeholder="nom"
                     {...register("lastName")}
-                    className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
+                    className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
                   />
                   {errors.lastName && (
                     <p className="mt-1 text-sm text-red-500">{errors.lastName.message}</p>
@@ -109,9 +172,9 @@ export default function RegisterPage() {
                 <input
                   id="email"
                   type="email"
-                  placeholder="votre.email@example.com"
+                  placeholder="email"
                   {...register("email")}
-                  className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
+                  className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
                 />
                 {errors.email && (
                   <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
@@ -126,9 +189,9 @@ export default function RegisterPage() {
                 <input
                   id="phone"
                   type="tel"
-                  placeholder="0612345678"
+                  placeholder="téléphone"
                   {...register("phone")}
-                  className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
+                  className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
                 />
                 <p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
                 {errors.phone && (
@@ -145,9 +208,9 @@ export default function RegisterPage() {
                   <input
                     id="password"
                     type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
+                    placeholder="mot de passe"
                     {...register("password")}
-                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
+                    className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
                   />
                   <button
                     type="button"
@@ -181,9 +244,9 @@ export default function RegisterPage() {
                   <input
                     id="confirmPassword"
                     type={showConfirmPassword ? "text" : "password"}
-                    placeholder="••••••••"
+                    placeholder="confirmer mot de passe"
                     {...register("confirmPassword")}
-                    className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
+                    className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
                   />
                   <button
                     type="button"
@@ -213,15 +276,15 @@ export default function RegisterPage() {
                   id="terms"
                   type="checkbox"
                   required
-                  className="mt-1 w-5 h-5 text-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]"
+                  className="mt-1 w-5 h-5 text-[#d4a574] border-gray-300 rounded focus:ring-2 focus:ring-[#d4a574]"
                 />
                 <label htmlFor="terms" className="text-sm text-gray-700 select-none cursor-pointer">
                   J'accepte les{' '}
-                  <Link href="/terms" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
+                  <Link href="/terms" className="text-[#5a5a4e] underline hover:text-[#d4a574]">
                     conditions d'utilisation
                   </Link>{' '}
                   et la{' '}
-                  <Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
+                  <Link href="/privacy" className="text-[#5a5a4e] underline hover:text-[#d4a574]">
                     politique de confidentialité
                   </Link>{' '}
                   <span className="text-red-500">*</span>
@@ -232,7 +295,7 @@ export default function RegisterPage() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
+                className="w-full bg-[#d4a574] hover:bg-[#c4956a] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
               >
                 {isSubmitting ? "Inscription..." : "S'inscrire"}
               </button>
diff --git a/components/Header.tsx b/components/Header.tsx
index e1b5be1..abc7019 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -65,7 +65,7 @@ export default function Header() {
               href={ROUTES.LOTS}
               className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
             >
-              Loto à gagner
+              Lots à gagner
             </Link>
             <Link
               href="/rules"
@@ -229,7 +229,7 @@ export default function Header() {
                 className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
-                Gains
+                Lots
               </Link>
               <Link
                 href="/about"