diff --git a/apps/web/src/routes/__auth.login.lazy.tsx b/apps/web/src/routes/__auth.login.lazy.tsx
index d62399c..a7e8fdd 100644
--- a/apps/web/src/routes/__auth.login.lazy.tsx
+++ b/apps/web/src/routes/__auth.login.lazy.tsx
@@ -63,8 +63,8 @@ function Login() {
           <div className="bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm p-8">
             {/* Logo */}
             <div className="flex items-center justify-center gap-2 mb-8">
-              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
-              <span className="text-xl font-bold text-purple-600">Dropit</span>
+              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
+              <span className="text-xl font-bold text-purple-700">Dropit</span>
             </div>
 
             <div className="flex flex-col space-y-2 text-center mb-6">
diff --git a/apps/web/src/routes/__auth.signup.lazy.tsx b/apps/web/src/routes/__auth.signup.lazy.tsx
index eba35be..e305d2f 100644
--- a/apps/web/src/routes/__auth.signup.lazy.tsx
+++ b/apps/web/src/routes/__auth.signup.lazy.tsx
@@ -62,8 +62,8 @@ function Signup() {
           <div className="bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm p-8">
             {/* Logo */}
             <div className="flex items-center justify-center gap-2 mb-8">
-              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
-              <span className="text-xl font-bold text-purple-600">Dropit</span>
+              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
+              <span className="text-xl font-bold text-purple-700">Dropit</span>
             </div>
 
             <div className="flex flex-col space-y-2 text-center mb-6">
diff --git a/apps/web/src/routes/__auth.tsx b/apps/web/src/routes/__auth.tsx
index 175403c..0ecfd98 100644
--- a/apps/web/src/routes/__auth.tsx
+++ b/apps/web/src/routes/__auth.tsx
@@ -31,9 +31,6 @@ function AuthLayout() {
   return (
     <div
       className="min-h-screen flex items-center justify-center"
-      style={{
-        background: 'linear-gradient(135deg, rgba(200, 180, 255, 0.5) 0%, rgba(180, 200, 255, 0.4) 20%, rgba(255, 200, 220, 0.3) 40%, rgba(255, 220, 200, 0.35) 60%, rgba(255, 200, 220, 0.4) 80%, rgba(220, 180, 255, 0.5) 100%)'
-      }}
     >
       <Outlet />
     </div>
diff --git a/apps/web/src/routes/create-organization.tsx b/apps/web/src/routes/create-organization.tsx
index 2d7c705..67d287e 100644
--- a/apps/web/src/routes/create-organization.tsx
+++ b/apps/web/src/routes/create-organization.tsx
@@ -75,16 +75,14 @@ function CreateOrganizationPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-8" style={{
-      background: 'linear-gradient(135deg, rgba(200, 180, 255, 0.5) 0%, rgba(180, 200, 255, 0.4) 20%, rgba(255, 200, 220, 0.3) 40%, rgba(255, 220, 200, 0.35) 60%, rgba(255, 200, 220, 0.4) 80%, rgba(220, 180, 255, 0.5) 100%)'
-    }}>
+    <div className="min-h-screen flex items-center justify-center p-8">
       <div className="w-full max-w-md mx-auto">
         <Card className="w-full bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm">
           <CardHeader className="text-center p-8 pb-6">
             {/* Logo */}
             <div className="flex items-center justify-center gap-2 mb-6">
-              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
-              <span className="text-xl font-bold text-purple-600">Dropit</span>
+              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
+              <span className="text-xl font-bold text-purple-700">Dropit</span>
             </div>
 
             <CardTitle className="text-2xl text-gray-800">{t('create_organization.title')}</CardTitle>
@@ -142,7 +140,7 @@ function CreateOrganizationPage() {
 
               <Button
                 type="submit"
-                className="w-full h-11 text-base shadow hover:shadow-md transition-shadow"
+                className="w-full h-11"
                 disabled={createOrganizationMutation.isPending}
               >
                 {createOrganizationMutation.isPending
diff --git a/apps/web/src/routes/download-app.tsx b/apps/web/src/routes/download-app.tsx
index cc730d5..9bc33cb 100644
--- a/apps/web/src/routes/download-app.tsx
+++ b/apps/web/src/routes/download-app.tsx
@@ -70,11 +70,11 @@ function DownloadAppPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 flex items-center justify-center p-4">
       <div className="w-full max-w-4xl mx-auto">
         <div className="text-center mb-8">
-          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
-            <Smartphone className="h-8 w-8 text-blue-600" />
+          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-purple-100">
+            <Smartphone className="h-8 w-8 text-purple-600" />
           </div>
           <h1 className="text-4xl font-bold text-gray-900 mb-4">
             {isAthlete ? 'Bienvenue sur DropIt !' : t('download_app.title')}
@@ -86,8 +86,8 @@ function DownloadAppPage() {
             }
           </p>
           {isAthlete && (
-            <div className="mt-4 p-4 bg-blue-50 rounded-lg max-w-2xl mx-auto">
-              <p className="text-sm text-blue-700">
+            <div className="mt-4 p-4 bg-purple-50 rounded-lg max-w-2xl mx-auto">
+              <p className="text-sm text-purple-700">
                 💡 L'interface web est réservée aux coachs pour la gestion des programmes d'entraînement. 
                 Votre espace athlète vous attend sur mobile !
               </p>
@@ -192,7 +192,7 @@ function DownloadAppPage() {
         <div className="text-center mt-8 pt-8 border-t border-gray-200">
           <p className="text-sm text-gray-500">
             {t('download_app.footer.support')}{' '}
-            <a href="/support" className="text-blue-600 hover:underline">
+            <a href="/support" className="text-purple-600 hover:underline">
               {t('download_app.footer.contact')}
             </a>
           </p>
diff --git a/apps/web/src/routes/join-organization.tsx b/apps/web/src/routes/join-organization.tsx
index 1e62d67..4d0db10 100644
--- a/apps/web/src/routes/join-organization.tsx
+++ b/apps/web/src/routes/join-organization.tsx
@@ -80,16 +80,14 @@ function JoinOrganizationPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-8" style={{
-      background: 'linear-gradient(135deg, rgba(200, 180, 255, 0.5) 0%, rgba(180, 200, 255, 0.4) 20%, rgba(255, 200, 220, 0.3) 40%, rgba(255, 220, 200, 0.35) 60%, rgba(255, 200, 220, 0.4) 80%, rgba(220, 180, 255, 0.5) 100%)'
-    }}>
+    <div className="min-h-screen flex items-center justify-center p-8">
       <div className="w-full max-w-md mx-auto">
         <Card className="w-full bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm">
           <CardHeader className="text-center p-8 pb-6">
             {/* Logo */}
             <div className="flex items-center justify-center gap-2 mb-6">
-              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
-              <span className="text-xl font-bold text-purple-600">Dropit</span>
+              <BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
+              <span className="text-xl font-bold text-purple-700">Dropit</span>
             </div>
 
             <CardTitle className="text-2xl text-gray-800">{t('join_organization.title')}</CardTitle>
@@ -117,7 +115,8 @@ function JoinOrganizationPage() {
 
             <Button
               type="submit"
-              className="w-full h-11 text-base bg-orange-500 hover:bg-orange-600 text-white shadow hover:shadow-md transition-shadow"
+              variant='default'
+              className="w-full h-11"
               disabled={joinOrganizationMutation.isPending}
             >
               {joinOrganizationMutation.isPending ? (
diff --git a/apps/web/src/routes/onboarding.tsx b/apps/web/src/routes/onboarding.tsx
index 6b2d7df..5c630c4 100644
--- a/apps/web/src/routes/onboarding.tsx
+++ b/apps/web/src/routes/onboarding.tsx
@@ -77,7 +77,7 @@ function OnboardingChoice() {
               className="p-8"
             >
               <CardHeader className="text-center p-0 mb-6">
-                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-purple-100 group-hover:bg-purple-200 transition-colors">
+                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-purple-100">
                   <Trophy className="h-8 w-8 text-purple-600" />
                 </div>
                 <CardTitle className="text-2xl text-gray-800 mb-2">{t('onboarding.roles.coach.title')}</CardTitle>
@@ -147,8 +147,8 @@ function OnboardingChoice() {
               className="p-8"
             >
               <CardHeader className="text-center p-0 mb-6">
-                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-orange-100 group-hover:bg-orange-200 transition-colors">
-                  <UserCheck className="h-8 w-8 text-orange-600" />
+                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-pink-100">
+                  <UserCheck className="h-8 w-8 text-pink-600" />
                 </div>
                 <CardTitle className="text-2xl text-gray-800 mb-2">{t('onboarding.roles.athlete.title')}</CardTitle>
                 <CardDescription className="text-base text-gray-600">
@@ -159,33 +159,33 @@ function OnboardingChoice() {
               <CardContent className="p-0">
                 <ul className="space-y-3 mb-8">
                   <li className="flex items-start gap-3 text-sm text-gray-700">
-                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
-                      <CheckIcon className="w-3 h-3 text-orange-600" />
+                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
+                      <CheckIcon className="w-3 h-3 text-pink-600" />
                     </div>
                     <span>{t('onboarding.roles.athlete.features.join_club')}</span>
                   </li>
                   <li className="flex items-start gap-3 text-sm text-gray-700">
-                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
-                      <CheckIcon className="w-3 h-3 text-orange-600" />
+                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
+                      <CheckIcon className="w-3 h-3 text-pink-600" />
                     </div>
                     <span>{t('onboarding.roles.athlete.features.follow_training')}</span>
                   </li>
                   <li className="flex items-start gap-3 text-sm text-gray-700">
-                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
-                      <CheckIcon className="w-3 h-3 text-orange-600" />
+                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
+                      <CheckIcon className="w-3 h-3 text-pink-600" />
                     </div>
                     <span>{t('onboarding.roles.athlete.features.record_performance')}</span>
                   </li>
                   <li className="flex items-start gap-3 text-sm text-gray-700">
-                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
-                      <CheckIcon className="w-3 h-3 text-orange-600" />
+                    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
+                      <CheckIcon className="w-3 h-3 text-pink-600" />
                     </div>
                     <span>{t('onboarding.roles.athlete.features.communicate_coach')}</span>
                   </li>
                 </ul>
 
                 <Button
-                  className="w-full h-11 text-base bg-orange-500 hover:bg-orange-600 text-white shadow hover:shadow-md transition-shadow"
+                  className="w-full h-11 text-base bg-pink-500 hover:bg-pink-600 text-white shadow hover:shadow-md transition-shadow"
                   size="lg"
                 >
                   {t('onboarding.roles.athlete.button')}