diff --git a/app/assets/stylesheets/theme.css b/app/assets/stylesheets/theme.css
new file mode 100644
index 0000000..a15a5b9
--- /dev/null
+++ b/app/assets/stylesheets/theme.css
@@ -0,0 +1,161 @@
+/* Theme Rules from docs/theme-rules.md - Light Theme Only */
+
+/* Custom properties for the design system */
+:root {
+  /* Primary - Purple gradient system */
+ --color-primary-50: #faf5ff;
+ --color-primary-100: #f3e8ff;
+ --color-primary-200: #e9d5ff;
+ --color-primary-300: #d8b4fe;
+ --color-primary-400: #c084fc;
+ --color-primary-500: #a855f7;
+ --color-primary-600: #9333ea;
+ --color-primary-700: #7e22ce;
+ --color-primary-800: #6b21a8;
+ --color-primary-900: #581c87;
+
+  /* Accent - Pink gradient */
+ --color-accent-400: #f472b6;
+ --color-accent-500: #ec4899;
+ --color-accent-600: #db2777;
+
+  /* Neutral - Slate system */
+ --color-neutral-50: #f8fafc;
+ --color-neutral-100: #f1f5f9;
+ --color-neutral-200: #e2e8f0;
+ --color-neutral-300: #cbd5e1;
+ --color-neutral-400: #94a3b8;
+ --color-neutral-500: #64748b;
+ --color-neutral-600: #475569;
+ --color-neutral-700: #334155;
+ --color-neutral-800: #1e293b;
+ --color-neutral-900: #0f172a;
+
+  /* Font families */
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Spacing scale */
+ --space-1: 0.25rem;      /* 4px */
+ --space-2: 0.5rem;       /* 8px */
+ --space-3: 0.75rem;      /* 12px */
+ --space-4: 1rem;         /* 16px */
+ --space-5: 1.25rem;      /* 20px */
+ --space-6: 1.5rem;        /* 24px */
+ --space-8: 2rem;         /* 32px */
+ --space-10: 2.5rem;      /* 40px */
+ --space-12: 3rem;        /* 48px */
+}
+
+/* Button components */
+.btn-primary {
+  @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-200;
+}
+
+.btn-secondary {
+  @apply bg-white text-purple-600 border border-purple-200 font-medium py-2 px-4 rounded-lg hover:bg-purple-50 transition-colors duration-200;
+}
+
+.btn-destructive {
+  @apply bg-red-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-red-700 transition-colors duration-200;
+}
+
+/* Card components */
+.card {
+  @apply bg-white rounded-lg shadow-sm border border-neutral-200 p-6 hover:shadow-md transition-shadow duration-200;
+}
+
+.card-header {
+  @apply pb-4 border-b border-neutral-200 mb-4;
+}
+
+.card-body {
+  @apply space-y-4;
+}
+
+/* Form components */
+.form-input {
+  @apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm;
+}
+
+.form-label {
+  @apply block text-sm font-medium text-neutral-700 mb-1;
+}
+
+.form-error {
+  @apply text-sm text-red-600 mt-1;
+}
+
+/* Navigation */
+.nav-link {
+  @apply text-neutral-600 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
+}
+
+.nav-link-active {
+  @apply text-purple-600 bg-purple-50;
+}
+
+/* Layout utilities */
+.container {
+  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+}
+
+.grid-responsive {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+}
+
+.grid-cards {
+  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
+}
+
+/* Animation utilities */
+.hover-lift {
+  @apply transition-transform duration-200 hover:-translate-y-1;
+}
+
+.hover-glow {
+  @apply transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/25;
+}
+
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
+}
+
+.transition-fast {
+  @apply transition-all duration-150 ease-in-out;
+}
+
+.transition-normal {
+  @apply transition-all duration-200 ease-in-out;
+}
+
+.transition-slow {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+/* State utilities */
+.disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.animate-pulse-subtle {
+  @apply animate-pulse;
+  animation-duration: 3s;
+}
+
+.fade-in {
+  @apply animate-in fade-in-0 duration-500;
+}
+
+/* Accessibility utilities */
+.focus-visible {
+  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2;
+}
+
+.text-primary {
+  @apply text-neutral-900;
+}
+
+.text-secondary {
+  @apply text-neutral-600;
+}
\ No newline at end of file
diff --git a/app/views/components/_footer.html.erb b/app/views/components/_footer.html.erb
index 00f3466..6afdaf0 100644
--- a/app/views/components/_footer.html.erb
+++ b/app/views/components/_footer.html.erb
@@ -1,23 +1,23 @@
-<footer class="py-10 bg-gray-900 text-white border-t-1 border-solid border-color-gray">
-  <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+<footer class="py-10 bg-neutral-100 text-neutral-600 border-t border-neutral-200">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
       <!-- Column 1: About -->
       <div class="space-y-4">
-        <h3 class="text-lg font-semibold text-indigo-400">À propos</h3>
-        <p class="text-sm text-gray-300 leading-relaxed">
+        <h3 class="text-lg font-semibold text-purple-500">À propos</h3>
+        <p class="text-sm text-neutral-600 leading-relaxed">
           Aperonight est la plateforme qui connecte les amateurs de soirées aux meilleurs événements de leur ville.
         </p>
         <div class="flex space-x-4">
-          <a href="#" class="text-gray-400 hover:text-white transition-colors">
+          <a href="#" class="text-neutral-500 hover:text-purple-500 transition-colors">
             <span class="sr-only">Facebook</span>
-            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/>
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 20.128 22 15.991 22 12z" clip-rule="evenodd"/>
             </svg>
           </a>
-          <a href="#" class="text-gray-400 hover:text-white transition-colors">
+          <a href="#" class="text-neutral-500 hover:text-purple-500 transition-colors">
             <span class="sr-only">Instagram</span>
-            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802c-.468 0-.514.043-.514.043v2.378h2.575c0-2.378 0-2.378-.514-2.378zm-2.189 2.378v-2.378c0-.468.043-.514.043-.514h-2.378v2.892h2.335zm1.097 1.097c-.468 0-.514.043-.514.043v2.335h2.892v-2.892h-2.378c-.468 0-.514.043-.514.043v.514zm-1.097 1.097v-2.335c0-.468.043-.514.043-.514h-2.378v2.892h2.335z" clip-rule="evenodd"/>
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63z" clip-rule="evenodd"/>
             </svg>
           </a>
         </div>
@@ -25,59 +25,59 @@
 
       <!-- Column 2: Quick Links -->
       <div class="space-y-4">
-        <h3 class="text-lg font-semibold text-indigo-400">Liens rapides</h3>
+        <h3 class="text-lg font-semibold text-purple-500">Liens rapides</h3>
         <ul class="space-y-2 text-sm">
-          <li><%= link_to "Accueil", "/", class: "text-gray-300 hover:text-white transition-colors" %></li>
-          <li><%= link_to "Événements", "/events", class: "text-gray-300 hover:text-white transition-colors" %></li>
-          <li><%= link_to "Organisateurs", "/organizers", class: "text-gray-300 hover:text-white transition-colors" %></li>
-          <li><%= link_to "Support", "/support", class: "text-gray-300 hover:text-white transition-colors" %></li>
+          <li><%= link_to "Accueil", "/", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
+          <li><%= link_to "Événements", "/events", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
+          <li><%= link_to "Organisateurs", "/organizers", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
+          <li><%= link_to "Support", "/support", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
         </ul>
       </div>
 
       <!-- Column 3: Legal -->
       <div class="space-y-4">
-        <h3 class="text-lg font-semibold text-indigo-400">Légal</h3>
+        <h3 class="text-lg font-semibold text-purple-500">Légal</h3>
         <ul class="space-y-2 text-sm">
-          <li><%= link_to "Conditions d'utilisation", "/terms", class: "text-gray-300 hover:text-white transition-colors" %></li>
-          <li><%= link_to "Politique de confidentialité", "/privacy", class: "text-gray-300 hover:text-white transition-colors" %></li>
-          <li><%= link_to "CGV", "/cgv", class: "text-gray-300 hover:text-white transition-colors" %></li>
-          <li><%= link_to "Mentions légales", "/legal", class: "text-gray-300 hover:text-white transition-colors" %></li>
+          <li><%= link_to "Conditions d'utilisation", "/terms", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
+          <li><%= link_to "Politique de confidentialité", "/privacy", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
+          <li><%= link_to "CGV", "/cgv", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
+          <li><%= link_to "Mentions légales", "/legal", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
         </ul>
       </div>
 
       <!-- Column 4: Contact -->
       <div class="space-y-4">
-        <h3 class="text-lg font-semibold text-indigo-400">Contact</h3>
-        <address class="not-italic text-sm text-gray-300 space-y-2">
+        <h3 class="text-lg font-semibold text-purple-500">Contact</h3>
+        <address class="not-italic text-sm text-neutral-600 space-y-2">
           <p>
             <span class="block font-medium">Email:</span>
-            <a href="mailto:hello@aperonight.com" class="text-indigo-400 hover:text-indigo-300 transition-colors">
+            <a href="mailto:hello@aperonight.com" class="text-purple-500 hover:text-purple-400 transition-colors">
               hello@aperonight.com
             </a>
           </p>
           <p>
             <span class="block font-medium">Support:</span>
-            <a href="mailto:support@aperonight.com" class="text-indigo-400 hover:text-indigo-300 transition-colors">
+            <a href="mailto:support@aperonight.com" class="text-purple-500 hover:text-purple-400 transition-colors">
               support@aperonight.com
             </a>
           </p>
         </address>
-        <p class="text-xs text-gray-400">
+        <p class="text-xs text-neutral-500">
           Réponse sous 24h en semaine
         </p>
       </div>
     </div>
 
     <!-- Bottom Bar -->
-    <div class="mt-12 pt-8 border-t border-gray-800">
+    <div class="mt-12 pt-8 border-t border-neutral-200">
       <div class="flex flex-col md:flex-row justify-between items-center">
-        <p class="text-sm text-gray-400">
+        <p class="text-sm text-neutral-500">
           © <%= Time.current.year %> Aperonight. Tous droits réservés.
         </p>
-        <p class="text-xs text-gray-500 mt-2 md:mt-0">
+        <p class="text-xs text-neutral-400 mt-2 md:mt-0">
           Fait avec 💜 pour la communauté
         </p>
       </div>
     </div>
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/app/views/components/_header.html.erb b/app/views/components/_header.html.erb
index ef47c74..329b0bb 100644
--- a/app/views/components/_header.html.erb
+++ b/app/views/components/_header.html.erb
@@ -1,34 +1,17 @@
-<nav x-data="{ open: false }" class="bg-black border-b border-gray-100">
+<nav x-data="{ open: false }" class="border-b border-purple-700">
   <!-- Primary Navigation Menu -->
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between h-16">
       <div class="flex">
         <!-- Logo -->
         <div class="shrink-0 flex items-center">
-          <%= link_to Rails.application.config.app_name, "/", class: "text-white text-xl font-bold" %>
+          <%= link_to Rails.application.config.app_name, "/", class: "text-xl font-bold text-white" %>
         </div>
 
         <!-- Navigation Links -->
-        <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-          <!-- Parties  -->
-          <%= link_to "Soirées et afterworks", "#",
-            class: "inline-flex
-            items-center px-1 pt-1 border-b-2 border-transparent
-            text-sm font-medium leading-5 text-gray-300
-            hover:text-white hover:border-white focus:outline-none
-            focus:text-white focus:border-white transition
-            duration-150 ease-in-out" %>
-          <!-- /Parties -->
-
-          <!-- Concerts  -->
-          <%= link_to "Concerts", "#",
-            class: "inline-flex
-            items-center px-1 pt-1 border-b-2 border-transparent
-            text-sm font-medium leading-5 text-gray-300
-            hover:text-white hover:border-white focus:outline-none
-            focus:text-white focus:border-white transition
-            duration-150 ease-in-out" %>
-          <!-- /Parties -->
+        <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
+          <%= link_to "Soirées et afterworks", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+          <%= link_to "Concerts", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
         </div>
       </div>
 
@@ -38,7 +21,7 @@
         <div class="hidden sm:flex sm:items-center sm:ms-6">
           <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
             <div @click="open = ! open">
-              <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
+              <button class="bg-purple-700 text-white border border-purple-800 font-medium py-2 px-4 rounded-lg hover:bg-purple-800 transition-colors duration-200 focus-ring">
                 <div><%= current_user.email %></div>
                 <div class="ms-1">
                   <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -58,35 +41,34 @@
                  class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0"
                  style="display: none;"
                  @click="open = false">
-              <div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
-                <%= link_to "Mon profil", edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %>
-                <%= link_to "Mes réservations", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %>
+              <div class="rounded-md ring-1 ring-purple-700 py-1 bg-purple-600">
+                <%= link_to "Mon profil", edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+                <%= link_to "Mes réservations", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
 
-                <!-- Logout -->
                 <%= link_to "Déconnexion", destroy_user_session_path,
                     data: {
-                    controller: "logout",
-                    action: "click->logout#signOut",
-                    logout_url_value: destroy_user_session_path,
-                    login_url_value: new_user_session_path,
-                    turbo: false
+                      controller: "logout",
+                      action: "click->logout#signOut",
+                      logout_url_value: destroy_user_session_path,
+                      login_url_value: new_user_session_path,
+                      turbo: false
                     },
-                    class: "inline-block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %>
+                    class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
+                </div>
               </div>
             </div>
-          </div>
         </div>
       <% else %>
         <!-- Login/Register Links -->
-        <div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4">
-          <%= link_to "S'inscrire", new_user_registration_path, class: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-300 hover:text-white focus:outline-none transition ease-in-out duration-150" %>
-          <%= link_to "Se connecter", new_user_session_path, class: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-300 hover:text-white focus:outline-none transition ease-in-out duration-150" %>
+        <div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4 items-center">
+          <%= link_to "S'inscrire", new_user_registration_path, class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+          <%= link_to "Se connecter", new_user_session_path, class: "bg-white text-purple-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-purple-100 transition-all duration-200" %>
         </div>
       <% end %>
 
       <!-- Hamburger -->
       <div class="-me-2 flex items-center sm:hidden">
-        <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+        <button @click="open = ! open" class="p-2 rounded-md text-purple-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
           <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
             <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
             <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -98,24 +80,23 @@
 
   <!-- Responsive Navigation Menu -->
   <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
-    <div class="pt-2 pb-3 space-y-1">
-      <%= link_to "Soirées et afterworks", "#", class: "block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
-      <%= link_to "Concerts", "#", class: "block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
+    <div class="pt-2 pb-3 space-y-1 bg-purple-600">
+      <%= link_to "Soirées et afterworks", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+      <%= link_to "Concerts", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
     </div>
 
     <!-- Responsive Settings Options -->
-    <div class="pt-4 pb-1 border-t border-gray-200">
+    <div class="pt-4 pb-1 border-t border-purple-700 bg-purple-600">
       <% if user_signed_in? %>
         <div class="px-4">
-          <div class="font-medium text-base text-gray-800"><%= current_user.email %></div>
-          <div class="font-medium text-sm text-gray-500"><%= current_user.email %></div>
+          <div class="font-medium text-base text-white"><%= current_user.email %></div>
+          <div class="font-medium text-sm text-purple-200"><%= current_user.email %></div>
         </div>
 
         <div class="mt-3 space-y-1">
-          <%= link_to "Mon profil", edit_user_registration_path, class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
-          <%= link_to "Mes réservations", "#", class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
+          <%= link_to "Mon profil", edit_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+          <%= link_to "Mes réservations", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
 
-          <!-- Logout -->
           <%= link_to "Déconnexion", destroy_user_session_path,
               data: {
                 controller: "logout",
@@ -124,12 +105,12 @@
                 login_url_value: new_user_session_path,
                 turbo: false
               },
-              class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
+              class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
         </div>
       <% else %>
         <div class="mt-3 space-y-1">
-          <%= link_to "S'inscrire", new_user_registration_path, class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
-          <%= link_to "Se connecter", new_user_session_path, class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %>
+          <%= link_to "S'inscrire", new_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
+          <%= link_to "Se connecter", new_user_session_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
         </div>
       <% end %>
     </div>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index 5fbb9ff..642f4ec 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -1,25 +1,44 @@
-<h2>Change your password</h2>
+<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-md w-full space-y-8">
+    <div>
+      <%= link_to "/" do %>
+        <img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
+      <% end %>
+      <h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
+        Changer votre mot de passe
+      </h2>
+      <p class="mt-2 text-center text-sm text-neutral-600">
+        Veuillez entrer votre nouveau mot de passe ci-dessous
+      </p>
+    </div>
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-  <%= f.hidden_field :reset_password_token %>
+    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "mt-8 space-y-6" }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
+      <%= f.hidden_field :reset_password_token %>
 
