diff --git a/app/assets/stylesheets/theme.css b/app/assets/stylesheets/theme.css
index 119ec50..e99a83f 100755
--- a/app/assets/stylesheets/theme.css
+++ b/app/assets/stylesheets/theme.css
@@ -1,10 +1,473 @@
-/* Additional styles for enhanced Aperonight design */
+:root {
+  /* Colors */
+  --color-primary-50: #f5f3ff;
+  --color-primary-100: #ede9fe;
+  --color-primary-200: #ddd6fe;
+  --color-primary-300: #c4b5fd;
+  --color-primary-400: #a78bfa;
+  --color-primary-500: #667eea;
+  --color-primary-600: #667eea;
+  --color-primary-700: #5a6fd8;
+  --color-primary-800: #4e63c6;
+  --color-primary-900: #4257b4;
+
+  --color-accent-50: #fffbeb;
+  --color-accent-100: #fef3c7;
+  --color-accent-200: #fde68a;
+  --color-accent-300: #fcd34d;
+  --color-accent-400: #facc15;
+  --color-accent-500: #facc15;
+  --color-accent-600: #e6c213;
+  --color-accent-700: #d1b811;
+  --color-accent-800: #bdae0f;
+  --color-accent-900: #a8a40d;
+
+  --color-secondary-50: #f0e9f9;
+  --color-secondary-100: #e2d4f3;
+  --color-secondary-200: #c5a9e7;
+  --color-secondary-300: #a87edc;
+  --color-secondary-400: #8b53d0;
+  --color-secondary-500: #764ba2;
+  --color-secondary-600: #764ba2;
+  --color-secondary-700: #68428f;
+  --color-secondary-800: #5a397c;
+  --color-secondary-900: #4c3069;
+
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+
+  --color-success: #10b981;
+  --color-success-light: #d1fae5;
+  --color-success-dark: #047857;
+
+  --color-warning: #f59e0b;
+  --color-warning-light: #fef3c7;
+  --color-warning-dark: #b45309;
+
+  --color-danger: #ef4444;
+  --color-danger-light: #fee2e2;
+  --color-danger-dark: #b91c1c;
+
+  /* Typography */
+  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-display: 'Outfit', var(--font-sans);
+
+  --text-xs: 0.75rem;     /* 12px */
+  --text-sm: 0.875rem;    /* 14px */
+  --text-base: 1rem;      /* 16px */
+  --text-lg: 1.125rem;    /* 18px */
+  --text-xl: 1.25rem;     /* 20px */
+  --text-2xl: 1.5rem;     /* 24px */
+  --text-3xl: 1.875rem;   /* 30px */
+  --text-4xl: 2.25rem;    /* 36px */
+  --text-5xl: 3rem;       /* 48px */
+
+  /* Spacing */
+  --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 */
+  --space-16: 4rem;       /* 64px */
+  --space-20: 5rem;       /* 80px */
+
+  /* Radius */
+  --radius: 0.25rem;      /* 4px */
+  --radius-md: 0.5rem;    /* 8px */
+  --radius-lg: 0.75rem;   /* 12px */
+  --radius-xl: 1rem;      /* 16px */
+  --radius-2xl: 1.5rem;   /* 24px */
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  --shadow-purple-sm: 0 1px 3px 0 rgba(102, 126, 234, 0.1), 0 1px 2px 0 rgba(102, 126, 234, 0.06);
+  --shadow-purple-md: 0 4px 6px -1px rgba(102, 126, 234, 0.1), 0 2px 4px -1px rgba(102, 126, 234, 0.06);
+  --shadow-purple-lg: 0 10px 15px -3px rgba(102, 126, 234, 0.1), 0 4px 6px -2px rgba(102, 126, 234, 0.05);
+
+  /* Transitions */
+  --duration-fast: 150ms;
+  --duration-normal: 300ms;
+  --duration-slow: 500ms;
+
+  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Base styles */
+
+body {
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  color: var(--color-neutral-900);
+  background: var(--color-neutral-50);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: var(--space-2);
+}
+
+h1 {
+  font-size: var(--text-4xl);
+  font-weight: 900;
+}
+
+h2 {
+  font-size: var(--text-3xl);
+  font-weight: 800;
+}
+
+h3 {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+}
+
+h4 {
+  font-size: var(--text-xl);
+  font-weight: 700;
+}
+
+p {
+  margin-bottom: var(--space-4);
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-family: var(--font-display);
+  font-weight: 700;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--radius-lg);
+  transition: all var(--duration-normal) var(--ease-out);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.btn-sm {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+}
+
+.btn-md {
+  padding: var(--space-3) var(--space-6);
+  font-size: var(--text-base);
+}
+
+.btn-lg {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--text-lg);
+}
+
+.btn-primary {
+  background: var(--color-primary-500);
+  color: white;
+  box-shadow: var(--shadow-purple-md);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-600);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-purple-lg);
+}
+
+.btn-secondary {
+  background: var(--color-neutral-800);
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: var(--color-neutral-900);
+  transform: translateY(-2px);
+}
+
+.btn-secondary-alt {
+  background-color: transparent;
+  color: var(--color-gray-700);
+  border: 2px solid var(--color-gray-300);
+}
+
+.btn-secondary-alt:hover {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-900);
+  border-color: var(--color-gray-400);
+}
+
+.btn-accent {
+  background: var(--color-accent-400);
+  color: var(--color-neutral-900);
+  font-weight: 800;
+}
+
+.btn-accent:hover {
+  background: var(--color-accent-500);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn-dark {
+  background: var(--color-neutral-900);
+  color: white;
+}
+
+.btn-dark:hover {
+  background: var(--color-neutral-800);
+  transform: translateY(-2px);
+}
+
+.btn-outline {
+  background: transparent;
+  border: 2px solid var(--color-primary-500);
+  color: var(--color-primary-500);
+}
+
+.btn-outline:hover {
+  background: var(--color-primary-50);
+  transform: translateY(-2px);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-neutral-700);
+}
+
+.btn-ghost:hover {
+  background: var(--color-neutral-100);
+}
+
+/* Form elements */
+.form-group {
+  margin-bottom: var(--space-4);
+}
+
+.form-label {
+  font-family: var(--font-display);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  color: var(--color-neutral-700);
+  margin-bottom: var(--space-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+  background: var(--color-neutral-50);
+  border: 2px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  font-size: var(--text-base);
+  font-weight: 500;
+  color: var(--color-neutral-900);
+  transition: all var(--duration-normal) var(--ease-out);
+  font-family: var(--font-sans);
+  width: 100%;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--color-primary-500);
+  background: white;
+  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+.form-input::placeholder {
+  color: var(--color-neutral-500);
+}
+
+.form-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: var(--space-12);
+}
+
+.form-textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.form-error {
+  color: var(--color-danger);
+  font-size: var(--text-sm);
+  margin-top: var(--space-1);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.focus-ring {
+  transition: all var(--duration-normal) var(--ease-out);
+}
+
+.focus-ring:focus {
+  outline: none;
+  border-color: var(--color-primary-500);
+  background: white;
+  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge-available {
+  background: var(--color-success-light);
+  color: var(--color-success-dark);
+  border: 1px solid var(--color-success);
+}
+
+.badge-limited {
+  background: var(--color-warning-light);
+  color: var(--color-warning-dark);
+  border: 1px solid var(--color-warning);
+}
+
+.badge-sold-out {
+  background: var(--color-danger-light);
+  color: var(--color-danger-dark);
+  border: 1px border var(--color-danger);
+}
+
+.badge-featured {
+  background: var(--color-accent-100);
+  color: var(--color-accent-700);
+  border: 1px solid var(--color-accent-300);
+}
+
+.badge-vip {
+  background: var(--color-primary-100);
+  color: var(--color-primary-800);
+  border: 1px solid var(--color-primary-300);
+}
+
+/* Cards */
+.card {
+  background: white;
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  border: 1px solid var(--color-neutral-200);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--duration-slow) var(--ease-out);
+}
+
+.card.hover-lift:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: var(--shadow-2xl);
+  border-color: var(--color-primary-200);
+}
+
+.card-header {
+  margin-bottom: var(--space-4);
+}
+
+.card-body {
+  margin-bottom: var(--space-4);
+}
+
+.event-card {
+  background: white;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  transition: all var(--duration-slow) var(--ease-out);
+  border: 1px solid var(--color-neutral-200);
+  position: relative;
+}
+
 .event-card.hover-glow:hover {
   transform: translateY(-8px) scale(1.02);
   box-shadow: var(--shadow-2xl);
   border-color: var(--color-primary-200);
 }
 
