diff --git a/app/client/page.tsx b/app/client/page.tsx
index 7e81bbb..dc95dc6 100644
--- a/app/client/page.tsx
+++ b/app/client/page.tsx
@@ -78,32 +78,32 @@ export default function ClientPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
       <div className="container mx-auto px-4">
         {/* Welcome Section */}
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">
+          <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2">
             Bonjour {user?.firstName} ! 👋
           </h1>
-          <p className="text-gray-600">
+          <p className="text-[#8a8a7a]">
             Bienvenue dans votre espace client
           </p>
         </div>
 
         {/* Quick Action */}
         <div className="mb-8">
-          <div className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] text-white rounded-xl shadow-md p-8">
+          <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white rounded-xl shadow-md p-8 border-2 border-[#e5e4dc]">
             <div className="flex flex-col md:flex-row items-center justify-between gap-4">
               <div>
                 <h2 className="text-2xl font-bold mb-2">
                   Vous avez un nouveau ticket ?
                 </h2>
-                <p className="text-green-50">
+                <p className="text-white/90">
                   Entrez votre code et découvrez votre gain instantanément
                 </p>
               </div>
               <Link href={ROUTES.GAME}>
-                <button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all hover:shadow-xl whitespace-nowrap">
+                <button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-4 rounded-lg transition-all shadow-lg hover:scale-105 duration-300 whitespace-nowrap">
                   Jouer maintenant 🎮
                 </button>
               </Link>
@@ -113,13 +113,13 @@ export default function ClientPage() {
 
         {/* Statistics Cards */}
         <div className="grid md:grid-cols-3 gap-6 mb-8">
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
                   Total Participations
                 </p>
-                <p className="text-4xl font-bold text-gray-900">
+                <p className="text-4xl font-bold text-blue-600">
                   {stats.total}
                 </p>
               </div>
@@ -131,10 +131,10 @@ export default function ClientPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
                   Gains réclamés
                 </p>
                 <p className="text-4xl font-bold text-green-600">
@@ -149,10 +149,10 @@ export default function ClientPage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
                   En attente
                 </p>
                 <p className="text-4xl font-bold text-yellow-600">
@@ -169,12 +169,12 @@ export default function ClientPage() {
         </div>
 
         {/* Recent Tickets */}
-        <div className="bg-white rounded-xl shadow-md overflow-hidden">
-          <div className="px-6 py-4 border-b border-gray-200">
+        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+          <div className="px-6 py-4 border-b border-[#e5e4dc]">
             <div className="flex items-center justify-between">
-              <h2 className="text-xl font-bold text-gray-900">Mes derniers tickets</h2>
+              <h2 className="text-xl font-bold text-[#5a5a4e]">Mes derniers tickets</h2>
               <Link href={ROUTES.HISTORY}>
-                <button className="text-[#1a4d2e] hover:text-[#f59e0b] font-semibold text-sm transition-colors">
+                <button className="text-[#d4a574] hover:text-[#c4956a] font-semibold text-sm transition-colors">
                   Voir tout l'historique
                 </button>
               </Link>
@@ -184,11 +184,11 @@ export default function ClientPage() {
             {tickets.length === 0 ? (
               <div className="text-center py-12">
                 <div className="text-6xl mb-4">🎲</div>
-                <p className="text-gray-600 mb-4">
+                <p className="text-[#8a8a7a] mb-4">
                   Vous n'avez pas encore participé au jeu
                 </p>
                 <Link href={ROUTES.GAME}>
-                  <button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all">
+                  <button className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300">
                     Jouer maintenant
                   </button>
                 </Link>
@@ -197,31 +197,31 @@ export default function ClientPage() {
               <div className="overflow-x-auto">
                 <table className="min-w-full">
                   <thead>
-                    <tr className="border-b border-gray-200">
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    <tr className="border-b border-[#e5e4dc]">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Code Ticket
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Gain
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Statut
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Date
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200">
+                  <tbody className="divide-y divide-[#e5e4dc]">
                     {tickets.slice(0, 5).map((ticket) => {
                       const prizeConfig = ticket.prize
                         ? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
                         : null;
 
                       return (
-                        <tr key={ticket.id} className="hover:bg-gray-50 transition-colors">
+                        <tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors">
                           <td className="px-6 py-4 whitespace-nowrap">
-                            <span className="font-mono text-sm font-semibold text-gray-900">
+                            <span className="font-mono text-sm font-semibold text-[#5a5a4e]">
                               {ticket.code}
                             </span>
                           </td>
@@ -257,7 +257,7 @@ export default function ClientPage() {
                                     )}
                                   </div>
                                   <div>
-                                    <p className="text-sm font-medium text-gray-900">
+                                    <p className="text-sm font-medium text-[#5a5a4e]">
                                       {prizeConfig.name}
                                     </p>
                                   </div>
@@ -268,7 +268,7 @@ export default function ClientPage() {
                           <td className="px-6 py-4 whitespace-nowrap">
                             {getStatusBadge(ticket.status)}
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
                             {ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"}
                           </td>
                         </tr>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 6e96fe7..2af4598 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -45,15 +45,15 @@ export default function ContactPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
       {/* Hero Section */}
-      <section className="bg-white py-12">
+      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
               Contactez-nous
             </h1>
-            <p className="text-lg text-gray-600">
+            <p className="text-lg text-[#8a8a7a]">
               Une question sur le jeu-concours ? Besoin d'aide ? Notre équipe est là pour vous accompagner !
             </p>
           </div>
@@ -68,13 +68,13 @@ export default function ContactPage() {
 
               {/* Contact Form */}
               <div>
-                <div className="bg-white rounded-xl shadow-md p-8">
-                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Envoyez-nous un message</h2>
+                <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
+                  <h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Envoyez-nous un message</h2>
 
                   <form onSubmit={handleSubmit} className="space-y-6">
                     {/* Nom complet */}
                     <div>
-                      <label htmlFor="fullName" className="block text-sm font-semibold text-gray-700 mb-2">
+                      <label htmlFor="fullName" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
                         Nom complet <span className="text-red-500">*</span>
                       </label>
                       <input
@@ -85,13 +85,13 @@ export default function ContactPage() {
                         value={formData.fullName}
                         onChange={handleChange}
                         placeholder="Votre nom et prénom"
-                        className="w-full px-4 py-3 border 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-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574]"
                       />
                     </div>
 
                     {/* Email */}
                     <div>
-                      <label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
+                      <label htmlFor="email" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
                         Email <span className="text-red-500">*</span>
                       </label>
                       <input
@@ -102,13 +102,13 @@ export default function ContactPage() {
                         value={formData.email}
                         onChange={handleChange}
                         placeholder="votre@email.com"
-                        className="w-full px-4 py-3 border 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-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574]"
                       />
                     </div>
 
                     {/* Sujet */}
                     <div>
-                      <label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2">
+                      <label htmlFor="subject" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
                         Sujet <span className="text-red-500">*</span>
                       </label>
                       <select
@@ -117,7 +117,7 @@ export default function ContactPage() {
                         required
                         value={formData.subject}
                         onChange={handleChange}
-                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent bg-white"
+                        className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white"
                       >
                         <option value="">Sélectionnez un sujet</option>
                         <option value="jeu-concours">Question sur le jeu-concours</option>
@@ -130,7 +130,7 @@ export default function ContactPage() {
 
                     {/* Message */}
                     <div>
-                      <label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
+                      <label htmlFor="message" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
                         Message <span className="text-red-500">*</span>
                       </label>
                       <textarea
@@ -141,7 +141,7 @@ export default function ContactPage() {
                         onChange={handleChange}
                         placeholder="Décrivez votre demande en détail..."
                         rows={6}
-                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent resize-none"
+                        className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] resize-none"
                       />
                     </div>
 
@@ -154,11 +154,11 @@ export default function ContactPage() {
                         required
                         checked={formData.acceptPolicy}
                         onChange={handleCheckboxChange}
-                        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-[#e5e4dc] rounded focus:ring-2 focus:ring-[#d4a574]"
                       />
-                      <label htmlFor="acceptPolicy" className="text-sm text-gray-700 select-none cursor-pointer">
+                      <label htmlFor="acceptPolicy" className="text-sm text-[#5a5a4e] select-none cursor-pointer">
                         J'accepte que mes données soient collectées et traitées conformément à la{' '}
-                        <Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
+                        <Link href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">
                           politique de confidentialité
                         </Link>{' '}
                         <span className="text-red-500">*</span>
@@ -170,7 +170,7 @@ export default function ContactPage() {
                       <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-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105"
                       >
                         {isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
                       </button>
@@ -183,16 +183,16 @@ export default function ContactPage() {
               <div className="space-y-6">
 
                 {/* Nos coordonnées */}
-                <div className="bg-white rounded-xl shadow-md p-8">
-                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Nos coordonnées</h2>
+                <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
+                  <h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Nos coordonnées</h2>
 
                   <div className="space-y-6">
                     {/* Siège social */}
                     <div className="flex items-start gap-4">
-                      <div className="text-2xl flex-shrink-0">📍</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📍</div>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Siège social</h3>
-                        <p className="text-gray-600 text-sm">
+                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Siège social</h3>
+                        <p className="text-[#8a8a7a] text-sm">
                           Thé Tip Top<br />
                           123 Avenue des Thés<br />
                           75001 Paris, France
@@ -202,11 +202,11 @@ export default function ContactPage() {
 
                     {/* Téléphone */}
                     <div className="flex items-start gap-4">
-                      <div className="text-2xl flex-shrink-0">📞</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📞</div>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Téléphone</h3>
-                        <p className="text-gray-600 text-sm">
-                          <a href="tel:+33123456789" className="hover:text-[#1a4d2e] transition-colors">
+                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Téléphone</h3>
+                        <p className="text-[#8a8a7a] text-sm">
+                          <a href="tel:+33123456789" className="hover:text-[#d4a574] transition-colors">
                             +33 1 23 45 67 89
                           </a><br />
                           <span className="text-xs">Du lundi au vendredi<br />9h00 - 18h00</span>
@@ -216,22 +216,22 @@ export default function ContactPage() {
 
                     {/* Email */}
                     <div className="flex items-start gap-4">
-                      <div className="text-2xl flex-shrink-0">✉️</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">✉️</div>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Email</h3>
-                        <div className="text-gray-600 text-sm space-y-1">
+                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Email</h3>
+                        <div className="text-[#8a8a7a] text-sm space-y-1">
                           <p>
-                            <a href="mailto:contact@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
+                            <a href="mailto:contact@thetiptop.com" className="hover:text-[#d4a574] transition-colors">
                               contact@thetiptop.com
                             </a>
                           </p>
                           <p>
-                            <a href="mailto:support@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
+                            <a href="mailto:support@thetiptop.com" className="hover:text-[#d4a574] transition-colors">
                               support@thetiptop.com
                             </a>
                           </p>
                           <p>
-                            <a href="mailto:privacy@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
+                            <a href="mailto:privacy@thetiptop.com" className="hover:text-[#d4a574] transition-colors">
                               privacy@thetiptop.com
                             </a>
                           </p>
@@ -241,10 +241,10 @@ export default function ContactPage() {
 
                     {/* Service client */}
                     <div className="flex items-start gap-4">
-                      <div className="text-2xl flex-shrink-0">🕐</div>
+                      <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">🕐</div>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Service client</h3>
-                        <p className="text-gray-600 text-sm">
+                        <h3 className="font-semibold text-[#5a5a4e] mb-1">Service client</h3>
+                        <p className="text-[#8a8a7a] text-sm">
                           Réponse sous 24h<br />
                           Support multilingue<br />
                           Du lundi au samedi
@@ -255,49 +255,49 @@ export default function ContactPage() {
                 </div>
 
                 {/* Nos boutiques */}
-                <div className="bg-white rounded-xl shadow-md p-8">
-                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Nos boutiques</h2>
+                <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
+                  <h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Nos boutiques</h2>
 
                   <div className="space-y-4">
                     {/* Boutique 1 */}
-                    <div className="pb-4 border-b border-gray-200">
-                      <h3 className="font-semibold text-gray-900 mb-2">Paris Rivoli</h3>
-                      <p className="text-gray-600 text-sm mb-1">
+                    <div className="pb-4 border-b border-[#e5e4dc]">
+                      <h3 className="font-semibold text-[#5a5a4e] mb-2">Paris Rivoli</h3>
+                      <p className="text-[#8a8a7a] text-sm mb-1">
                         123 Rue de Rivoli, 75001 Paris
                       </p>
-                      <p className="text-sm text-gray-500">01 23 45 67 89</p>
+                      <p className="text-sm text-[#8a8a7a]">01 23 45 67 89</p>
                     </div>
 
                     {/* Boutique 2 */}
-                    <div className="pb-4 border-b border-gray-200">
-                      <h3 className="font-semibold text-gray-900 mb-2">Paris Saint-Germain</h3>
-                      <p className="text-gray-600 text-sm mb-1">
+                    <div className="pb-4 border-b border-[#e5e4dc]">
+                      <h3 className="font-semibold text-[#5a5a4e] mb-2">Paris Saint-Germain</h3>
+                      <p className="text-[#8a8a7a] text-sm mb-1">
                         45 Boulevard Saint-Germain, 75006 Paris
                       </p>
-                      <p className="text-sm text-gray-500">01 23 45 67 90</p>
+                      <p className="text-sm text-[#8a8a7a]">01 23 45 67 90</p>
                     </div>
 
                     {/* Boutique 3 */}
-                    <div className="pb-4 border-b border-gray-200">
-                      <h3 className="font-semibold text-gray-900 mb-2">Lyon République</h3>
-                      <p className="text-gray-600 text-sm mb-1">
+                    <div className="pb-4 border-b border-[#e5e4dc]">
+                      <h3 className="font-semibold text-[#5a5a4e] mb-2">Lyon République</h3>
+                      <p className="text-[#8a8a7a] text-sm mb-1">
                         78 Rue de la République, 69002 Lyon
                       </p>
-                      <p className="text-sm text-gray-500">04 12 34 56 78</p>
+                      <p className="text-sm text-[#8a8a7a]">04 12 34 56 78</p>
                     </div>
 
                     {/* Boutique 4 */}
                     <div>
-                      <h3 className="font-semibold text-gray-900 mb-2">Marseille Canebière</h3>
-                      <p className="text-gray-600 text-sm mb-1">
+                      <h3 className="font-semibold text-[#5a5a4e] mb-2">Marseille Canebière</h3>
+                      <p className="text-[#8a8a7a] text-sm mb-1">
                         32 La Canebière, 13001 Marseille
                       </p>
-                      <p className="text-sm text-gray-500">04 91 23 45 67</p>
+                      <p className="text-sm text-[#8a8a7a]">04 91 23 45 67</p>
                     </div>
                   </div>
 
-                  <div className="mt-6 pt-6 border-t border-gray-200">
-                    <p className="text-xs text-gray-500 flex items-start gap-2">
+                  <div className="mt-6 pt-6 border-t border-[#e5e4dc]">
+                    <p className="text-xs text-[#8a8a7a] flex items-start gap-2">
                       <span>💡</span>
                       <span>Retrouvez toutes nos boutiques et leurs horaires sur notre site principal</span>
                     </p>
@@ -314,17 +314,17 @@ export default function ContactPage() {
       <section className="py-12">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <div className="bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-xl p-8 border-l-4 border-yellow-500">
+            <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 rounded-xl p-8 border-l-4 border-[#d4a574] shadow-lg">
               <div className="flex items-start gap-4">
-                <div className="text-3xl">💡</div>
+                <div className="w-16 h-16 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-md flex-shrink-0">💡</div>
                 <div className="flex-1">
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Avant de nous contacter</h3>
-                  <p className="text-gray-700 mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Avant de nous contacter</h3>
+                  <p className="text-[#5a5a4e] mb-4">
                     Consultez notre FAQ, vous y trouverez peut-être la réponse à votre question !
                   </p>
                   <Link
                     href="/faq"
-                    className="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
+                    className="inline-flex items-center justify-center bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:scale-105"
                   >
                     Voir la FAQ
                   </Link>
diff --git a/app/faq/FAQContent.tsx b/app/faq/FAQContent.tsx
index a1d95de..7bb2844 100644
--- a/app/faq/FAQContent.tsx
+++ b/app/faq/FAQContent.tsx
@@ -63,14 +63,14 @@ const faqData: FAQ[] = [
 ];
 
 const categories = [
-  { name: "Participation", color: "bg-green-100 text-green-700" },
-  { name: "Codes", color: "bg-blue-100 text-blue-700" },
-  { name: "Compte", color: "bg-purple-100 text-purple-700" },
-  { name: "Délais", color: "bg-orange-100 text-orange-700" },
-  { name: "Retrait", color: "bg-teal-100 text-teal-700" },
-  { name: "Tirage final", color: "bg-yellow-100 text-yellow-700" },
-  { name: "Données", color: "bg-pink-100 text-pink-700" },
-  { name: "Technique", color: "bg-gray-100 text-gray-700" },
+  { name: "Participation", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Codes", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Compte", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Délais", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Retrait", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Tirage final", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Données", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
+  { name: "Technique", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
 ];
 
 export default function FAQContent() {
@@ -96,15 +96,15 @@ export default function FAQContent() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
       {/* Hero Section */}
-      <section className="bg-white py-12">
+      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
               Questions fréquentes
             </h1>
-            <p className="text-lg text-gray-600">
+            <p className="text-lg text-[#8a8a7a]">
               Trouvez rapidement les réponses à vos questions sur notre jeu-concours Thé Tip Top.
             </p>
           </div>
@@ -121,10 +121,10 @@ export default function FAQContent() {
                 placeholder="Rechercher une question..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
+                className="w-full px-4 py-3 pl-12 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white shadow-sm"
               />
               <svg
-                className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
+                className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#8a8a7a]"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -152,10 +152,10 @@ export default function FAQContent() {
                   onClick={() => setSelectedCategory(
                     selectedCategory === category.name ? null : category.name
                   )}
-                  className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                  className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                     selectedCategory === category.name
-                      ? category.color + ' ring-2 ring-offset-2 ring-green-500'
-                      : category.color + ' hover:opacity-80'
+                      ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg ring-2 ring-offset-2 ring-[#d4a574]'
+                      : category.color + ' hover:shadow-md border border-[#d4a574]/30'
                   }`}
                 >
                   {category.name}
@@ -171,15 +171,15 @@ export default function FAQContent() {
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto space-y-3">
             {filteredFAQs.length === 0 ? (
-              <div className="bg-white rounded-xl shadow-md p-8 text-center text-gray-500">
+              <div className="bg-white rounded-xl shadow-md p-8 text-center text-[#8a8a7a] border border-[#e5e4dc]">
                 Aucune question ne correspond à votre recherche.
               </div>
             ) : (
               filteredFAQs.map((faq, index) => (
-                <div key={index} className="bg-white rounded-xl shadow-md overflow-hidden">
+                <div key={index} className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
                   <button
                     onClick={() => toggleQuestion(index)}
-                    className="w-full flex items-start justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                    className="w-full flex items-start justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
                   >
                     <div className="flex-1 pr-4">
                       <div className="flex items-center gap-2 mb-2">
@@ -187,10 +187,10 @@ export default function FAQContent() {
                           {faq.category}
                         </span>
                       </div>
-                      <h3 className="text-lg font-semibold text-gray-900">{faq.question}</h3>
+                      <h3 className="text-lg font-semibold text-[#5a5a4e]">{faq.question}</h3>
                     </div>
                     <svg
-                      className={`w-6 h-6 text-gray-500 flex-shrink-0 transition-transform ${
+                      className={`w-6 h-6 text-[#8a8a7a] flex-shrink-0 transition-transform ${
                         openQuestion === index ? 'rotate-180' : ''
                       }`}
                       fill="none"
@@ -201,7 +201,7 @@ export default function FAQContent() {
                     </svg>
                   </button>
                   {openQuestion === index && (
-                    <div className="px-6 pb-6 text-gray-700 leading-relaxed">
+                    <div className="px-6 pb-6 text-[#5a5a4e] leading-relaxed">
                       {faq.answer}
                     </div>
                   )}
@@ -216,7 +216,7 @@ export default function FAQContent() {
       <section className="pb-16">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <div className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-8 text-center text-white">
+            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
               <h2 className="text-2xl md:text-3xl font-bold mb-4">
                 Vous ne trouvez pas votre réponse ?
               </h2>
@@ -226,13 +226,13 @@ export default function FAQContent() {
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <a
                   href="mailto:support@thetiptop.com"
-                  className="inline-flex items-center justify-center gap-2 bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-3 rounded-lg transition-all"
+                  className="inline-flex items-center justify-center gap-2 bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                 >
                   ✉️ support@thetiptop.com
                 </a>
                 <Link
                   href="/contact"
-                  className="inline-flex items-center justify-center bg-white hover:bg-gray-100 text-[#1a4d2e] font-bold px-8 py-3 rounded-lg transition-all"
+                  className="inline-flex items-center justify-center bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white font-bold px-8 py-3 rounded-lg transition-all border-2 border-white/30 hover:border-white/50"
                 >
                   Formulaire de contact
                 </Link>
diff --git a/app/historique/page.tsx b/app/historique/page.tsx
index b1c7312..a46e6e0 100644
--- a/app/historique/page.tsx
+++ b/app/historique/page.tsx
@@ -103,37 +103,37 @@ export default function HistoriquePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
       <div className="container mx-auto px-4">
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center gap-3">
-            <Calendar className="w-10 h-10 text-[#1a4d2e]" />
+          <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2 flex items-center gap-3">
+            <Calendar className="w-10 h-10 text-[#d4a574]" />
             Historique de mes participations
           </h1>
-          <p className="text-gray-600">
+          <p className="text-[#8a8a7a]">
             Consultez l'historique complet de vos participations et gains
           </p>
         </div>
 
         <div className="grid md:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">Total</p>
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">Total</p>
                 <p className="text-4xl font-bold text-blue-600">{stats.total}</p>
               </div>
               <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                 <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                 </svg>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">Réclamés</p>
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">Réclamés</p>
                 <p className="text-4xl font-bold text-green-600">{stats.claimed}</p>
               </div>
               <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
@@ -144,10 +144,10 @@ export default function HistoriquePage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">En attente</p>
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">En attente</p>
                 <p className="text-4xl font-bold text-yellow-600">{stats.pending}</p>
               </div>
               <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
@@ -158,10 +158,10 @@ export default function HistoriquePage() {
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-gray-600 mb-2">Rejetés</p>
+                <p className="text-sm font-medium text-[#8a8a7a] mb-2">Rejetés</p>
                 <p className="text-4xl font-bold text-red-600">{stats.rejected}</p>
               </div>
               <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
@@ -173,17 +173,17 @@ export default function HistoriquePage() {
           </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+        <div className="bg-white rounded-xl shadow-md p-6 mb-6 border border-[#e5e4dc]">
           <div className="flex flex-col md:flex-row gap-4">
             <div className="flex-1">
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#8a8a7a] w-5 h-5" />
                 <input
                   type="text"
                   placeholder="Rechercher par code ticket..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
+                  className="w-full pl-10 pr-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] focus:outline-none"
                 />
               </div>
             </div>
@@ -193,8 +193,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('ALL')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'ALL'
-                    ? 'bg-[#1a4d2e] text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg'
+                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
                 }`}
               >
                 Tous ({tickets.length})
@@ -203,8 +203,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('CLAIMED')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'CLAIMED'
-                    ? 'bg-green-600 text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    ? 'bg-green-600 text-white shadow-lg'
+                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
                 }`}
               >
                 Réclamés ({stats.claimed})
@@ -213,8 +213,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('PENDING')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'PENDING'
-                    ? 'bg-yellow-600 text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    ? 'bg-yellow-600 text-white shadow-lg'
+                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
                 }`}
               >
                 En attente ({stats.pending})
@@ -223,8 +223,8 @@ export default function HistoriquePage() {
                 onClick={() => setFilter('REJECTED')}
                 className={`px-4 py-2 rounded-lg font-semibold transition-all ${
                   filter === 'REJECTED'
-                    ? 'bg-red-600 text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    ? 'bg-red-600 text-white shadow-lg'
+                    : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
                 }`}
               >
                 Rejetés ({stats.rejected})
@@ -233,15 +233,15 @@ export default function HistoriquePage() {
           </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-md overflow-hidden">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h2 className="text-xl font-bold text-gray-900">Tous mes tickets ({filteredTickets.length})</h2>
+        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+          <div className="px-6 py-4 border-b border-[#e5e4dc]">
+            <h2 className="text-xl font-bold text-[#5a5a4e]">Tous mes tickets ({filteredTickets.length})</h2>
           </div>
           <div className="p-6">
             {filteredTickets.length === 0 ? (
               <div className="text-center py-12">
                 <div className="text-6xl mb-4">🎲</div>
-                <p className="text-gray-600 mb-4">
+                <p className="text-[#8a8a7a] mb-4">
                   {searchQuery || filter !== 'ALL'
                     ? 'Aucun ticket trouvé avec ces filtres'
                     : 'Vous n\'avez pas encore participé au jeu'}
@@ -249,7 +249,7 @@ export default function HistoriquePage() {
                 {!searchQuery && filter === 'ALL' && (
                   <button
                     onClick={() => router.push(ROUTES.GAME)}
-                    className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
+                    className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                   >
                     Jouer maintenant
                   </button>
@@ -259,34 +259,34 @@ export default function HistoriquePage() {
               <div className="overflow-x-auto">
                 <table className="min-w-full">
                   <thead>
-                    <tr className="border-b border-gray-200">
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    <tr className="border-b border-[#e5e4dc]">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Code Ticket
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Gain
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Statut
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Date de participation
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
                         Date de réclamation
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200">
+                  <tbody className="divide-y divide-[#e5e4dc]">
                     {filteredTickets.map((ticket) => {
                       const prizeConfig = ticket.prize
                         ? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
                         : null;
 
                       return (
-                        <tr key={ticket.id} className="hover:bg-gray-50 transition-colors">
+                        <tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors">
                           <td className="px-6 py-4 whitespace-nowrap">
-                            <span className="font-mono text-sm font-semibold text-gray-900">
+                            <span className="font-mono text-sm font-semibold text-[#5a5a4e]">
                               {ticket.code}
                             </span>
                           </td>
@@ -322,7 +322,7 @@ export default function HistoriquePage() {
                                     )}
                                   </div>
                                   <div>
-                                    <p className="text-sm font-medium text-gray-900">
+                                    <p className="text-sm font-medium text-[#5a5a4e]">
                                       {prizeConfig.name}
                                     </p>
                                   </div>
@@ -333,7 +333,7 @@ export default function HistoriquePage() {
                           <td className="px-6 py-4 whitespace-nowrap">
                             {getStatusBadge(ticket.status)}
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
                             {ticket.playedAt
                               ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", {
                                   day: 'numeric',
@@ -344,7 +344,7 @@ export default function HistoriquePage() {
                                 })
                               : "-"}
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
                             {ticket.claimedAt
                               ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
                                   day: 'numeric',
diff --git a/app/jeux/page.tsx b/app/jeux/page.tsx
index aca3fc7..47bdc92 100644
--- a/app/jeux/page.tsx
+++ b/app/jeux/page.tsx
@@ -110,28 +110,28 @@ export default function JeuxPage() {
     : null;
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
       <div className="container mx-auto px-4">
         {/* Formulaire Section */}
         <section className="mb-16">
           <div className="max-w-2xl mx-auto">
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
-              <div className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] px-6 py-6">
+            <div className="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-[#e5e4dc]">
+              <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] px-6 py-6 shadow-lg">
                 <h1 className="text-center text-3xl md:text-4xl font-bold text-white">
                   🎁 Jouez maintenant !
                 </h1>
               </div>
               <div className="p-8">
                 <div className="mb-6 text-center">
-                  <p className="text-gray-700 text-lg">
-                    Bonjour <span className="font-bold text-[#1a4d2e]">{user?.firstName}</span>,
+                  <p className="text-[#5a5a4e] text-lg">
+                    Bonjour <span className="font-bold text-[#d4a574]">{user?.firstName}</span>,
                     entrez le code de 10 caractères présent sur votre ticket de caisse
                   </p>
                 </div>
 
                 <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
                   <div>
-                    <label htmlFor="ticketCode" className="block text-sm font-semibold text-gray-700 mb-2">
+                    <label htmlFor="ticketCode" className="block text-sm font-semibold text-[#5a5a4e] mb-2">
                       Code du ticket
                     </label>
                     <input
@@ -139,14 +139,14 @@ export default function JeuxPage() {
                       type="text"
                       placeholder="TTP2025ABC"
                       {...register("ticketCode")}
-                      className="w-full px-6 py-4 text-center text-2xl font-mono font-bold uppercase border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent tracking-widest"
+                      className="w-full px-6 py-4 text-center text-2xl font-mono font-bold uppercase border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] tracking-widest bg-white shadow-inner"
                       maxLength={10}
                     />
                     {errors.ticketCode && (
                       <p className="mt-2 text-sm text-red-600">{errors.ticketCode.message}</p>
                     )}
                     {errorMessage && (
-                      <div className="mt-3 p-4 bg-red-50 border border-red-200 rounded-lg">
+                      <div className="mt-3 p-4 bg-red-50 border-l-4 border-red-500 rounded-lg shadow-md">
                         <p className="text-sm text-red-800 font-medium mb-2">
                           ❌ {errorMessage}
                         </p>
@@ -158,7 +158,7 @@ export default function JeuxPage() {
                         </Link>
                       </div>
                     )}
-                    <p className="mt-2 text-sm text-gray-500 text-center">
+                    <p className="mt-2 text-sm text-[#8a8a7a] text-center">
                       Format: TTP2025ABC (10 caractères)
                     </p>
                   </div>
@@ -167,20 +167,20 @@ export default function JeuxPage() {
                     <button
                       type="submit"
                       disabled={isPlaying}
-                      className="bg-[#f59e0b] hover:bg-[#d97706] disabled:bg-gray-400 text-white font-bold px-12 py-4 text-lg rounded-lg transition-all shadow-lg hover:shadow-xl"
+                      className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-12 py-4 text-lg rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105"
                     >
                       {isPlaying ? "Vérification en cours..." : "🎲 Tenter ma chance !"}
                     </button>
                   </div>
                 </form>
 
-                <div className="mt-6 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-lg">
-                  <p className="text-sm text-blue-800 font-semibold mb-2">
+                <div className="mt-6 p-4 bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] rounded-lg shadow-md">
+                  <p className="text-sm text-[#5a5a4e] font-semibold mb-2">
                     💡 Bon à savoir :
                   </p>
-                  <ul className="text-sm text-blue-700 space-y-1 list-disc list-inside">
+                  <ul className="text-sm text-[#5a5a4e] space-y-1 list-disc list-inside">
                     <li>Chaque code ne peut être utilisé qu'une seule fois</li>
-                    <li>Consultez vos tickets sur la page <Link href={ROUTES.HISTORY} className="underline font-medium hover:text-blue-900">Mes gains</Link></li>
+                    <li>Consultez vos tickets sur la page <Link href={ROUTES.HISTORY} className="underline font-medium hover:text-[#d4a574] transition-colors">Mes gains</Link></li>
                   </ul>
                 </div>
               </div>
@@ -260,8 +260,8 @@ export default function JeuxPage() {
               </div>
 
               {/* Loading Animation */}
-              <div className="flex items-center gap-2 text-gray-600">
-                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#1a4d2e]"></div>
+              <div className="flex items-center gap-2 text-[#5a5a4e]">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#d4a574]"></div>
                 <span className="font-medium">Tirage en cours...</span>
               </div>
             </div>
@@ -323,13 +323,13 @@ export default function JeuxPage() {
               <div className="flex gap-3 justify-center">
                 <button
                   onClick={closeModal}
-                  className="border-2 border-gray-300 hover:bg-gray-50 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
+                  className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all"
                 >
                   Fermer
                 </button>
                 <button
                   onClick={() => router.push(ROUTES.HISTORY)}
-                  className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-6 py-3 rounded-lg transition-all"
+                  className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)]"
                 >
                   Voir mes gains
                 </button>
diff --git a/app/lots/page.tsx b/app/lots/page.tsx
index 8a4821d..0c35914 100644
--- a/app/lots/page.tsx
+++ b/app/lots/page.tsx
@@ -8,15 +8,15 @@ export const metadata: Metadata = {
 
 export default function LotsPage() {
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
       {/* Hero Section */}
-      <section className="bg-white py-12">
+      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
               Lots à gagner
             </h1>
-            <p className="text-lg text-gray-600">
+            <p className="text-lg text-[#8a8a7a]">
               Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis,
               chaque participant repart avec un lot !
             </p>
@@ -28,7 +28,7 @@ export default function LotsPage() {
       <section className="py-8">
         <div className="container mx-auto px-4">
           <div className="max-w-5xl mx-auto">
-            <div className="bg-gradient-to-r from-yellow-100 to-yellow-200 rounded-2xl p-8 shadow-lg border-2 border-yellow-300">
+            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]">
               <div className="flex flex-col md:flex-row items-center gap-6">
                 <div className="flex-shrink-0">
                   <div className="w-32 h-32 bg-white rounded-lg flex items-center justify-center text-6xl shadow-md">
@@ -36,17 +36,17 @@ export default function LotsPage() {
                   </div>
                 </div>
                 <div className="flex-1 text-center md:text-left">
-                  <div className="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">
+                  <div className="inline-block bg-white text-[#d4a574] text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md">
                     GRAND PRIX FINAL
                   </div>
-                  <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
+                  <h2 className="text-3xl md:text-4xl font-bold text-white mb-2">
                     1 an de thé offert
                   </h2>
-                  <p className="text-gray-700 mb-3">
+                  <p className="text-white/90 mb-3">
                     Le grand prix du tirage final : une année complète de thé premium livré chez vous
                   </p>
-                  <div className="text-2xl font-bold text-orange-600">
-                    Valeur : 360€ <span className="text-sm text-gray-600 font-normal">Tirage sous contrôle d'huissier</span>
+                  <div className="text-2xl font-bold text-white">
+                    Valeur : 360€ <span className="text-sm text-white/80 font-normal">Tirage sous contrôle d'huissier</span>
                   </div>
                 </div>
               </div>
@@ -62,21 +62,21 @@ export default function LotsPage() {
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
 
               {/* Prize 1 - Infuseur */}
-              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
-                <div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center">
+              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
+                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
                   <div className="text-8xl">🍵</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">
+                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                     60% des lots
                   </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
-                  <p className="text-gray-600 text-sm mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Infuseur à thé premium</h3>
+                  <p className="text-[#8a8a7a] text-sm mb-4">
                     Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac
                   </p>
                   <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-[#1a4d2e]">15€</div>
-                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
+                    <div className="text-2xl font-bold text-[#d4a574]">15€</div>
+                    <button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
@@ -86,21 +86,21 @@ export default function LotsPage() {
               </div>
 
               {/* Prize 2 - Thé détox */}
-              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
-                <div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center">
+              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
+                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
                   <div className="text-8xl">📦</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">
+                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                     20% des lots
                   </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 mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé détox</h3>
+                  <p className="text-[#8a8a7a] text-sm mb-4">
                     Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre
                   </p>
                   <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-[#1a4d2e]">25€</div>
-                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
+                    <div className="text-2xl font-bold text-[#d4a574]">25€</div>
+                    <button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
@@ -110,21 +110,21 @@ export default function LotsPage() {
               </div>
 
               {/* Prize 3 - Thé signature */}
-              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
-                <div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center">
+              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
+                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
                   <div className="text-8xl">🌿</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">
+                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                     10% des lots
                   </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 mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé signature</h3>
+                  <p className="text-[#8a8a7a] text-sm mb-4">
                     Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs
                   </p>
                   <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-[#1a4d2e]">35€</div>
-                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
+                    <div className="text-2xl font-bold text-[#d4a574]">35€</div>
+                    <button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
@@ -134,21 +134,21 @@ export default function LotsPage() {
               </div>
 
               {/* Prize 4 - Coffret 39€ */}
-              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
-                <div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center">
+              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
+                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
                   <div className="text-8xl">🎁</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">
+                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                     6% des lots
                   </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3>
-                  <p className="text-gray-600 text-sm mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret découverte 39€</h3>
+                  <p className="text-[#8a8a7a] text-sm mb-4">
                     Sélection de nos 3 thés premium dans un élégant coffret cadeau
                   </p>
                   <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-[#1a4d2e]">39€</div>
-                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
+                    <div className="text-2xl font-bold text-[#d4a574]">39€</div>
+                    <button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
@@ -158,21 +158,21 @@ export default function LotsPage() {
               </div>
 
               {/* Prize 5 - Coffret 69€ */}
-              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
-                <div className="aspect-square bg-gradient-to-br from-amber-50 to-yellow-50 flex items-center justify-center">
+              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
+                <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
                   <div className="text-8xl">🎁</div>
                 </div>
                 <div className="p-6">
-                  <div className="inline-block bg-amber-100 text-amber-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
+                  <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
                     4% des lots
                   </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3>
-                  <p className="text-gray-600 text-sm mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret prestige 69€</h3>
+                  <p className="text-[#8a8a7a] text-sm mb-4">
                     Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe
                   </p>
                   <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-[#1a4d2e]">69€</div>
-                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
+                    <div className="text-2xl font-bold text-[#d4a574]">69€</div>
+                    <button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
@@ -182,21 +182,21 @@ export default function LotsPage() {
               </div>
 
               {/* Prize 6 - Tirage Final */}
-              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#f59e0b]">
-                <div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center">
+              <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574]">
+                <div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center">
                   <div className="text-8xl">🏆</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">
+                  <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 mb-4">
+                  <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3>
+                  <p className="text-[#8a8a7a] text-sm mb-4">
                     Valeur 360€ - Livraison mensuelle pendant 12 mois
                   </p>
                   <div className="flex items-center justify-between">
-                    <div className="text-2xl font-bold text-[#f59e0b]">360€</div>
-                    <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
+                    <div className="text-2xl font-bold text-[#d4a574]">360€</div>
+                    <button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
                       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
@@ -213,7 +213,7 @@ export default function LotsPage() {
       {/* CTA Section */}
       <section className="py-16">
         <div className="container mx-auto px-4">
-          <div className="max-w-4xl mx-auto bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] rounded-2xl shadow-2xl p-12 text-center text-white">
+          <div className="max-w-4xl mx-auto bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
             <h2 className="text-3xl md:text-4xl font-bold mb-4">
               Prêt à découvrir votre lot ?
             </h2>
@@ -222,7 +222,7 @@ export default function LotsPage() {
               tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner.
             </p>
             <Link href="/register">
-              <button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all">
+              <button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all duration-300 hover:scale-105">
                 Participer maintenant
               </button>
             </Link>
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 1265f82..1a2cb7a 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -7,19 +7,19 @@ export const metadata: Metadata = {
 
 export default function PrivacyPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-primary-50 to-white py-12 px-4">
-      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
-        <h1 className="text-3xl font-bold text-gray-900 mb-6">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
+      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
+        <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
           Politique de confidentialité
         </h1>
 
-        <p className="text-sm text-gray-600 mb-8">
+        <p className="text-sm text-[#8a8a7a] mb-8">
           Dernière mise à jour : 17 janvier 2025
         </p>
 
-        <div className="space-y-6 text-gray-700">
+        <div className="space-y-6 text-[#5a5a4e]">
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               1. Introduction
             </h2>
             <p>
@@ -30,12 +30,12 @@ export default function PrivacyPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               2. Données collectées
             </h2>
             <p className="mb-2">Nous collectons les informations suivantes :</p>
             <ul className="list-disc pl-6 space-y-2">
-              <li>Informations d identification : nom, prénom, adresse e-mail</li>
+              <li>Informations d'identification : nom, prénom, adresse e-mail</li>
               <li>Informations de profil : photo de profil (si fournie via OAuth)</li>
               <li>Informations de connexion : via Google ou Facebook OAuth</li>
               <li>Données de participation : codes de tickets, gains remportés</li>
@@ -44,7 +44,7 @@ export default function PrivacyPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               3. Utilisation des données
             </h2>
             <p className="mb-2">Vos données sont utilisées pour :</p>
@@ -58,23 +58,23 @@ export default function PrivacyPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               4. Vos droits (RGPD)
             </h2>
             <p className="mb-2">Conformément au RGPD, vous disposez des droits suivants :</p>
             <ul className="list-disc pl-6 space-y-2">
-              <li><strong>Droit d accès :</strong> obtenir une copie de vos données</li>
+              <li><strong>Droit d'accès :</strong> obtenir une copie de vos données</li>
               <li><strong>Droit de rectification :</strong> corriger vos données inexactes</li>
-              <li><strong>Droit à l effacement :</strong> demander la suppression de vos données</li>
-              <li><strong>Droit d opposition :</strong> vous opposer au traitement de vos données</li>
+              <li><strong>Droit à l'effacement :</strong> demander la suppression de vos données</li>
+              <li><strong>Droit d'opposition :</strong> vous opposer au traitement de vos données</li>
             </ul>
             <p className="mt-3">
-              Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-primary-600 hover:underline">privacy@thetiptop.fr</a>
+              Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a>
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               5. Contact
             </h2>
             <p>
@@ -82,18 +82,21 @@ export default function PrivacyPage() {
               vous pouvez nous contacter :
             </p>
             <ul className="list-none space-y-2 mt-3">
-              <li><strong>Email :</strong> <a href="mailto:privacy@thetiptop.fr" className="text-primary-600 hover:underline">privacy@thetiptop.fr</a></li>
+              <li><strong>Email :</strong> <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a></li>
               <li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li>
             </ul>
           </section>
         </div>
 
-        <div className="mt-8 pt-6 border-t border-gray-200">
+        <div className="mt-8 pt-6 border-t border-[#e5e4dc]">
           <a
             href="/"
-            className="text-primary-600 hover:text-primary-700 font-medium"
+            className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group"
           >
-            ← Retour à l accueil
+            <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Retour à l'accueil
           </a>
         </div>
       </div>
diff --git a/app/profil/page.tsx b/app/profil/page.tsx
index 36d15c4..89bf73d 100644
--- a/app/profil/page.tsx
+++ b/app/profil/page.tsx
@@ -95,48 +95,48 @@ export default function ProfilePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
       <div className="container mx-auto px-4 max-w-4xl">
-        <h1 className="text-4xl font-bold text-gray-900 mb-8">Mon profil</h1>
+        <h1 className="text-4xl font-bold text-[#5a5a4e] mb-8">Mon profil</h1>
 
         <div className="grid md:grid-cols-3 gap-6">
           {/* Profile Info Card */}
           <div className="md:col-span-2">
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
-              <div className="px-6 py-4 border-b border-gray-200">
-                <h2 className="text-xl font-bold text-gray-900">Informations personnelles</h2>
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+              <div className="px-6 py-4 border-b border-[#e5e4dc]">
+                <h2 className="text-xl font-bold text-[#5a5a4e]">Informations personnelles</h2>
               </div>
               <div className="p-6">
                 {!isEditing ? (
                   <div className="space-y-4">
                     <div>
-                      <label className="text-sm font-medium text-gray-500">
+                      <label className="text-sm font-medium text-[#8a8a7a]">
                         Prénom
                       </label>
-                      <p className="text-lg text-gray-900">{user.firstName}</p>
+                      <p className="text-lg text-[#5a5a4e]">{user.firstName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-500">
+                      <label className="text-sm font-medium text-[#8a8a7a]">
                         Nom
                       </label>
-                      <p className="text-lg text-gray-900">{user.lastName}</p>
+                      <p className="text-lg text-[#5a5a4e]">{user.lastName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-500">
+                      <label className="text-sm font-medium text-[#8a8a7a]">
                         Email
                       </label>
-                      <p className="text-lg text-gray-900">{user.email}</p>
+                      <p className="text-lg text-[#5a5a4e]">{user.email}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-500">
+                      <label className="text-sm font-medium text-[#8a8a7a]">
                         Téléphone
                       </label>
-                      <p className="text-lg text-gray-900">
+                      <p className="text-lg text-[#5a5a4e]">
                         {user.phone || "Non renseigné"}
                       </p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-500">
+                      <label className="text-sm font-medium text-[#8a8a7a]">
                         Rôle
                       </label>
                       <div className="mt-1">
@@ -148,7 +148,7 @@ export default function ProfilePage() {
                     <div className="pt-4">
                       <button
                         onClick={() => setIsEditing(true)}
-                        className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-6 py-3 rounded-lg transition-all"
+                        className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                       >
                         Modifier mes informations
                       </button>
@@ -191,7 +191,7 @@ export default function ProfilePage() {
                       <button
                         type="submit"
                         disabled={isSubmitting}
-                        className="bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all"
+                        className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                       >
                         {isSubmitting ? "Enregistrement..." : "Enregistrer"}
                       </button>
@@ -199,7 +199,7 @@ export default function ProfilePage() {
                         type="button"
                         onClick={handleCancel}
                         disabled={isSubmitting}
-                        className="border-2 border-gray-300 hover:bg-gray-50 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
+                        className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all"
                       >
                         Annuler
                       </button>
@@ -212,13 +212,13 @@ export default function ProfilePage() {
 
         {/* Account Status Card */}
         <div>
-          <div className="bg-white rounded-xl shadow-md overflow-hidden">
-            <div className="px-6 py-4 border-b border-gray-200">
-              <h2 className="text-xl font-bold text-gray-900">Statut du compte</h2>
+          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
+            <div className="px-6 py-4 border-b border-[#e5e4dc]">
+              <h2 className="text-xl font-bold text-[#5a5a4e]">Statut du compte</h2>
             </div>
             <div className="p-6 space-y-4">
               <div>
-                <label className="text-sm font-medium text-gray-500">
+                <label className="text-sm font-medium text-[#8a8a7a]">
                   Email vérifié
                 </label>
                 <div className="mt-1">
@@ -230,41 +230,33 @@ export default function ProfilePage() {
                 </div>
               </div>
               <div>
-                <label className="text-sm font-medium text-gray-500">
+                <label className="text-sm font-medium text-[#8a8a7a]">
                   Membre depuis
                 </label>
-                <p className="text-sm text-gray-900 mt-1">
+                <p className="text-sm text-[#5a5a4e] mt-1">
                   {formatDate(user.createdAt)}
                 </p>
               </div>
-              <div>
-                <label className="text-sm font-medium text-gray-500">
-                  Dernière modification
-                </label>
-                <p className="text-sm text-gray-900 mt-1">
-                  {user.updatedAt ? formatDate(user.updatedAt) : 'N/A'}
-                </p>
-              </div>
             </div>
           </div>
 
           {/* Quick Actions Card */}
-          <div className="bg-white rounded-xl shadow-md overflow-hidden mt-6">
-            <div className="px-6 py-4 border-b border-gray-200">
-              <h2 className="text-xl font-bold text-gray-900">Actions rapides</h2>
+          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc] mt-6">
+            <div className="px-6 py-4 border-b border-[#e5e4dc]">
+              <h2 className="text-xl font-bold text-[#5a5a4e]">Actions rapides</h2>
             </div>
             <div className="p-6 space-y-2">
               {user.role === "CLIENT" && (
                 <>
                   <button
                     onClick={() => router.push(ROUTES.GAME)}
-                    className="w-full bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
+                    className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                   >
                     Jouer
                   </button>
                   <button
                     onClick={() => router.push(ROUTES.HISTORY)}
-                    className="w-full border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                    className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
                   >
                     Historique
                   </button>
@@ -273,7 +265,7 @@ export default function ProfilePage() {
               {user.role === "EMPLOYEE" && (
                 <button
                   onClick={() => router.push(ROUTES.EMPLOYEE_DASHBOARD)}
-                  className="w-full border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                  className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
                 >
                   Tableau de bord
                 </button>
@@ -281,7 +273,7 @@ export default function ProfilePage() {
               {user.role === "ADMIN" && (
                 <button
                   onClick={() => router.push(ROUTES.ADMIN_DASHBOARD)}
-                  className="w-full border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                  className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
                 >
                   Administration
                 </button>
diff --git a/app/rules/page.tsx b/app/rules/page.tsx
index 403b179..164b485 100644
--- a/app/rules/page.tsx
+++ b/app/rules/page.tsx
@@ -11,15 +11,15 @@ export default function RulesPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
       {/* Hero Section */}
-      <section className="bg-white py-12">
+      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
               Règlement du jeu-concours
             </h1>
-            <p className="text-lg text-gray-600">
+            <p className="text-lg text-[#8a8a7a]">
               Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top"
               pour l'ouverture de notre 10e boutique.
             </p>
@@ -31,36 +31,36 @@ export default function RulesPage() {
       <section className="py-8">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto">
-            <div className="bg-white rounded-xl shadow-md p-6 mb-8">
+            <div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-[#e5e4dc]">
               <div className="flex items-center gap-2 mb-6">
                 <span className="text-2xl">📋</span>
-                <h2 className="text-2xl font-bold text-gray-900">Résumé du jeu-concours</h2>
+                <h2 className="text-2xl font-bold text-[#5a5a4e]">Résumé du jeu-concours</h2>
               </div>
 
               <div className="grid md:grid-cols-3 gap-4">
                 {/* 100% gagnants */}
-                <div className="bg-red-50 rounded-lg p-6 text-center">
-                  <div className="text-4xl mb-3">🎯</div>
-                  <div className="text-2xl font-bold text-gray-900 mb-2">100% gagnants</div>
-                  <p className="text-sm text-gray-600">
+                <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
+                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🎯</div>
+                  <div className="text-2xl font-bold text-[#5a5a4e] mb-2">100% gagnants</div>
+                  <p className="text-sm text-[#8a8a7a]">
                     Chaque participant repart avec un lot garanti
                   </p>
                 </div>
 
                 {/* 30 + 30 jours */}
-                <div className="bg-orange-50 rounded-lg p-6 text-center">
-                  <div className="text-4xl mb-3">🔄</div>
-                  <div className="text-2xl font-bold text-gray-900 mb-2">30 + 30 jours</div>
-                  <p className="text-sm text-gray-600">
+                <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
+                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🔄</div>
+                  <div className="text-2xl font-bold text-[#5a5a4e] mb-2">30 + 30 jours</div>
+                  <p className="text-sm text-[#8a8a7a]">
                     Période de jeu + délai de réclamation
                   </p>
                 </div>
 
                 {/* Grand prix 360€ */}
-                <div className="bg-yellow-50 rounded-lg p-6 text-center">
-                  <div className="text-4xl mb-3">🏆</div>
-                  <div className="text-2xl font-bold text-gray-900 mb-2">Grand prix 360€</div>
-                  <p className="text-sm text-gray-600">
+                <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
+                  <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🏆</div>
+                  <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Grand prix 360€</div>
+                  <p className="text-sm text-[#8a8a7a]">
                     Tirage final sous contrôle d'huissier
                   </p>
                 </div>
@@ -76,17 +76,17 @@ export default function RulesPage() {
           <div className="max-w-4xl mx-auto space-y-4">
 
             {/* Section 1 - Conditions de participation */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
               <button
                 onClick={() => toggleSection(1)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-2xl">📋</span>
-                  <h3 className="text-xl font-bold text-gray-900">1. Conditions de participation</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">📋</div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">1. Conditions de participation</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -95,7 +95,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 1 && (
-                <div className="px-6 pb-6 space-y-4 text-gray-700">
+                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
                   <p>Le jeu est ouvert à toute personne physique majeure résidant en France métropolitaine.</p>
                   <p className="font-semibold">Sont exclus de la participation :</p>
                   <ul className="list-disc list-inside space-y-2 ml-4">
@@ -109,17 +109,17 @@ export default function RulesPage() {
             </div>
 
             {/* Section 2 - Codes de participation */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
               <button
                 onClick={() => toggleSection(2)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-2xl">🎫</span>
-                  <h3 className="text-xl font-bold text-gray-900">2. Codes de participation</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎫</div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">2. Codes de participation</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -128,7 +128,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 2 && (
-                <div className="px-6 pb-6 space-y-4 text-gray-700">
+                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
                   <p>Pour participer au jeu, le participant doit :</p>
                   <ol className="list-decimal list-inside space-y-2 ml-4">
                     <li>Effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante</li>
@@ -138,26 +138,26 @@ export default function RulesPage() {
                     <li>Saisir le code figurant sur son ticket dans l'espace dédié</li>
                     <li>Découvrir instantanément son gain</li>
                   </ol>
-                  <div className="bg-amber-50 border-l-4 border-amber-500 p-4 mt-4">
-                    <p className="font-semibold text-amber-900">⚠️ Important</p>
-                    <p className="text-amber-800">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
+                  <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
+                    <p className="font-semibold text-[#5a5a4e]">⚠️ Important</p>
+                    <p className="text-[#5a5a4e]">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
                   </div>
                 </div>
               )}
             </div>
 
             {/* Section 3 - Calendrier et délais */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
               <button
                 onClick={() => toggleSection(3)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-2xl">📅</span>
-                  <h3 className="text-xl font-bold text-gray-900">3. Calendrier et délais</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">📅</div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">3. Calendrier et délais</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -166,7 +166,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 3 && (
-                <div className="px-6 pb-6 space-y-4 text-gray-700">
+                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
                   <div>
                     <p className="font-semibold mb-2">📍 Période de participation</p>
                     <p>Du 1er janvier 2025 à 00h00 au 31 janvier 2025 à 23h59 (heure de Paris)</p>
@@ -179,26 +179,26 @@ export default function RulesPage() {
                     <p className="font-semibold mb-2">📍 Tirage final</p>
                     <p>Le tirage au sort pour le grand prix (1 an de thé - 360€) aura lieu le 15 février 2025 sous contrôle d'huissier de justice</p>
                   </div>
-                  <div className="bg-green-50 border-l-4 border-green-500 p-4 mt-4">
-                    <p className="font-semibold text-green-900">✓ À retenir</p>
-                    <p className="text-green-800">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p>
+                  <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
+                    <p className="font-semibold text-[#5a5a4e]">✓ À retenir</p>
+                    <p className="text-[#5a5a4e]">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p>
                   </div>
                 </div>
               )}
             </div>
 
             {/* Section 4 - Tirage final Grand Prix */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
               <button
                 onClick={() => toggleSection(4)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-2xl">🏆</span>
-                  <h3 className="text-xl font-bold text-gray-900">4. Tirage final - Grand Prix</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🏆</div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">4. Tirage final - Grand Prix</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -207,7 +207,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 4 && (
-                <div className="px-6 pb-6 space-y-4 text-gray-700">
+                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
                   <p className="font-semibold text-xl">Grand Prix : 1 an de thé offert (valeur 360€)</p>
                   <p>À l'issue de la période de participation, un tirage au sort sera organisé pour désigner le grand gagnant du prix principal.</p>
                   <div>
@@ -223,26 +223,26 @@ export default function RulesPage() {
                     <p className="font-semibold mb-2">Le lot :</p>
                     <p>Le gagnant recevra pendant 12 mois consécutifs une livraison mensuelle de thé d'une valeur de 30€, soit un total de 360€.</p>
                   </div>
-                  <div className="bg-yellow-50 border-l-4 border-yellow-500 p-4 mt-4">
-                    <p className="font-semibold text-yellow-900">🎁 Information</p>
-                    <p className="text-yellow-800">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
+                  <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
+                    <p className="font-semibold text-[#5a5a4e]">🎁 Information</p>
+                    <p className="text-[#5a5a4e]">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
                   </div>
                 </div>
               )}
             </div>
 
             {/* Section 5 - Retrait des lots */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
               <button
                 onClick={() => toggleSection(5)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-2xl">🎁</span>
-                  <h3 className="text-xl font-bold text-gray-900">5. Retrait des lots</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎁</div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">5. Retrait des lots</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -251,7 +251,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 5 && (
-                <div className="px-6 pb-6 space-y-4 text-gray-700">
+                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
                   <p>Les lots doivent être réclamés dans un délai de <strong>30 jours</strong> à compter de la date de participation.</p>
                   <div>
                     <p className="font-semibold mb-2">Modalités de remise :</p>
@@ -261,7 +261,7 @@ export default function RulesPage() {
                       <li><strong>Grand prix (1 an de thé) :</strong> Livraison mensuelle à l'adresse de votre choix</li>
                     </ul>
                   </div>
-                  <div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4">
+                  <div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4 rounded">
                     <p className="font-semibold text-red-900">⚠️ Attention</p>
                     <p className="text-red-800">Les lots non réclamés dans le délai imparti seront considérés comme abandonnés. Aucun lot ne peut être échangé, remboursé ou converti en espèces.</p>
                   </div>
@@ -270,17 +270,17 @@ export default function RulesPage() {
             </div>
 
             {/* Section 6 - Protection des données */}
-            <div className="bg-white rounded-xl shadow-md overflow-hidden">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
               <button
                 onClick={() => toggleSection(6)}
-                className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+                className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-2xl">🔒</span>
-                  <h3 className="text-xl font-bold text-gray-900">6. Protection des données personnelles</h3>
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🔒</div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">6. Protection des données personnelles</h3>
                 </div>
                 <svg
-                  className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
+                  className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -289,7 +289,7 @@ export default function RulesPage() {
                 </svg>
               </button>
               {openSection === 6 && (
-                <div className="px-6 pb-6 space-y-4 text-gray-700">
+                <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
                   <p>Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement informatique destiné à gérer la participation au jeu et l'attribution des lots.</p>
                   <div>
                     <p className="font-semibold mb-2">Vos droits :</p>
@@ -301,8 +301,8 @@ export default function RulesPage() {
                       <li>Droit à la portabilité des données</li>
                     </ul>
                   </div>
-                  <p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">contact@thetiptop.fr</a></p>
-                  <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">Politique de confidentialité</a>.</p>
+                  <p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] underline hover:text-[#c4956a]">contact@thetiptop.fr</a></p>
+                  <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">Politique de confidentialité</a>.</p>
                 </div>
               )}
             </div>
@@ -312,36 +312,58 @@ export default function RulesPage() {
       </section>
 
       {/* Informations légales Section */}
-      <section className="py-12 bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e]">
+      <section className="py-16 bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
         <div className="container mx-auto px-4">
-          <div className="max-w-4xl mx-auto">
-            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-8 text-white">
-              <h2 className="text-2xl font-bold mb-6">Informations légales</h2>
+          <div className="max-w-5xl mx-auto">
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Informations légales</h2>
+              <p className="text-[#8a8a7a]">Détails officiels du jeu-concours</p>
+            </div>
 
-              <div className="grid md:grid-cols-2 gap-8">
-                <div>
-                  <h3 className="font-semibold mb-3 text-[#f59e0b]">Organisateur</h3>
-                  <p className="text-sm">Thé Tip Top</p>
+            <div className="grid md:grid-cols-2 gap-6 mb-6">
+              {/* Organisateur */}
+              <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
+                    <span className="text-xl">🏢</span>
+                  </div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">Organisateur</h3>
+                </div>
+                <div className="space-y-2 text-[#5a5a4e]">
+                  <p className="font-semibold">Thé Tip Top</p>
                   <p className="text-sm">18 Avenue des Thés</p>
                   <p className="text-sm">75001 Paris, France</p>
-                  <p className="text-sm">SIRET: 12345678901234</p>
+                  <p className="text-sm text-[#8a8a7a]">SIRET: 12345678901234</p>
                 </div>
+              </div>
 
-                <div>
-                  <h3 className="font-semibold mb-3 text-[#f59e0b]">Huissier</h3>
-                  <p className="text-sm">Maître Dupont</p>
+              {/* Huissier */}
+              <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
+                    <span className="text-xl">⚖️</span>
+                  </div>
+                  <h3 className="text-xl font-bold text-[#5a5a4e]">Huissier</h3>
+                </div>
+                <div className="space-y-2 text-[#5a5a4e]">
+                  <p className="font-semibold">Maître Dupont</p>
                   <p className="text-sm">Office Notarial de Paris</p>
                   <p className="text-sm">456 Rue de la Justice</p>
                   <p className="text-sm">75002 Paris, France</p>
                 </div>
               </div>
+            </div>
 
-              <div className="mt-6 pt-6 border-t border-white/20">
-                <p className="text-sm text-white/80">
-                  Jeu-concours gratuit sans obligation d'achat, sauf pour l'acquisition du ticket donnant droit à participation.
-                  Règlement déposé chez Maître Dupont, huissier de justice à Paris.
-                </p>
+            {/* Note légale */}
+            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-xl shadow-lg p-6 text-white text-center">
+              <div className="flex items-center justify-center gap-2 mb-3">
+                <span className="text-2xl">📜</span>
+                <h3 className="text-lg font-semibold">Note légale</h3>
               </div>
+              <p className="text-sm text-white/90 leading-relaxed">
+                Jeu-concours gratuit sans obligation d'achat, sauf pour l'acquisition du ticket donnant droit à participation.
+                Règlement déposé chez Maître Dupont, huissier de justice à Paris.
+              </p>
             </div>
           </div>
         </div>
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index 8822931..80a8c57 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -7,67 +7,67 @@ export const metadata: Metadata = {
 
 export default function TermsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-primary-50 to-white py-12 px-4">
-      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
-        <h1 className="text-3xl font-bold text-gray-900 mb-6">
-          Conditions d utilisation
+    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
+      <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
+        <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
+          Conditions d'utilisation
         </h1>
 
-        <p className="text-sm text-gray-600 mb-8">
+        <p className="text-sm text-[#8a8a7a] mb-8">
           Dernière mise à jour : 17 janvier 2025
         </p>
 
-        <div className="space-y-6 text-gray-700">
+        <div className="space-y-6 text-[#5a5a4e]">
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               1. Présentation
             </h2>
             <p>
               Bienvenue sur le site du jeu-concours Thé Tip Top. En accédant à ce site
-              et en participant au jeu, vous acceptez d être lié par les présentes
-              conditions d utilisation.
+              et en participant au jeu, vous acceptez d'être lié par les présentes
+              conditions d'utilisation.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               2. Objet du jeu-concours
             </h2>
             <p>
-              Thé Tip Top organise un jeu-concours gratuit et sans obligation d achat
+              Thé Tip Top organise un jeu-concours gratuit et sans obligation d'achat
               permettant aux participants de gagner des lots en entrant des codes de
-              participation fournis lors d achats en magasin.
+              participation fournis lors d'achats en magasin.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               3. Conditions de participation
             </h2>
             <ul className="list-disc pl-6 space-y-2">
               <li>Être âgé de 18 ans ou plus</li>
               <li>Résider en France métropolitaine</li>
               <li>Créer un compte avec une adresse e-mail valide</li>
-              <li>Accepter les présentes conditions d utilisation</li>
+              <li>Accepter les présentes conditions d'utilisation</li>
               <li>Accepter la politique de confidentialité</li>
             </ul>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               4. Modalités de participation
             </h2>
             <p className="mb-2">Pour participer :</p>
             <ol className="list-decimal pl-6 space-y-2">
               <li>Créez un compte sur le site</li>
-              <li>Entrez le code unique figurant sur votre ticket d achat</li>
+              <li>Entrez le code unique figurant sur votre ticket d'achat</li>
               <li>Découvrez instantanément votre gain</li>
               <li>Suivez les instructions pour récupérer votre lot</li>
             </ol>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               5. Lots à gagner
             </h2>
             <p className="mb-2">Les lots suivants sont disponibles :</p>
@@ -82,7 +82,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               6. Récupération des lots
             </h2>
             <p>
@@ -93,7 +93,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               7. Limitation de responsabilité
             </h2>
             <p>
@@ -104,7 +104,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               8. Propriété intellectuelle
             </h2>
             <p>
@@ -116,7 +116,7 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               9. Modification des conditions
             </h2>
             <p>
@@ -127,38 +127,41 @@ export default function TermsPage() {
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               10. Droit applicable et juridiction
             </h2>
             <p>
               Les présentes conditions sont régies par le droit français. En cas de
-              litige, et à défaut d accord amiable, les tribunaux français seront
+              litige, et à défaut d'accord amiable, les tribunaux français seront
               seuls compétents.
             </p>
           </section>
 
           <section>
-            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+            <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
               11. Contact
             </h2>
             <p>
-              Pour toute question concernant ces conditions d utilisation, vous pouvez
+              Pour toute question concernant ces conditions d'utilisation, vous pouvez
               nous contacter :
             </p>
             <ul className="list-none space-y-2 mt-3">
-              <li><strong>Email :</strong> <a href="mailto:contact@thetiptop.fr" className="text-primary-600 hover:underline">contact@thetiptop.fr</a></li>
+              <li><strong>Email :</strong> <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">contact@thetiptop.fr</a></li>
               <li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li>
               <li><strong>Téléphone :</strong> +33 4 93 00 00 00</li>
             </ul>
           </section>
         </div>
 
-        <div className="mt-8 pt-6 border-t border-gray-200">
+        <div className="mt-8 pt-6 border-t border-[#e5e4dc]">
           <a
             href="/"
-            className="text-primary-600 hover:text-primary-700 font-medium"
+            className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group"
           >
-            ← Retour à l accueil
+            <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Retour à l'accueil
           </a>
         </div>
       </div>
diff --git a/components/Header.tsx b/components/Header.tsx
index 6e532e2..557d521 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -47,14 +47,14 @@ export default function Header() {
     <header className="bg-gradient-to-r from-[#f5f5f0] to-[#faf9f5] sticky top-0 z-50 shadow-lg border-b-2 border-[#e5e4dc]">
       {/* Main Header */}
       <div className="container mx-auto px-4">
-        <div className="flex items-center justify-between h-18">
+        <div className="flex items-center justify-between h-18 gap-4">
           {/* Logo */}
-          <Link href={ROUTES.HOME} className="group flex items-center gap-3">
+          <Link href={ROUTES.HOME} className="group flex items-center gap-3 flex-shrink-0">
             <Logo size="md" showText={false} className="group-hover:scale-105 transition-transform" />
           </Link>
 
           {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center gap-6">
+          <nav className="hidden md:flex items-center gap-6 flex-shrink-0">
             <Link
               href={ROUTES.HOME}
               className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
@@ -90,7 +90,7 @@ export default function Header() {
             {isAuthenticated ? (
               <Link
                 href={ROUTES.GAME}
-                className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105 shadow-lg"
+                className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] shadow-lg whitespace-nowrap"
               >
                 Participer
               </Link>
@@ -98,11 +98,11 @@ export default function Header() {
               <div className="relative" ref={dropdownRef}>
                 <button
                   onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
-                  className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105 shadow-lg flex items-center gap-2"
+                  className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] shadow-lg flex items-center justify-center gap-2 whitespace-nowrap"
                 >
                   Participer
                   <svg
-                    className={`w-4 h-4 transition-transform duration-300 ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
+                    className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -137,31 +137,40 @@ export default function Header() {
           </nav>
 
           {/* Desktop Auth Buttons */}
-          <div className="hidden md:flex items-center gap-3">
+          <div className="hidden md:flex items-center gap-3 flex-shrink-0">
             {isAuthenticated && (
               <>
                 <Link href={getDashboardRoute()}>
-                  <button className="flex flex-col items-center bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
-                    <span className="text-sm">{user?.firstName} {user?.lastName}</span>
-                    <span className="text-xs font-normal opacity-80">{user?.email}</span>
-                  </button>
+                  <div className="flex flex-col items-start bg-gradient-to-br from-white to-[#faf9f5] text-[#5a5a4e] hover:shadow-lg px-4 py-2.5 rounded-xl transition-all border-2 border-[#e5e4dc] hover:border-[#d4a574] group min-w-0 flex-shrink-0">
+                    <span className="text-sm font-bold group-hover:text-[#d4a574] transition-colors whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.firstName} {user?.lastName}</span>
+                    <span className="text-xs text-[#8a8a7a] whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.email}</span>
+                  </div>
                 </Link>
                 <Link href={ROUTES.PROFILE}>
-                  <button className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
+                  <button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-[#d4a574] hover:to-[#c4956a] text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-[#d4a574] hover:shadow-lg whitespace-nowrap">
+                    <svg className="w-5 h-5 flex-shrink-0" 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>
                     Profil
                   </button>
                 </Link>
                 {user?.role === 'CLIENT' && (
                   <Link href={ROUTES.HISTORY}>
-                    <button className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
+                    <button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-[#d4a574] hover:to-[#c4956a] text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-[#d4a574] hover:shadow-lg whitespace-nowrap">
+                      <svg className="w-5 h-5 flex-shrink-0" 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>
                       Mes gains
                     </button>
                   </Link>
                 )}
                 <button
                   onClick={logout}
-                  className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-red-600 hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]"
+                  className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-red-500 hover:to-red-600 text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-red-500 hover:shadow-lg whitespace-nowrap"
                 >
+                  <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                  </svg>
                   Déconnexion
                 </button>
               </>
@@ -250,7 +259,7 @@ export default function Header() {
               {isAuthenticated ? (
                 <Link
                   href={ROUTES.GAME}
-                  className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg text-center block"
+                  className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg text-center block whitespace-nowrap"
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
                   🎯 Participer
@@ -259,11 +268,11 @@ export default function Header() {
                 <div>
                   <button
                     onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
-                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg flex items-center justify-center gap-2 w-full"
+                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg flex items-center justify-center gap-2 w-full whitespace-nowrap"
                   >
                     🎯 Participer
                     <svg
-                      className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
+                      className={`w-4 h-4 flex-shrink-0 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -305,7 +314,7 @@ export default function Header() {
                     href={getDashboardRoute()}
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
-                    <button className="w-full flex flex-col items-center bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all">
+                    <button className="w-full flex flex-col items-center bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
                       <span className="text-sm">{user?.firstName} {user?.lastName}</span>
                       <span className="text-xs font-normal opacity-80">{user?.email}</span>
                     </button>
@@ -314,7 +323,7 @@ export default function Header() {
                     href={ROUTES.PROFILE}
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
-                    <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all">
+                    <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
                       Profil
                     </button>
                   </Link>
@@ -323,7 +332,7 @@ export default function Header() {
                       href={ROUTES.HISTORY}
                       onClick={() => setIsMobileMenuOpen(false)}
                     >
-                      <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all">
+                      <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap">
                         Mes gains
                       </button>
                     </Link>
@@ -333,7 +342,7 @@ export default function Header() {
                       logout();
                       setIsMobileMenuOpen(false);
                     }}
-                    className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-red-600 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all"
+                    className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-red-600 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap"
                   >
                     Déconnexion
                   </button>
diff --git a/utils/constants.ts b/utils/constants.ts
index 3fb6b86..5a4e9cb 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -33,9 +33,9 @@ export const API_ENDPOINTS = {
     DELETE_PRIZE: (id: string) => `/admin/prizes/${id}`,
   },
   USER: {
-    PROFILE: '/user/profile',
-    UPDATE_PROFILE: '/user/profile',
-    CHANGE_PASSWORD: '/user/change-password',
+    PROFILE: '/users/profile',
+    UPDATE_PROFILE: '/users/profile',
+    CHANGE_PASSWORD: '/users/change-password',
   },
 } as const;