-  <div class="field">
-    <%= f.label :password, "New password" %><br />
-    <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
+      <div class="space-y-4">
+        <div>
+          <%= f.label :password, "Nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
+          <% if @minimum_password_length %>
+            <em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
+          <% end %>
+          <%= f.password_field :password, autofocus: true, autocomplete: "new-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+
+        <div>
+          <%= f.label :password_confirmation, "Confirmer le nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
+          <%= f.password_field :password_confirmation, autocomplete: "new-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+      </div>
+
+      <div class="actions">
+        <%= f.submit "Changer mon mot de passe", 
+            class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
+      </div>
     <% end %>
-    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
-  </div>
 
-  <div class="field">
-    <%= f.label :password_confirmation, "Confirm new password" %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+    <%= render "devise/shared/links" %>
   </div>
-
-  <div class="actions">
-    <%= f.submit "Change my password" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 9b486b8..c779699 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,16 +1,35 @@
-<h2>Forgot your password?</h2>
+<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-md w-full space-y-8">
+    <div>
+      <%= link_to "/" do %>
+        <img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
+      <% end %>
+      <h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
+        Mot de passe oublié ?
+      </h2>
+      <p class="mt-2 text-center text-sm text-neutral-600">
+        Entrez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe
+      </p>
+    </div>
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "mt-8 space-y-6" }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+      <div>
+        <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
+        <div class="mt-1">
+          <%= f.email_field :email, autofocus: true, autocomplete: "email", 
+              class: "appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm", 
+              placeholder: "Adresse email" %>
+        </div>
+      </div>
+
+      <div>
+        <%= f.submit "Envoyer le lien de réinitialisation", 
+            class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
+      </div>
+    <% end %>
+
+    <%= render "devise/shared/links" %>
   </div>