+/* Navigation */
+.nav {
+  background: white;
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-link {
+  color: var(--color-neutral-700);
+  text-decoration: none;
+  font-weight: 600;
+  padding: var(--space-3) var(--space-2);
+  border-radius: var(--radius);
+  transition: all var(--duration-normal);
+}
+
+.nav-link:hover {
+  color: var(--color-primary-600);
+  background: var(--color-primary-50);
+}
+
+/* Search box */
+.search-box {
+  position: relative;
+  max-width: 400px;
+}
+
+.search-input {
+  padding-left: var(--space-12);
+}
+
+.search-icon {
+  position: absolute;
+  left: var(--space-4);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-neutral-400);
+}
+
+/* Price tags */
 .price-tag {
   display: inline-flex;
   align-items: center;
@@ -25,21 +488,290 @@
   font-size: var(--text-2xl);
 }
 
-.search-box {
+/* Avatars */
+.avatar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  background: var(--color-primary-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: var(--color-primary-600);
+  border: 2px solid white;
+  box-shadow: var(--shadow-sm);
   position: relative;
+}
+
+.avatar-lg {
+  width: 60px;
+  height: 60px;
+}
+
+.avatar-sm {
+  width: 32px;
+  height: 32px;
+  font-size: var(--text-xs);
+}
+
+.avatar-image {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--radius-full);
 }
 
