diff --git a/app/client/page.tsx b/app/client/page.tsx
index b045fd8..4a003c2 100644
--- a/app/client/page.tsx
+++ b/app/client/page.tsx
@@ -64,21 +64,21 @@ export default function ClientPage() {
 
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
+    <div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-8">
       <div className="container mx-auto px-4">
         {/* Welcome Section */}
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2">
-            Bonjour {user?.firstName} ! 👋
+          <h1 className="text-4xl font-bold text-primary-500 mb-2">
+            Bonjour {user?.firstName} !
           </h1>
-          <p className="text-[#8a8a7a]">
+          <p className="text-gray-600">
             Bienvenue dans votre espace client
           </p>
         </div>
 
         {/* Quick Action */}
         <div className="mb-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="bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl shadow-md p-8 border-2 border-primary-400">
             <div className="flex flex-col md:flex-row items-center justify-between gap-4">
               <div>
                 <h2 className="text-2xl font-bold mb-2">
@@ -89,8 +89,8 @@ export default function ClientPage() {
                 </p>
               </div>
               <Link href={ROUTES.GAME}>
-                <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 className="bg-white text-primary-500 hover:bg-beige-50 font-bold px-8 py-4 rounded-lg transition-all shadow-lg hover:scale-105 duration-300 whitespace-nowrap">
+                  Jouer maintenant
                 </button>
               </Link>
             </div>
@@ -99,54 +99,54 @@ 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 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
+                <p className="text-sm font-medium text-gray-600 mb-2">
                   Total Participations
                 </p>
-                <p className="text-4xl font-bold text-blue-600">
+                <p className="text-4xl font-bold text-primary-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">
+              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <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 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
+                <p className="text-sm font-medium text-gray-600 mb-2">
                   Gains réclamés
                 </p>
-                <p className="text-4xl font-bold text-green-600">
+                <p className="text-4xl font-bold text-primary-500">
                   {stats.claimed}
                 </p>
               </div>
-              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
+          <div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-[#8a8a7a] mb-2">
+                <p className="text-sm font-medium text-gray-600 mb-2">
                   En attente
                 </p>
-                <p className="text-4xl font-bold text-yellow-600">
+                <p className="text-4xl font-bold text-secondary-600">
                   {stats.pending}
                 </p>
               </div>
-              <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-secondary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
@@ -155,12 +155,12 @@ export default function ClientPage() {
         </div>
 
         {/* Recent Tickets */}
-        <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="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
+          <div className="px-6 py-4 border-b border-beige-300">
             <div className="flex items-center justify-between">
-              <h2 className="text-xl font-bold text-[#5a5a4e]">Mes derniers tickets</h2>
+              <h2 className="text-xl font-bold text-primary-500">Mes derniers tickets</h2>
               <Link href={ROUTES.HISTORY}>
-                <button className="text-[#d4a574] hover:text-[#c4956a] font-semibold text-sm transition-colors">
+                <button className="text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
                   Voir tout l'historique
                 </button>
               </Link>
@@ -170,11 +170,11 @@ export default function ClientPage() {
             {tickets.length === 0 ? (
               <div className="text-center py-12">
                 <div className="text-6xl mb-4">🎲</div>
-                <p className="text-[#8a8a7a] mb-4">
+                <p className="text-gray-600 mb-4">
                   Vous n'avez pas encore participé au jeu
                 </p>
                 <Link href={ROUTES.GAME}>
-                  <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">
+                  <button className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300">
                     Jouer maintenant
                   </button>
                 </Link>
@@ -183,22 +183,22 @@ export default function ClientPage() {
               <div className="overflow-x-auto">
                 <table className="min-w-full">
                   <thead>
-                    <tr className="border-b border-[#e5e4dc]">
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                    <tr className="border-b border-beige-300">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Code Ticket
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Gain
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Statut
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
+                      <th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
                         Date
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-[#e5e4dc]">
+                  <tbody className="divide-y divide-beige-200">
                     {tickets.slice(0, 5).map((ticket) => (
                       <TicketTableRow key={ticket.id} ticket={ticket} />
                     ))}