-
-  <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index b82e336..5055f1c 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -1,43 +1,70 @@
-<h2>Edit <%= resource_name.to_s.humanize %></h2>
+<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-2xl w-full space-y-8">
+    <div>
+      <%= link_to "/" do %>
+        <img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
+      <% end %>
+      <h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
+        Modifier votre compte
+      </h2>
+      <p class="mt-2 text-center text-sm text-neutral-600">
+        Gérez vos informations et préférences
+      </p>
+    </div>
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "mt-8 space-y-6" }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+      <div class="space-y-6">
+        <div>
+          <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
+          <%= f.email_field :email, autofocus: true, autocomplete: "email", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
 
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
-  <% end %>
+        <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+          <div class="text-sm text-neutral-600">
+            En attente de confirmation pour : <%= resource.unconfirmed_email %>
+          </div>
+        <% end %>
 
-  <div class="field">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-    <% if @minimum_password_length %>
-      <br />
-      <em><%= @minimum_password_length %> characters minimum</em>
+        <div>
+          <%= f.label :password, "Nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
+          <i class="text-sm text-neutral-500">(laissez vide si vous ne souhaitez pas le changer)</i>
+          <%= f.password_field :password, autocomplete: "new-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+
+        <div>
+          <%= f.label :password_confirmation, "Confirmer le nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
+          <%= f.password_field :password_confirmation, autocomplete: "new-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+
+        <div>
+          <%= f.label :current_password, "Mot de passe actuel", class: "block text-sm font-medium text-neutral-700" %>
+          <i class="text-sm text-neutral-500">(requis pour confirmer vos changements)</i>
+          <%= f.password_field :current_password, autocomplete: "current-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between">
+        <%= f.submit "Mettre à jour", 
+            class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
+      </div>
     <% end %>