-.search-input {
-  padding-left: var(--space-12);
-}
-
-.search-icon {
+.avatar-status {
   position: absolute;
-  left: var(--space-4);
-  top: 50%;
-  transform: translateY(-50%);
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  border: 2px solid white;
+}
+
+.status-online { background: var(--color-success); }
+.status-offline { background: var(--color-neutral-400); }
+.status-busy { background: var(--color-danger); }
+
+/* Progress bars */
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  margin-bottom: var(--space-3);
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--color-primary-500);
+  border-radius: var(--radius-full);
+  transition: width var(--duration-slow) var(--ease-out);
+}
+
+/* Rating stars */
+.rating {
+  display: flex;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.rating-star {
+  width: 16px;
+  height: 16px;
+  color: var(--color-warning);
+}
+
+.rating-star.filled {
+  fill: currentColor;
+}
+
+.rating-star.empty {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+}
+
+/* Notifications */
+.notification {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-3);
+  font-weight: 500;
+}
+
+.notification-success {
+  background: var(--color-success-light);
+  color: var(--color-success-dark);
+  border: 1px solid var(--color-success);
+}
+
+.notification-warning {
+  background: var(--color-warning-light);
+  color: var(--color-warning-dark);
+  border: 1px solid var(--color-warning);
+}
+
+.notification-error {
+  background: var(--color-danger-light);
+  color: var(--color-danger-dark);
+  border: 1px solid var(--color-danger);
+}
+
+.notification-info {
+  background: var(--color-primary-50);
+  color: var(--color-primary-800);
+  border: 1px solid var(--color-primary-200);
+}
+
+/* Tabs */
+.tabs {
+  border-bottom: 1px solid var(--color-neutral-200);
+  margin-bottom: var(--space-6);
+}
+
+.tab-list {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.tab-button {
+  background: none;
+  border: none;
+  padding: var(--space-3) var(--space-4);
+  font-weight: 500;
+  color: var(--color-neutral-600);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all var(--duration-normal);
+  font-family: var(--font-display);
+}
+
+.tab-button:hover {
+  color: var(--color-primary-600);
+  background: var(--color-primary-50);
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.tab-button.active {
+  color: var(--color-primary-600);
+  border-bottom-color: var(--color-primary-600);
+}
+
+.tab-content {
+  display: none;
+  padding: var(--space-4) 0;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Tooltips */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-content {
+  position: absolute;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-neutral-900);
+  color: white;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--duration-normal);
+  z-index: 100;
+}
+
+.tooltip-content::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--color-neutral-900);
+}
+
+.tooltip:hover .tooltip-content {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Loading states */
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-neutral-200);
+  border-top-color: var(--color-primary-600);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+}
+
+.loading-dots {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.loading-dot {
+  width: 8px;
+  height: 8px;
+  background: var(--color-primary-600);
+  border-radius: var(--radius-full);
+  animation: bounce 1.4s infinite both;
+}
+
+.loading-dot:nth-child(2) { animation-delay: 0.2s; }
+.loading-dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+/* Breadcrumbs */
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  background: white;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-neutral-100);
+  margin-bottom: var(--space-8);
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.breadcrumb-link {
+  color: var(--color-neutral-700);
+  text-decoration: none;
+  transition: all var(--duration-fast) var(--ease-out);
+}
+
+.breadcrumb-link:hover {
+  color: var(--color-primary-600);
+}
+
+.breadcrumb-current {
+  color: var(--color-primary-600);
+  font-weight: var(--font-medium);
+}
+
+.breadcrumb-separator {
   color: var(--color-neutral-400);
+  width: var(--space-4);
+  height: var(--space-4);
 }
 
 /* Hero section */
@@ -213,4 +945,79 @@
 .card-event-description {
   color: var(--color-neutral-500);
   line-height: 1.5;
+}
+
+/* Additional styles for enhanced Aperonight design */
+.event-card.hover-glow:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: var(--shadow-2xl);
+  border-color: var(--color-primary-200);
+}
+
+.price-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-display);
+  font-weight: 800;
+}
+
+.price-tag-sm {
+  font-size: var(--text-sm);
+}
+
+.price-tag-md {
+  font-size: var(--text-lg);
+}
+
+.price-tag-lg {
+  font-size: var(--text-2xl);
+}
+
+.search-box {
+  position: relative;
+  width: 100%;
+}
+
+.search-input {
+  padding-left: var(--space-12);
+}
+
+.search-icon {
+  position: absolute;
+  left: var(--space-4);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-neutral-400);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 var(--space-3);
+  }
+
+  h1 {
+    font-size: var(--text-3xl);
+  }
+
+  h2 {
+    font-size: var(--text-2xl);
+  }
+
+  .btn-lg {
+    padding: var(--space-3) var(--space-6);
+    font-size: var(--text-base);
+  }
+
+  .btn-md {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+  }
+
+  .form-input,
+  .form-select,
+  .form-textarea {
+    padding: var(--space-3);
+  }
 }