+
+    <h3 class="text-center text-lg font-medium text-neutral-900">Supprimer mon compte</h3>
+    <div class="text-center">
+      <p class="text-sm text-neutral-600">
+        Mécontent ? <%= button_to "Supprimer mon compte", registration_path(resource_name), 
+          data: { confirm: "Êtes-vous sûr ?", turbo_confirm: "Êtes-vous sûr ?" }, 
+          method: :delete, 
+          class: "font-medium text-red-600 hover:text-red-500" %>
+      </p>
+    </div>
+
+    <%= link_to "Retour", :back, class: "text-center block text-purple-600 hover:text-purple-500" %>
   </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Update" %>
-  </div>
-<% end %>
-
-<h3>Cancel my account</h3>
-
-<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
-
-<%= link_to "Back", :back %>
+</div>
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index d655b66..fb15ab4 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -1,29 +1,62 @@
-<h2>Sign up</h2>
+<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-md w-full space-y-8">
+    <div>
+      <%= link_to "/" do %>
+        <img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
+      <% end %>
+      <h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
+        Créer votre compte
+      </h2>
+      <p class="mt-2 text-center text-sm text-neutral-600">
+        Ou
+        <a href="<%= new_user_session_path %>" class="font-medium text-purple-600 hover:text-purple-500">
+          connectez-vous à votre compte
+        </a>
+      </p>
+    </div>
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "mt-8 space-y-6" }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+      <div class="space-y-4">
+        <div>
+          <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
+          <%= f.email_field :email, autofocus: true, autocomplete: "email", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+
+        <div>
+          <%= f.label :password, class: "block text-sm font-medium text-neutral-700" %>
+          <% if @minimum_password_length %>
+          <em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
+          <% end %>
+          <%= f.password_field :password, autocomplete: "new-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+
+        <div>
+          <%= f.label :password_confirmation, class: "block text-sm font-medium text-neutral-700" %>
+          <%= f.password_field :password_confirmation, autocomplete: "new-password", 
+              class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
+        </div>
+      </div>
+
+      <div class="actions">
+        <%= f.submit "S'inscrire", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
+      </div>
+    <% end %>
+
+    <div class="mt-6">
+      <div class="relative">
+        <div class="absolute inset-0 flex items-center">
+          <div class="w-full border-t border-neutral-300"></div>
+        </div>
+        <div class="relative flex justify-center text-sm">
+          <span class="px-2 bg-neutral-50 text-neutral-600"> Ou continuer avec </span>
+        </div>
+      </div>
+
+      <%= render "devise/shared/links" %>
+    </div>
   </div>
-
-  <div class="field">
-    <%= f.label :password %>
-    <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Sign up" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index c5bf1f1..d275a90 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,15 +1,15 @@
-<div class="min-h-screen flex items-center justify-center bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
   <div class="max-w-md w-full space-y-8">
     <div>
       <%= link_to "/" do %>
         <img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
       <% end %>
-      <h2 class="mt-6 text-center text-3xl font-extrabold text-white">
+      <h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
         Connexion à votre compte
       </h2>
-      <p class="mt-2 text-center text-sm text-gray-400">
+      <p class="mt-2 text-center text-sm text-neutral-600">
         Ou
-        <a href="<%= new_user_registration_path %>" class="font-medium text-indigo-400 hover:text-indigo-300">
+        <a href="<%= new_user_registration_path %>" class="font-medium text-purple-600 hover:text-purple-500">
           créez un nouveau compte
         </a>
       </p>
@@ -22,14 +22,14 @@
         <div class="field">
           <%= f.label :email, class: "sr-only" %>
           <%= f.email_field :email, autofocus: true, autocomplete: "email", 
-              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-700 placeholder-gray-500 text-gray-100 bg-gray-800 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", 
+              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm", 
               placeholder: "Adresse email" %>
         </div>
 
         <div class="field">
           <%= f.label :password, class: "sr-only" %>
           <%= f.password_field :password, autocomplete: "current-password", 
-              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-700 placeholder-gray-500 text-gray-100 bg-gray-800 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", 
+              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm", 
               placeholder: "Mot de passe" %>
         </div>
       </div>
@@ -37,28 +37,28 @@
       <% if devise_mapping.rememberable? %>
         <div class="flex items-center justify-between">
           <div class="flex items-center">
-            <%= f.check_box :remember_me, class: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-700 rounded bg-gray-800" %>
-            <label for="user_remember_me" class="ml-2 block text-sm text-gray-400"> Se souvenir de moi </label>
+            <%= f.check_box :remember_me, class: "h-4 w-4 text-purple-600 focus:ring-purple-500 border-neutral-300 rounded bg-white" %>
+            <label for="user_remember_me" class="ml-2 block text-sm text-neutral-700"> Se souvenir de moi </label>
           </div>
 
           <div class="text-sm">
-            <%= link_to "Mot de passe oublié?", new_password_path(resource_name), class: "font-medium text-indigo-400 hover:text-indigo-300" %>
+            <%= link_to "Mot de passe oublié?", new_password_path(resource_name), class: "font-medium text-purple-600 hover:text-purple-500" %>
           </div>
         </div>
       <% end %>
 
       <div class="actions">
-        <%= f.submit "Se connecter", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500" %>
+        <%= f.submit "Se connecter", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
       </div>
     <% end %>
 
     <div class="mt-6">
       <div class="relative">
         <div class="absolute inset-0 flex items-center">
-          <div class="w-full border-t border-gray-700"></div>
+          <div class="w-full border-t border-neutral-300"></div>
         </div>
         <div class="relative flex justify-center text-sm">
-          <span class="px-2 bg-gray-900 text-gray-400"> Ou continuer avec </span>
+          <span class="px-2 bg-neutral-50 text-neutral-600"> Ou continuer avec </span>
         </div>
       </div>
 
diff --git a/app/views/devise/shared/_error_messages.html.erb b/app/views/devise/shared/_error_messages.html.erb
index cabfe30..5ba8ac5 100644
--- a/app/views/devise/shared/_error_messages.html.erb
+++ b/app/views/devise/shared/_error_messages.html.erb
@@ -1,14 +1,13 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" data-turbo-cache="false">
-    <h2>
+  <div id="error_explanation" data-turbo-cache="false" class="bg-red-50 border border-red-200 rounded-md p-4 mb-4">
+    <h2 class="text-lg font-medium text-red-800 mb-3">
       <%= I18n.t("errors.messages.not_saved",
                  count: resource.errors.count,
-                 resource: resource.class.model_name.human.downcase)
-       %>
+                 resource: resource.class.model_name.human.downcase) %>
     </h2>
-    <ul>
+    <ul class="list-disc list-inside space-y-1">
       <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
+        <li class="text-sm text-red-700"><%= message %></li>
       <% end %>
     </ul>
   </div>
diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb
index b4d28a7..df8dfe1 100644
--- a/app/views/devise/shared/_links.html.erb
+++ b/app/views/devise/shared/_links.html.erb
@@ -1,38 +1,38 @@
-<div class="">
+<div class="space-y-4">
   <%- if controller_name != "sessions" %>
-    <div class="w-full flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500">
+    <div class="w-full flex justify-center py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
       <%= link_to "Se connecter", new_session_path(resource_name), class: "block" %>
     </div>
   <% end %>
 
   <%- if devise_mapping.registerable? && controller_name != "registrations" %>
-    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500">
-        <%= link_to "S'inscrire", new_registration_path(resource_name), class: "" %>
+    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
+      <%= link_to "S'inscrire", new_registration_path(resource_name), class: "block" %>
     </div>
   <% end %>
 
   <%- if devise_mapping.recoverable? && controller_name != "passwords" && controller_name != "registrations" %>
-    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500">
-        <%= link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "" %>
+    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
+      <%= link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "block" %>
     </div>
   <% end %>
 
   <%- if devise_mapping.confirmable? && controller_name != "confirmations" %>
-    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500">
-        <%= link_to "Vous n'avez pas reçu les instructions de confirmation ?", new_confirmation_path(resource_name), class: "" %>
+    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
+      <%= link_to "Vous n'avez pas reçu les instructions de confirmation ?", new_confirmation_path(resource_name), class: "block" %>
     </div>
   <% end %>
 
   <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != "unlocks" %>
-    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500">
-        <%= link_to "Vous n'avez pas reçu les instructions de déverrouillage?", new_unlock_path(resource_name), class: "" %>
+    <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
+      <%= link_to "Vous n'avez pas reçu les instructions de déverrouillage?", new_unlock_path(resource_name), class: "block" %>
     </div>
   <% end %>
 
   <%- if devise_mapping.omniauthable? %>
     <%- resource_class.omniauth_providers.each do |provider| %>