\ No newline at end of file
diff --git a/app/views/components/_breadcrumb.html.erb b/app/views/components/_breadcrumb.html.erb
new file mode 100644
index 0000000..4f96a47
--- /dev/null
+++ b/app/views/components/_breadcrumb.html.erb
@@ -0,0 +1,31 @@
+<%# Dynamic breadcrumb navigation component %>
+<%# Usage: render 'components/breadcrumb', crumbs: [ %>
+<%#   { name: 'Home', path: root_path }, %>
+<%#   { name: 'Events', path: events_path }, %>
+<%#   { name: 'Current Event', path: nil } %>
+<%# ] %>
+
+<!-- Breadcrumb -->
+<nav class="inline-flex items-center gap-2 bg-white px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-8" aria-label="Breadcrumb">
+  <% crumbs.each_with_index do |crumb, index| %>
+    <% if crumb[:path].present? %>
+      <%# Crumb with link %>
+      <%= link_to crumb[:path], class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200" do %>
+        <% if index == 0 %>
+          <i data-lucide="home" class="w-4 h-4 mr-2"></i>
+        <% end %>
+        <%= crumb[:name] %>
+      <% end %>
+    <% else %>
+      <%# Current page (no link) %>
+      <span class="text-sm font-medium text-primary-600 truncate max-w-xs" aria-current="page">
+        <%= crumb[:name] %>
+      </span>
+    <% end %>
+    
+    <%# Separator (except for the last item) %>
+    <% if index < crumbs.length - 1 %>
+      <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+    <% end %>
+  <% end %>
+</nav>
\ No newline at end of file
diff --git a/app/views/events/show.html.erb b/app/views/events/show.html.erb
index e96af24..ea06b41 100755
--- a/app/views/events/show.html.erb
+++ b/app/views/events/show.html.erb
@@ -1,210 +1,115 @@
-  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <!-- Breadcrumb -->
-      <nav class="flex mb-6" aria-label="Breadcrumb">
-        <ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
-          <li class="inline-flex items-center">
-            <%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
-          </li>
-          <li>
-            <div class="flex items-center">
-              <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-              </svg>
-              <%= link_to "Événements", events_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
-            </div>
-          </li>
-          <li>
-            <div class="flex items-center">
-              <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-              </svg>
-              <span class="ml-1 text-sm font-medium text-purple-600 md:ml-2 truncate max-w-xs"><%= @event.name %></span>
-            </div>
-          </li>
-        </ol>
-      </nav>
+<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- Breadcrumb -->
+    <%= render 'components/breadcrumb', crumbs: [
+      { name: 'Accueil', path: root_path },
+      { name: 'Événements', path: events_path },
+      { name: @event.name, path: nil }
+    ] %>
 
-      <!-- Event main wrapper -->
-      <div class="bg-white rounded-xl shadow-xl overflow-hidden">
-        <!-- Event Header with Image -->
-        <% if @event.image.present? %>
-          <div class="relative h-96">
-            <%= image_tag @event.image, class: "w-full h-full object-cover" %>
-            <div
-              class="
-                absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent
-              "
-            ></div>
-            <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
-              <div class="max-w-4xl mx-auto">
-                <h1 class="text-3xl md:text-4xl font-bold text-white mb-2 text-center md:text-left"><%= @event.name %></h1>
+    <!-- Event main wrapper -->
+    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+      <!-- Event Header with Image -->
+      <% if @event.image.present? %>
+        <div class="relative h-96">
+          <%= image_tag @event.image, class: "w-full h-full object-cover" %>
+          <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
+            <div class="max-w-4xl mx-auto">
+              <h1 class="text-3xl md:text-4xl font-bold text-white mb-2 text-center md:text-left"><%= @event.name %></h1>
+            </div>
+          </div>
+        </div>
+      <% else %>
+        <div class="bg-gradient-to-r from-purple-600 to-indigo-700 p-8">
+          <h1 class="text-3xl md:text-4xl font-bold text-white mb-4"><%= @event.name %></h1>
+          <div class="flex flex-wrap items-center gap-4 text-white/90">
+            <div class="flex items-center">
+              <i data-lucide="map-pin" class="w-5 h-5 mr-2 text-purple-200"></i>
+              <span><%= @event.venue_name %></span>
+            </div>
+            <div class="flex items-center">
+              <i data-lucide="clock" class="w-5 h-5 mr-2 text-purple-200"></i>
+              <span><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <!-- Event Content -->
+      <div class="p-6 md:p-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <!-- Left Column: Event Details -->
+          <div class="lg:col-span-2">
+            <div class="mb-8">
+              <h2 class="text-2xl font-bold text-gray-900 mb-4">Description</h2>
+              <div class="prose max-w-none text-gray-700">
+                <p class="text-lg leading-relaxed"><%= @event.description %></p>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+              <div class="bg-gray-50 rounded-xl p-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                  <i data-lucide="map-pin" class="w-5 h-5 mr-2 text-purple-600"></i>
+                  Lieu
+                </h3>
+                <p class="text-gray-700 font-medium"><%= @event.venue_name %></p>
+                <p class="text-gray-600 mt-1"><%= @event.venue_address %></p>
+              </div>
+
+              <div class="bg-gray-50 rounded-xl p-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                  <i data-lucide="clock" class="w-5 h-5 mr-2 text-purple-600"></i>
+                  Date & Heure
+                </h3>
+                <p class="text-gray-700 font-medium"><%= @event.start_time.strftime("%A %d %B %Y") %></p>
+                <p class="text-gray-600 mt-1">À <%= @event.start_time.strftime("%H:%M") %></p>
+              </div>
+            </div>
+
+            <div class="mb-8 bg-gray-50 rounded-xl p-6">
+              <h3 class="text-lg font-semibold text-gray-900 mb-4">Organisateur</h3>
+              <div class="flex items-center">
+                <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">
+                  <%= @event.user.email.first.upcase %>
+                </div>
+                <div class="ml-4">
+                  <% if @event.user.first_name.present? && @event.user.last_name.present? %>
+                    <p class="font-medium text-gray-900"><%= @event.user.first_name %> <%= @event.user.last_name %></p>
+                  <% else %>
+                    <p class="font-medium text-gray-900"><%= @event.user.email.split("@").first %></p>
+                  <% end %>
+                  <% if @event.user.company_name.present? %>
+                    <p class="text-sm text-gray-500"><%= @event.user.company_name %></p>
+                  <% end %>
+                </div>
               </div>
             </div>
           </div>