-      <div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500">
-        <%= button_to "Se connecter avec #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "" %>
+      <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
+        <%= button_to "Se connecter avec #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "block" %>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 1c7cda4..71f7476 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="h-full bg-neutral-50">
   <head>
     <title><%= content_for(:title) || "Aperonight" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -19,21 +19,27 @@
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "theme", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>
 
-  <body>
+  <body class="h-full font-sans text-neutral-900 antialiased">
+    <div class="min-h-full">
+      <header class="bg-purple shadow-sm border-b border-neutral-200">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <%= render "components/header" %>
+        </div>
+      </header>
 
-    <div id="header">
-      <%= render "components/header" %>
-    </div><!-- /#header -->
-
-    <main>
+      <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <%= yield %>
-    </main>
+      </main>
 
-    <div id="footer">
-      <%= render "components/footer" %>
+      <footer class="bg-neutral-100 text-neutral-600">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <%= render "components/footer" %>
+        </div>
+      </footer>
     </div>
   </body>
 </html>
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
index 45c4577..032ca65 100644
--- a/app/views/pages/home.html.erb
+++ b/app/views/pages/home.html.erb
@@ -1,31 +1,31 @@
 <!-- Hero Section -->
-<section class="relative bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 min-h-[70vh] flex items-center">
-  <div class="absolute inset-0 bg-black bg-opacity-40"></div>
+<section class="relative bg-gradient-to-br from-purple-100 via-pink-50 to-indigo-100 min-h-[70vh] flex items-center">
+  <div class="absolute inset-0 bg-white bg-opacity-60"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
+    <h1 class="text-5xl md:text-7xl font-bold text-neutral-900 mb-6 leading-tight">
       Découvrez les afterworks et soirée
-      <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
+      <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">
         à Paris
       </span>
     </h1>
-    <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto leading-relaxed">
+    <p class="text-xl md:text-2xl text-neutral-700 mb-8 max-w-3xl mx-auto leading-relaxed">
       Les meilleures soirées, concerts et afterworks de Paris en un clic. Réservez vos places et vivez des expériences uniques.
     </p>
     <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
       <%= link_to "Explorer les soirées", "#events", class: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg" %>
-      <%= link_to "Voir les concerts", "#", class: "bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30 hover:bg-opacity-20 text-black font-semibold py-4 px-8 rounded-full transition-all duration-300" %>
+      <%= link_to "Voir les concerts", "#", class: "bg-white border border-neutral-300 hover:border-purple-300 text-neutral-700 font-semibold py-4 px-8 rounded-full transition-all duration-300" %>
     </div>
   </div>
 </section>
 
 <!-- Metrics -->
-<section class="bg-gradient-to-br from-gray-900 via-gray-800 to-black py-20">
+<section class="bg-neutral-50 py-20">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16">
-      <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
+      <h2 class="text-4xl md:text-5xl font-bold text-neutral-900 mb-4">
         Des chiffres qui parlent
       </h2>
-      <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+      <p class="text-xl text-neutral-600 max-w-2xl mx-auto">
         La plateforme préférée des Parisiens pour vivre la nuit
       </p>
     </div>
@@ -33,13 +33,13 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
       <!-- Total Events -->
       <div class="group relative">
-        <div class="relative overflow-hidden rounded-2xl bg-gray-800/60 backdrop-blur-sm border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 p-8">
-          <div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
+          <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
           <div class="relative">
-            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
+            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
               <span class="counter" data-controller="counter" data-counter-target-value="127">0</span>
             </div>
-            <p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
+            <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
               Événements organisés
             </p>
             <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
@@ -49,13 +49,13 @@
 
       <!-- Total Users -->
       <div class="group relative">
-        <div class="relative overflow-hidden rounded-2xl bg-gray-800/60 backdrop-blur-sm border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 p-8">
-          <div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
+          <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
           <div class="relative">
-            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
+            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
               <span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+
             </div>
-            <p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
+            <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
               Membres actifs
             </p>
             <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
@@ -65,13 +65,13 @@
 
       <!-- Average Rating -->
       <div class="group relative">
-        <div class="relative overflow-hidden rounded-2xl bg-gray-800/60 backdrop-blur-sm border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 p-8">
-          <div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
+          <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
           <div class="relative">
-            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
+            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
               <span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5
             </div>
-            <p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
+            <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
               Note moyenne des soirées
             </p>
             <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
@@ -83,51 +83,51 @@
     <!-- Additional Stats Row -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
       <div class="text-center">
-        <div class="text-3xl font-bold text-purple-300">
+        <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
         </div>
-        <p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
+        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
       </div>
       
       <div class="text-center">
-        <div class="text-3xl font-bold text-purple-300">
+        <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
         </div>
-        <p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
+        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
       </div>
       
       <div class="text-center">
-        <div class="text-3xl font-bold text-purple-300">
+        <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
         </div>
-        <p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
+        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
       </div>
       
       <div class="text-center">
-        <div class="text-3xl font-bold text-purple-300">
+        <div class="text-3xl font-bold text-purple-600">
           <span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
         </div>
-        <p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
+        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
       </div>
     </div>
   </div>
 </section>
 
 <!-- Quick Search Section -->
-<section id="search" class="bg-gray-900 py-16">
+<section id="search" class="bg-white py-16">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 shadow-2xl">
-      <h2 class="text-3xl font-bold text-white text-center mb-8">Trouvez votre prochaine soirée</h2>
+    <div class="bg-gradient-to-br from-neutral-50 to-white border border-neutral-200 rounded-2xl p-8 shadow-lg">
+      <h2 class="text-3xl font-bold text-neutral-900 text-center mb-8">Trouvez votre prochaine soirée</h2>
       
       <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
         <div>
-          <label class="block text-sm font-medium text-gray-300 mb-2">Quand ?</label>
-          <input type="date" class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date">
+          <label class="block text-sm font-medium text-neutral-700 mb-2">Quand ?</label>
+          <input type="date" class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date">
         </div>
         
         <div>
-          <label class="block text-sm font-medium text-gray-300 mb-2">Type d'événement</label>
-          <select class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
+          <label class="block text-sm font-medium text-neutral-700 mb-2">Type d'événement</label>
+          <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
             <option value="">Tous les types</option>
             <option value="club">Soirées club</option>
             <option value="afterwork">Afterworks</option>
@@ -137,8 +137,8 @@
         </div>
         
         <div>
-          <label class="block text-sm font-medium text-gray-300 mb-2">Genre musical</label>
-          <select class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
+          <label class="block text-sm font-medium text-neutral-700 mb-2">Genre musical</label>
+          <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
             <option value="">Tous les genres</option>
             <option value="house">House/Techno</option>
             <option value="hiphop">Hip-Hop</option>
@@ -157,28 +157,28 @@
 </section>
 
 <!-- Featured Events -->
-<section id="events" class="bg-gradient-to-b from-gray-900 to-black py-20">
+<section id="events" class="bg-neutral-50 py-20">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-12">
-      <h2 class="text-4xl font-bold text-white mb-4">Événements du moment</h2>
-      <p class="text-xl text-gray-400">Les soirées et concerts les plus populaires cette semaine</p>
+      <h2 class="text-4xl font-bold text-neutral-900 mb-4">Événements du moment</h2>
+      <p class="text-xl text-neutral-600">Les soirées et concerts les plus populaires cette semaine</p>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       <!-- Event Card 1 -->
-      <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl">
+      <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
         <div class="h-56 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 relative">
-          <div class="absolute top-4 right-4 bg-black bg-opacity-60 text-white px-3 py-1 rounded-full text-sm font-medium">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
             Club
           </div>
         </div>
         <div class="p-6">
           <div class="flex justify-between items-start mb-3">
-            <h3 class="text-2xl font-bold text-white">TECHNO NIGHT</h3>
-            <span class="text-purple-400 font-semibold">25€</span>
+            <h3 class="text-2xl font-bold text-neutral-900">TECHNO NIGHT</h3>
+            <span class="text-purple-600 font-semibold">25€</span>
           </div>
-          <p class="text-gray-400 mb-2">Rex Club, Paris 2ème</p>
-          <p class="text-gray-300 mb-4">Vendredi 22h • Soirée techno underground</p>
+          <p class="text-neutral-600 mb-2">Rex Club, Paris 2ème</p>
+          <p class="text-neutral-700 mb-4">Vendredi 22h • Soirée techno underground</p>
           <button class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 rounded-lg transition-all duration-300">
             Réserver ma place
           </button>
@@ -186,19 +186,19 @@
       </div>
 
       <!-- Event Card 2 -->
-      <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl">
+      <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
         <div class="h-56 bg-gradient-to-br from-blue-500 via-cyan-500 to-teal-500 relative">
-          <div class="absolute top-4 right-4 bg-black bg-opacity-60 text-white px-3 py-1 rounded-full text-sm font-medium">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
             Afterwork
           </div>
         </div>
         <div class="p-6">
           <div class="flex justify-between items-start mb-3">
-            <h3 class="text-2xl font-bold text-white">SUNSET APÉRO</h3>
-            <span class="text-blue-400 font-semibold">15€</span>
+            <h3 class="text-2xl font-bold text-neutral-900">SUNSET APÉRO</h3>
+            <span class="text-blue-600 font-semibold">15€</span>
           </div>
-          <p class="text-gray-400 mb-2">Nuba, Paris 13ème</p>
-          <p class="text-gray-300 mb-4">Jeudi 18h • Apéro sur les quais</p>
+          <p class="text-neutral-600 mb-2">Nuba, Paris 13ème</p>
+          <p class="text-neutral-700 mb-4">Jeudi 18h • Apéro sur les quais</p>
           <button class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-semibold py-3 rounded-lg transition-all duration-300">
             Réserver ma place
           </button>
@@ -206,19 +206,19 @@
       </div>
 
       <!-- Event Card 3 -->
-      <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl">
+      <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
         <div class="h-56 bg-gradient-to-br from-green-500 via-emerald-500 to-teal-500 relative">
-          <div class="absolute top-4 right-4 bg-black bg-opacity-60 text-white px-3 py-1 rounded-full text-sm font-medium">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
             Concert
           </div>
         </div>
         <div class="p-6">
           <div class="flex justify-between items-start mb-3">
-            <h3 class="text-2xl font-bold text-white">LIVE SESSION</h3>
-            <span class="text-green-400 font-semibold">20€</span>
+            <h3 class="text-2xl font-bold text-neutral-900">LIVE SESSION</h3>
+            <span class="text-green-600 font-semibold">20€</span>
           </div>
-          <p class="text-gray-400 mb-2">La Bellevilloise, Paris 20ème</p>
-          <p class="text-gray-300 mb-4">Samedi 20h • Concert live acoustique</p>
+          <p class="text-neutral-600 mb-2">La Bellevilloise, Paris 20ème</p>
+          <p class="text-neutral-700 mb-4">Samedi 20h • Concert live acoustique</p>
           <button class="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold py-3 rounded-lg transition-all duration-300">
             Réserver ma place
           </button>
@@ -227,7 +227,7 @@
     </div>
 
     <div class="text-center mt-12">
-      <button class="text-purple-400 hover:text-purple-300 text-lg font-medium transition-all duration-300 border-b-2 border-purple-400 hover:border-purple-300">
+      <button class="text-purple-600 hover:text-purple-700 text-lg font-medium transition-all duration-300 border-b-2 border-purple-600 hover:border-purple-700">
         Voir tous les événements →
       </button>
     </div>
@@ -235,11 +235,11 @@
 </section>
 
 <!-- Features -->
-<section class="bg-gray-900 py-20">
+<section class="bg-white py-20">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16">
-      <h2 class="text-4xl font-bold text-white mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2>
-      <p class="text-xl text-gray-400 max-w-2xl mx-auto">La plateforme préférée des Parisiens pour sortir</p>
+      <h2 class="text-4xl font-bold text-neutral-900 mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2>
+      <p class="text-xl text-neutral-600 max-w-2xl mx-auto">La plateforme préférée des Parisiens pour sortir</p>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
@@ -249,8 +249,8 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
           </svg>
         </div>