-        <% else %>
-          <div class="bg-gradient-to-r from-purple-600 to-indigo-700 p-8">
-            <h1 class="text-3xl md:text-4xl font-bold text-white mb-4"><%= @event.name %></h1>
-            <div class="flex flex-wrap items-center gap-4 text-white/90">
-              <div class="flex items-center">
-                <svg
-                  class="w-5 h-5 mr-2 text-purple-200"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                  ></path>
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                  ></path>
-                </svg>
-                <span><%= @event.venue_name %></span>
-              </div>
-              <div class="flex items-center">
-                <svg
-                  class="w-5 h-5 mr-2 text-purple-200"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <span><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></span>
-              </div>
-            </div>
-          </div>
-        <% end %>
-        <!-- Event Content -->
-        <div class="p-6 md:p-8">
-          <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Left Column: Event Details -->
-            <div class="lg:col-span-2">
-              <div class="mb-8">
-                <h2 class="text-2xl font-bold text-gray-900 mb-4">Description</h2>
-                <div class="prose max-w-none text-gray-700">
-                  <p class="text-lg leading-relaxed"><%= @event.description %></p>
-                </div>
-              </div>
 
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-                <div class="bg-gray-50 rounded-xl p-6">
-                  <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
-                    <svg
-                      class="w-5 h-5 mr-2 text-purple-600"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                      ></path>
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                      ></path>
-                    </svg>
-                    Lieu
-                  </h3>
-                  <p class="text-gray-700 font-medium"><%= @event.venue_name %></p>
-                  <p class="text-gray-600 mt-1"><%= @event.venue_address %></p>
-                </div>
-
-                <div class="bg-gray-50 rounded-xl p-6">
-                  <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
-                    <svg
-                      class="w-5 h-5 mr-2 text-purple-600"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      ></path>
-                    </svg>
-                    Date & Heure
-                  </h3>
-                  <p class="text-gray-700 font-medium"><%= @event.start_time.strftime("%A %d %B %Y") %></p>
-                  <p class="text-gray-600 mt-1">À
-                    <%= @event.start_time.strftime("%H:%M") %></p>
-                </div>
-              </div>
-
-              <div class="mb-8 bg-gray-50 rounded-xl p-6">
-                <h3 class="text-lg font-semibold text-gray-900 mb-4">Organisateur</h3>
-                <div class="flex items-center">
-                  <div
-                    class="
-                      w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex
-                      items-center justify-center text-white font-bold
-                    "
-                  >
-                    <%= @event.user.email.first.upcase %>
-                  </div>
-                  <div class="ml-4">
-                    <% if @event.user.first_name.present? && @event.user.last_name.present? %>
-                      <p class="font-medium text-gray-900"><%= @event.user.first_name %>
-                        <%= @event.user.last_name %></p>
-                    <% else %>
-                      <p class="font-medium text-gray-900"><%= @event.user.email.split("@").first %></p>
-                    <% end %>
-                    <% if @event.user.company_name.present? %>
-                      <p class="text-sm text-gray-500"><%= @event.user.company_name %></p>
-                    <% end %>
-                  </div>
-                </div>
-              </div>
-            </div><!-- Left Column: Event Details -->
-
-            <!-- Right Column: Ticket Selection -->
-            <div class="lg:col-span-1">
-              <%= form_with url: event_order_new_path(@event.slug, @event.id), method: :get, id: "checkout_form", local: true, data: {
+          <!-- Right Column: Ticket Selection -->
+          <div class="lg:col-span-1">
+            <%= form_with url: event_order_new_path(@event.slug, @event.id), method: :get, id: "checkout_form", local: true, data: {
               controller: "ticket-selection",
               ticket_selection_target: "form",
               ticket_selection_event_slug_value: @event.slug,
               ticket_selection_event_id_value: @event.id
             } do |form| %>
 
-              <div class="">
-                <div
-                  class="
-                    bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl border
-                    border-purple-100 p-6 shadow-sm
-                  "
-                >
-                  <div class="flex justify-center sm:justify-start mb-6">
-                    <h2 class="text-lg font-bold text-gray-900">Billets disponibles</h2>
-                  </div>
+              <div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl border border-purple-100 p-6 shadow-sm">
+                <div class="flex justify-center sm:justify-start mb-6">
+                  <h2 class="text-lg font-bold text-gray-900">Billets disponibles</h2>
+                </div>
 
-                  <div class="">
+                <div class="">
                   <% if @event.ticket_types.any? %>
                     <div class="space-y-4 mb-6">
                       <% @event.ticket_types.each do |ticket_type| %>
                         <% sold_out = ticket_type.quantity <= ticket_type.tickets.count %>
                         <% remaining = ticket_type.quantity - ticket_type.tickets.count %>
 
-                        <%= render "components/ticket_card",
-                        {
+                        <%= render "components/ticket_card", {
                           id: ticket_type.id,
                           name: ticket_type.name,
                           description: ticket_type.description,
@@ -217,24 +122,12 @@
                     </div>
                   <% else %>
                     <div class="text-center py-8">
-                      <svg
-                        class="w-12 h-12 mx-auto text-gray-400"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
-                        />
-                      </svg>
+                      <i data-lucide="ticket" class="w-12 h-12 mx-auto text-gray-400"></i>
                       <h3 class="mt-4 text-lg font-medium text-gray-900">Aucun billet disponible</h3>
-                      <p class="mt-2 text-gray-500">Les billets pour cet événement ne sont pas encore
-                        disponibles ou sont épuisés.</p>
+                      <p class="mt-2 text-gray-500">Les billets pour cet événement ne sont pas encore disponibles ou sont épuisés.</p>
                     </div>
                   <% end %>
+
                   <!-- Cart Summary -->
                   <div class="border-t border-gray-200 pt-6 mt-6">
                     <div class="flex justify-between items-center mb-2">
@@ -245,17 +138,16 @@
                       <span class="text-gray-600">Montant total :</span>
                       <span class="text-xl font-bold text-purple-700" data-ticket-selection-target="totalAmount">€0.00</span>
                     </div>
-                    <%= form.submit "Procéder au paiement",
+                    <%= form.button "Procéder au paiement", type: "submit",
                       data: { ticket_selection_target: "checkoutButton" },
-                      class: "w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium py-3 px-4 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 flex items-center justify-center opacity-50 cursor-not-allowed",
-                      disabled: true %>
+                      class: "w-full btn btn-primary py-3 px-4 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 flex items-center justify-center opacity-50 cursor-not-allowed" %>
                   </div>
                 </div>
               </div>
-              <% end %>
-            </div><!-- Right Column: Ticket Selection -->
+            <% end %>
           </div>
         </div>
       </div>
     </div>
   </div>
+</div>
\ No newline at end of file
diff --git a/app/views/orders/invoice.html.erb b/app/views/orders/invoice.html.erb
index af7a0f3..4c9e28c 100644
--- a/app/views/orders/invoice.html.erb
+++ b/app/views/orders/invoice.html.erb
@@ -1,37 +1,12 @@
 <div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-8">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Breadcrumb -->
-    <nav class="flex mb-6" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
-        <li class="inline-flex items-center">
-          <%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <%= link_to "Tableau de bord", dashboard_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
-          </div>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <%= link_to "Commande ##{@order.id}", order_path(@order), class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
-          </div>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Facture</span>
-          </div>
-        </li>
-      </ol>
-    </nav>
+    <%= render 'components/breadcrumb', crumbs: [
+      { name: 'Accueil', path: root_path },
+      { name: 'Tableau de bord', path: dashboard_path },
+      { name: "Commande ##{@order.id}", path: order_path(@order) },
+      { name: 'Facture', path: nil }
+    ] %>
 
     <!-- Invoice Header -->
     <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8">
@@ -43,9 +18,7 @@
         <div class="mt-4 md:mt-0">
           <% if @stripe_invoice_pdf_url %>
             <%= link_to @stripe_invoice_pdf_url, target: "_blank", class: "inline-flex items-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors" do %>
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
+              <i data-lucide="download" class="w-4 h-4 mr-2"></i>
               Télécharger la facture (PDF)
             <% end %>
           <% end %>
@@ -92,18 +65,13 @@
           <div class="mt-2 space-y-1 text-sm text-indigo-700">
             <% if @order.event.start_time %>
               <div class="flex items-center">
-                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
+                <i data-lucide="clock" class="w-4 h-4 mr-2"></i>
                 <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
               </div>
             <% end %>
             <% if @order.event.venue_name.present? %>
               <div class="flex items-center">
-                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
+                <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
                 <%= @order.event.venue_name %>
               </div>
             <% end %>
@@ -158,9 +126,7 @@
         <h3 class="text-lg font-semibold text-gray-900 mb-3">Paiement</h3>
         <div class="flex items-center">
           <div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-            </svg>
+            <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
           </div>
           <div class="ml-4">
             <h4 class="font-medium text-gray-900">Paiement effectué</h4>
diff --git a/app/views/orders/show.html.erb b/app/views/orders/show.html.erb
index 11eb37d..6950b66 100644
--- a/app/views/orders/show.html.erb
+++ b/app/views/orders/show.html.erb
@@ -1,36 +1,16 @@
 <div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-8">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Breadcrumb -->
-    <nav class="flex mb-6" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
-        <li class="inline-flex items-center">
-          <%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <%= link_to "Tableau de bord", dashboard_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
-          </div>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Commande #<%= @order.id %></span>
-          </div>
-        </li>
-      </ol>
-    </nav>
+    <%= render 'components/breadcrumb', crumbs: [
+      { name: 'Accueil', path: root_path },
+      { name: 'Tableau de bord', path: dashboard_path },
+      { name: "Commande ##{@order.id}", path: nil }
+    ] %>
 
     <!-- Header -->
     <div class="text-center mb-8">
       <div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
-        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-        </svg>
+        <i data-lucide="file-text" class="w-8 h-8 text-purple-600"></i>
       </div>
       <h1 class="text-3xl font-bold text-gray-900 mb-2">Détails de la Commande</h1>
     </div>
@@ -41,22 +21,14 @@
           <h2 class="text-2xl font-bold text-gray-900 mb-2">Informations</h2>
           <div class="flex items-center text-sm text-gray-600 space-x-4">
             <div class="flex items-center">
-              <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-              </svg>
+              <i data-lucide="file-text" class="w-4 h-4 mr-2 flex-shrink-0"></i>
               <div class="flex flex-col">
                 <span class="font-medium">Commande n°<%= @order.id %></span>
                 <span class="text-xs text-gray-500"><%= @order.created_at.strftime("%d %B %Y") %></span>
               </div>
             </div>
             <div class="flex items-center">
-              <svg class="w-4 h-4 mr-1 <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <% if @order.status == 'paid' || @order.status == 'completed' %>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-                <% else %>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                <% end %>
-              </svg>
+              <i data-lucide="<%= @order.status == 'paid' || @order.status == 'completed' ? 'check-circle' : 'clock' %>" class="w-4 h-4 mr-1 <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %>"></i>
               <span class="<%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %> font-medium">
                 <%= case @order.status
                     when 'paid' then 'Payé'
@@ -76,26 +48,19 @@
             <div class="mt-2 space-y-1 text-sm text-purple-700">
               <% if @order.event.start_time %>
                 <div class="flex items-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                  </svg>
+                  <i data-lucide="clock" class="w-4 h-4 mr-2"></i>
                   <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
                 </div>
               <% end %>
               <% if @order.event.venue_name.present? %>
                 <div class="flex items-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
-                  </svg>
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
                   <%= @order.event.venue_name %>
                 </div>
               <% end %>
               <% if @order.event.venue_address.present? %>
                 <div class="flex items-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
-                  </svg>
+                  <i data-lucide="navigation" class="w-4 h-4 mr-2"></i>
                   <%= @order.event.venue_address %>
                 </div>
               <% end %>
@@ -112,16 +77,12 @@
               <div class="flex-1 min-w-0">
                 <h4 class="text-sm font-medium text-gray-900 truncate"><%= ticket.ticket_type.name %></h4>
                 <div class="flex items-center text-xs text-gray-500 mt-1">
-                  <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
-                  </svg>
+                  <i data-lucide="user" class="w-3 h-3 mr-1"></i>
                   <%= ticket.first_name %> <%= ticket.last_name %>
                 </div>
                 <% if @order.status == 'paid' || @order.status == 'completed' %>
                   <div class="flex items-center text-xs text-green-600 mt-1">
-                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-                    </svg>
+                    <i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>
                     Actif
                   </div>
                 <% end %>
@@ -158,18 +119,14 @@
           <div class="border-t border-gray-200 pt-6 mt-6">
             <div class="flex items-start">
               <div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                </svg>
+                <i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i>
               </div>
               <div class="ml-4">
                 <h3 class="font-semibold text-gray-900 mb-1">Consulter la Facture</h3>
                 <p class="text-gray-600 text-sm mb-3">Téléchargez ou consultez la facture de votre commande.</p>
                 <div class="mt-2">
                   <%= link_to invoice_order_path(@order), class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors" do %>
-                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                    </svg>
+                    <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                     Voir la facture
                   <% end %>
                 </div>
@@ -192,9 +149,7 @@
             <!-- Download Tickets -->
             <div class="flex items-start">
               <div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
-                <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                </svg>
+                <i data-lucide="download" class="w-4 h-4 text-purple-600"></i>
               </div>
               <div class="ml-4">
                 <h3 class="font-semibold text-gray-900 mb-1">Télécharger Vos Billets</h3>
@@ -209,9 +164,7 @@
                         <%= ticket.first_name %> <%= ticket.last_name %>
                       <% end %>
                       <%= link_to ticket_download_path(ticket.qr_code), class: "ml-3 p-2 text-purple-600 hover:text-purple-800 hover:bg-purple-200 rounded-lg transition-colors", title: "Télécharger le billet PDF" do %>
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                        </svg>
+                        <i data-lucide="download" class="w-4 h-4"></i>
                       <% end %>
                     </div>
                   <% end %>
@@ -222,9 +175,7 @@
             <!-- Event Day -->
             <div class="flex items-start">
               <div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <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"/>
-                </svg>
+                <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
               </div>
               <div class="ml-4">
                 <h3 class="font-semibold text-gray-900 mb-1">Le Jour de l'Événement</h3>
@@ -243,9 +194,7 @@
             <div class="mb-6">
               <%= link_to checkout_order_path(@order), class: "block w-full text-center py-3 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors" do %>
                 <div class="flex items-center justify-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
-                  </svg>
+                  <i data-lucide="credit-card" class="w-4 h-4 mr-2"></i>
                   Procéder au Paiement
                 </div>
               <% end %>
@@ -258,17 +207,13 @@
           <div class="space-y-3">
             <%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %>
               <div class="flex items-center justify-center">
-                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
-                </svg>
+                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                 Retour au tableau de bord
               </div>
             <% end %>
             <%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
               <div class="flex items-center justify-center">
-                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                </svg>
+                <i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
                 Voir la page d'évenement
               </div>
             <% end %>
@@ -277,4 +222,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/tickets/show.html.erb b/app/views/tickets/show.html.erb
index 840c3c2..94da8ac 100644
--- a/app/views/tickets/show.html.erb
+++ b/app/views/tickets/show.html.erb
@@ -1,37 +1,12 @@
 <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Breadcrumb -->
-    <nav class="flex mb-6" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
-        <li class="inline-flex items-center">
-          <%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <%= link_to "Tableau de bord", dashboard_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
-          </div>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <%= link_to "Commande ##{@order.id}", order_path(@order), class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
-          </div>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            <span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Billet #<%= @ticket.id %></span>
-          </div>
-        </li>
-      </ol>
-    </nav>
+    <%= render 'components/breadcrumb', crumbs: [
+      { name: 'Accueil', path: root_path },
+      { name: 'Tableau de bord', path: dashboard_path },
+      { name: "Commande ##{@order.id}", path: order_path(@order) },
+      { name: "Billet ##{@ticket.id}", path: nil }
+    ] %>
 
     <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
       <!-- Ticket Header -->
@@ -42,7 +17,7 @@
             <p class="text-purple-100">ID: #<%= @ticket.id %></p>
           </div>
           <div class="text-right">
-            <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
+            <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%= 
               case @ticket.status
               when 'active' then 'bg-green-100 text-green-800'
               when 'draft' then 'bg-yellow-100 text-yellow-800'
@@ -51,7 +26,7 @@
               when 'refunded' then 'bg-blue-100 text-blue-800'
               else 'bg-gray-100 text-gray-800'
               end %>">
-              <%=
+              <%= 
               case @ticket.status
               when 'active' then 'Valide'
               when 'draft' then 'En attente'
@@ -81,9 +56,7 @@
                 <div>
                   <label class="block text-sm font-medium text-gray-500 mb-1">Date et heure</label>
                   <div class="flex items-center text-gray-900">
-                    <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                    </svg>
+                    <i data-lucide="calendar" class="w-4 h-4 mr-2 text-gray-400"></i>
                     <%= @event.start_time.strftime("%d %B %Y") %><br>
                     <small class="text-gray-600"><%= @event.start_time.strftime("%H:%M") %></small>
                   </div>
@@ -92,10 +65,7 @@
                 <div>
                   <label class="block text-sm font-medium text-gray-500 mb-1">Lieu</label>
                   <div class="flex items-center text-gray-900">
-                    <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
-                    </svg>
+                    <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-gray-400"></i>
                     <%= @event.venue_name %>
                   </div>
                 </div>
@@ -163,18 +133,14 @@
           <div class="flex flex-col sm:flex-row gap-4">
             <%= link_to order_path(@order),
                         class: "px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-center font-medium transition-colors duration-200" do %>
-              <svg class="w-4 h-4 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
-              </svg>
+              <i data-lucide="arrow-left" class="w-4 h-4 inline-block mr-2"></i>
               Retour aux informations de commande
             <% end %>
 
             <% if @ticket.status == 'active' %>
               <%= link_to ticket_download_path(@ticket.qr_code),
-                          class: "flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5 text-center" do %>
-                <svg class="w-4 h-4 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                </svg>
+                          class: "flex-1 btn btn-primary py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5 text-center" do %>
+                <i data-lucide="download" class="w-4 h-4 inline-block mr-2"></i>
                 Télécharger le PDF
               <% end %>
             <% end %>
@@ -184,9 +150,7 @@
         <!-- Important Notice -->
         <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
           <div class="flex items-start">
-            <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-            </svg>
+            <i data-lucide="info" class="w-5 h-5 text-blue-600 mr-2 mt-0.5"></i>
             <div class="flex-1">
               <h3 class="text-blue-800 font-medium mb-1">Informations importantes</h3>
               <ul class="text-blue-700 text-sm space-y-1">
@@ -200,4 +164,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file