-        <h3 class="text-2xl font-bold text-white mb-3">Découverte facile</h3>
-        <p class="text-gray-400 leading-relaxed">Trouvez les meilleures soirées et concerts de Paris en quelques clics grâce à notre algorithme personnalisé</p>
+        <h3 class="text-2xl font-bold text-neutral-900 mb-3">Découverte facile</h3>
+        <p class="text-neutral-600 leading-relaxed">Trouvez les meilleures soirées et concerts de Paris en quelques clics grâce à notre algorithme personnalisé</p>
       </div>
 
       <div class="text-center p-8">
@@ -259,8 +259,8 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
         </div>
-        <h3 class="text-2xl font-bold text-white mb-3">Réservation sécurisée</h3>
-        <p class="text-gray-400 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p>
+        <h3 class="text-2xl font-bold text-neutral-900 mb-3">Réservation sécurisée</h3>
+        <p class="text-neutral-600 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p>
       </div>
 
       <div class="text-center p-8">
@@ -269,18 +269,18 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
           </svg>
         </div>
-        <h3 class="text-2xl font-bold text-white mb-3">Accès rapide</h3>
-        <p class="text-gray-400 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p>
+        <h3 class="text-2xl font-bold text-neutral-900 mb-3">Accès rapide</h3>
+        <p class="text-neutral-600 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p>
       </div>
     </div>
   </div>
 </section>
 
 <!-- CTA Section -->
-<section class="bg-gradient-to-r from-purple-900 via-indigo-900 to-pink-900 py-20">
+<section class="bg-gradient-to-r from-purple-100 via-pink-50 to-indigo-100 py-20">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h2 class="text-4xl font-bold text-white mb-6">Prêt à vivre la nuit parisienne ?</h2>
-    <p class="text-xl text-gray-300 mb-8">Rejoignez des milliers de party-goers qui utilisent Aperonight chaque semaine</p>
+    <h2 class="text-4xl font-bold text-neutral-900 mb-6">Prêt à vivre la nuit parisienne ?</h2>
+    <p class="text-xl text-neutral-700 mb-8">Rejoignez des milliers de party-goers qui utilisent Aperonight chaque semaine</p>
     <button class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
       S'inscrire gratuitement
     </button>
diff --git a/app/views/pages/legals.html.erb b/app/views/pages/legals.html.erb
index 95e6e83..bcbe3a1 100644
--- a/app/views/pages/legals.html.erb
+++ b/app/views/pages/legals.html.erb
@@ -1,2 +1,47 @@
-<h1>Pages#legals</h1>
-<p>Find me in app/views/pages/legals.html.erb</p>
+<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+  <h1 class="text-4xl font-bold text-neutral-900 mb-8">Mentions légales</h1>
+  
+  <div class="prose prose-neutral max-w-none">
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Éditeur du site</h2>
+    <p class="text-neutral-700 mb-6">
+      Le présent site est édité par Aperonight, une société par actions simplifiée au capital de 1 000 €, 
+      immatriculée au Registre du Commerce et des Sociétés de Paris sous le numéro 123 456 789 000 00, 
+      dont le siège social est situé à 123 rue de Paris, 75000 Paris.
+    </p>
+
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Directeur de la publication</h2>
+    <p class="text-neutral-700 mb-6">
+      Le directeur de la publication est M. Jean Dupont, en tant que Président d'Aperonight.
+    </p>
+
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Hébergement</h2>
+    <p class="text-neutral-700 mb-6">
+      Le site est hébergé par Heroku Inc., 415 Mission Street, Suite 300, San Francisco, CA 94105, États-Unis.
+    </p>
+
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Propriété intellectuelle</h2>
+    <p class="text-neutral-700 mb-6">
+      L'ensemble du contenu du site (textes, images, logos, vidéos) est la propriété exclusive d'Aperonight 
+      et est protégé par les lois françaises et internationales relatives à la propriété intellectuelle.
+    </p>
+
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Données personnelles</h2>
+    <p class="text-neutral-700 mb-6">
+      Conformément à la réglementation européenne sur la protection des données (RGPD), vous disposez d'un droit 
+      d'accès, de rectification et de suppression des données vous concernant. Pour exercer ces droits, contactez-nous 
+      à l'adresse email suivante : privacy@aperonight.com
+    </p>
+
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Cookies</h2>
+    <p class="text-neutral-700 mb-6">
+      Le site utilise des cookies pour améliorer l'expérience utilisateur. En continuant à utiliser le site, 
+      vous acceptez l'utilisation de ces cookies conformément à notre politique de confidentialité.
+    </p>
+
+    <h2 class="text-2xl font-semibold text-neutral-900 mb-4">Contact</h2>
+    <p class="text-neutral-700 mb-6">
+      Pour toute question concernant le site ou ses mentions légales, vous pouvez nous contacter à l'adresse suivante :<br>
+      <a href="mailto:legal@aperonight.com" class="text-purple-600 hover:text-purple-500">legal@aperonight.com</a>
+    </p>
+  </div>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7fe0603..87ca193 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,37 @@ module.exports = {
     },
     extend: {
       colors: {
+        // Custom theme colors from theme-rules.md
+        purple: {
+          50: '#faf5ff',
+          100: '#f3e8ff',
+          200: '#e9d5ff',
+          300: '#d8b4fe',
+          400: '#c084fc',
+          500: '#a855f7',
+          600: '#9333ea',
+          700: '#7e22ce',
+          800: '#6b21a8',
+          900: '#581c87',
+        },
+        pink: {
+          400: '#f472b6',
+          500: '#ec4899',
+          600: '#db2777',
+        },
+        slate: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        // Existing shadcn colors
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",