diff --git a/static/css/style.css b/static/css/style.css
index 4883542..23fb764 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,13 +3,17 @@
     --bg-dark: #0b0b14;
     --bg-card: #161625;
     --primary: #00d9ff;
+    --primary-hover: #00b8d9;
     --primary-glow: rgba(0, 217, 255, 0.3);
     --secondary: #ff6b6b;
+    --secondary-hover: #e55a5a;
     --text-main: #ffffff;
     --text-dim: #a0a0b0;
     --accent: #00ff88;
+    --danger: #ff4d4d;
     --card-radius: 12px;
-    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --input-radius: 8px;
+    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 * {
@@ -36,7 +40,7 @@ body {
     .container { padding: 0 20px; }
 }
 
-/* Header & Typography */
+/* Typography */
 h1 {
     font-size: 2.5rem;
     font-weight: 800;
@@ -47,6 +51,12 @@ h1 {
     -webkit-text-fill-color: transparent;
 }
 
+.subtitle {
+    color: var(--text-dim);
+    font-size: 1.1rem;
+    margin-bottom: 30px;
+}
+
 .section-header {
     display: flex;
     justify-content: space-between;
@@ -61,6 +71,105 @@ h1 {
     padding-left: 15px;
 }
 
+/* Global Button System */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border-radius: var(--input-radius);
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    border: 1px solid transparent;
+    text-decoration: none;
+    color: #fff;
+    white-space: nowrap;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: #000;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--primary-hover);
+    box-shadow: 0 0 15px var(--primary-glow);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: var(--text-main);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.btn-accent {
+    background: var(--accent);
+    color: #000;
+}
+
+.btn-danger {
+    background: rgba(255, 77, 77, 0.15);
+    border-color: rgba(255, 77, 77, 0.3);
+    color: var(--danger);
+}
+
+.btn-danger:hover:not(:disabled) {
+    background: var(--danger);
+    color: #fff;
+}
+
+.btn-small, .btn-sm {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+}
+
+.btn-xs {
+    padding: 4px 8px;
+    font-size: 0.75rem;
+}
+
+.btn-large {
+    padding: 14px 28px;
+    font-size: 1rem;
+}
+
+.btn-block {
+    display: flex;
+    width: 100%;
+}
+
+.btn-circle {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    padding: 0;
+    font-size: 1.2rem;
+}
+
+/* Legacy class mapping for compatibility */
+.btn-card {
+    padding: 8px 4px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+.btn-watch { background: var(--primary); color: #000; }
+.btn-download { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
+
 /* Horizontal Rows (Netflix Style) */
 .streaming-row {
     display: flex;
@@ -106,7 +215,7 @@ h1 {
 
 .anime-poster {
     position: relative;
-    padding-top: 150%; /* standard anime poster ratio */
+    padding-top: 150%;
     background: #000;
 }
 
@@ -150,21 +259,6 @@ h1 {
     justify-content: center;
 }
 
-.btn-circle {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    background: var(--primary);
-    color: #000;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    font-size: 1.2rem;
-    box-shadow: 0 4px 15px var(--primary-glow);
-}
-
 /* Info Area */
 .anime-info {
     padding: 12px;
@@ -198,7 +292,7 @@ h1 {
     color: var(--text-dim);
 }
 
-/* Action Buttons (The fix for text overflow) */
+/* Action Buttons Grid */
 .anime-card-buttons {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -206,64 +300,23 @@ h1 {
     margin-bottom: 10px;
 }
 
-.btn-card {
-    padding: 8px 4px;
-    border-radius: 6px;
-    font-size: 0.7rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    transition: var(--transition);
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.btn-card i { font-size: 0.8rem; }
-
-.btn-watch { background: var(--primary); color: #000; }
-.btn-download { background: #2a2a3a; color: #fff; border: 1px solid #444; }
-
-.btn-watch:hover { background: #fff; }
-.btn-download:hover { border-color: #fff; }
-
-.btn-add-watchlist {
-    width: 100%;
-    padding: 8px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--text-dim);
-    font-size: 0.75rem;
-    font-weight: 600;
-    border-radius: 6px;
-    cursor: pointer;
-}
-
-.btn-add-watchlist:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-}
-
 .btn-add-watchlist.followed {
     border-color: var(--accent);
     color: var(--accent);
     background: rgba(0, 255, 136, 0.1);
 }
 
-/* Tabs & UI */
+/* Tabs UI */
 .tabs {
     display: flex;
-    gap: 30px;
+    gap: 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     margin-bottom: 30px;
+    overflow-x: auto;
 }
 
 .tab {
-    padding: 15px 0;
+    padding: 15px 10px;
     background: none;
     border: none;
     color: var(--text-dim);
@@ -271,6 +324,19 @@ h1 {
     cursor: pointer;
     position: relative;
     transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+}
+
+.tab svg {
+    width: 18px;
+    height: 18px;
+}
+
+.tab:hover {
+    color: var(--text-main);
 }
 
 .tab.active {
@@ -287,31 +353,296 @@ h1 {
     box-shadow: 0 0 10px var(--primary-glow);
 }
 
-/* Forms */
+/* Modern Forms & Input Groups */
 .input-group {
     display: flex;
-    background: rgba(0, 0, 0, 0.4);
-    border-radius: 12px;
-    padding: 5px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: var(--card-radius);
+    padding: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: var(--transition);
+}
+
+.input-group:focus-within {
+    border-color: var(--primary);
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 0 15px rgba(0, 217, 255, 0.1);
 }
 
 .input-group input {
     background: none;
     border: none;
-    padding: 12px 20px;
+    padding: 10px 15px;
     color: #fff;
     flex-grow: 1;
+    font-size: 1rem;
 }
 
 .input-group input:focus { outline: none; }
 
 .btn-search {
-    background: var(--primary);
-    color: #000;
-    border-radius: 8px;
     padding: 0 25px;
-    font-weight: 700;
+}
+
+/* Auth Section UI */
+.auth-panel {
+    margin-bottom: 25px;
+    padding: 15px 20px;
+    background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), transparent);
+    border: 1px solid rgba(0, 217, 255, 0.15);
+    border-radius: var(--card-radius);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.auth-container {
+    max-width: 450px;
+    margin: 80px auto;
+    padding: 40px;
+    background: var(--bg-card);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+}
+
+.auth-title {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.auth-tabs {
+    display: flex;
+    margin-bottom: 30px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.auth-tab {
+    flex: 1;
+    padding: 15px;
+    text-align: center;
+    cursor: pointer;
+    color: var(--text-dim);
+    transition: var(--transition);
+    font-weight: 600;
+}
+
+.auth-tab.active {
+    color: var(--primary);
+    border-bottom: 2px solid var(--primary);
+}
+
+.auth-form {
+    display: none;
+}
+
+.auth-form.active {
+    display: block;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 12px 15px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--input-radius);
+    color: #fff;
+    font-size: 1rem;
+    transition: var(--transition);
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary);
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
+}
+
+.auth-error, .auth-success {
+    padding: 12px 15px;
+    border-radius: var(--input-radius);
+    margin-bottom: 20px;
+    font-size: 0.9rem;
+    display: none;
+}
+
+.auth-error {
+    background: rgba(255, 77, 77, 0.1);
+    border: 1px solid rgba(255, 77, 77, 0.3);
+    color: var(--danger);
+}
+
+.auth-success {
+    background: rgba(0, 255, 136, 0.1);
+    border: 1px solid rgba(0, 255, 136, 0.3);
+    color: var(--accent);
+}
+
+.show { display: block !important; }
+
+/* Progress Bars */
+.progress-container {
+    height: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    margin: 10px 0;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), var(--accent));
+    transition: width 0.3s ease;
+}
+
+/* Icon Buttons */
+.btn-icon {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-main);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.btn-icon:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.btn-icon.danger {
+    color: var(--danger);
+}
+
+.btn-icon.danger:hover {
+    background: rgba(255, 77, 77, 0.15);
+    border-color: rgba(255, 77, 77, 0.3);
+}
+
+.btn-icon.success {
+    color: var(--accent);
+}
+
+.btn-icon.success:hover {
+    background: rgba(0, 255, 136, 0.15);
+    border-color: rgba(0, 255, 136, 0.3);
+}
+
+/* Download Items */
+.downloads-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+}
+
+.download-item {
+    background: var(--bg-card);
+    border-radius: var(--card-radius);
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: var(--transition);
+}
+
+.download-item:hover {
+    border-color: var(--primary);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.download-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 15px;
+    margin-bottom: 12px;
+}
+
+.download-name {
+    font-weight: 600;
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+}
+
+.download-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+}
+
+.download-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+    justify-content: flex-end;
+}
+
+/* Badge System Enhancements */
+.badge-completed { color: var(--accent); background: rgba(0, 255, 136, 0.1); }
+.badge-failed { color: var(--danger); background: rgba(255, 77, 77, 0.1); }
+.badge-downloading { color: var(--primary); background: rgba(0, 217, 255, 0.1); }
+.badge-paused { color: #ffcc00; background: rgba(255, 204, 0, 0.1); }
+
+/* Loading Spinners & Empty States */
+.loading-placeholder, .loading-spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: var(--text-dim);
+    gap: 15px;
+}
+
+.spinner {
+    width: 30px;
+    height: 30px;
+    border: 3px solid rgba(0, 217, 255, 0.1);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.empty-state, .no-results {
+    text-align: center;
+    padding: 80px 20px;
+    color: var(--text-dim);
+}
+
+.empty-state i, .no-results i {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+    display: block;
+    opacity: 0.15;
+}
+
+/* Section Containers */
+.section-container {
+    margin-bottom: 50px;
 }
 
 /* Responsive Grid for Search */
@@ -324,6 +655,34 @@ h1 {
 @media (max-width: 768px) {
     .anime-card { flex: 0 0 160px; }
     .anime-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
-    .btn-card span { display: none; } /* Hide text on very small screens, keep icons */
+    .btn-card span { display: none; }
     .btn-card { padding: 10px; }
+    .tabs { gap: 10px; }
+    .auth-panel { flex-direction: column; gap: 15px; text-align: center; }
+}
+
+/* Alerts & Toasts */
+.toast-container {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 9999;
+}
+
+.toast {
+    padding: 15px 25px;
+    background: var(--bg-card);
+    border-left: 4px solid var(--primary);
+    border-radius: 8px;
+    margin-top: 10px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
 }
diff --git a/static/js/anime-details.js b/static/js/anime-details.js
index 551f844..51d36ca 100644
--- a/static/js/anime-details.js
+++ b/static/js/anime-details.js
@@ -268,10 +268,10 @@ function renderAnimeDetails(anime) {
                     ` : ''}
 
                     <div class="anime-details-actions">
-                        <a href="${escapeHtml(anime.url)}" target="_blank" class="btn-secondary btn-small">
+                        <a href="${escapeHtml(anime.url)}" target="_blank" class="btn btn-secondary btn-small">
                             🔗 Voir sur MAL
                         </a>
-                        <button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn-primary btn-small">
+                        <button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn btn-primary btn-small">
                             📥 Télécharger
                         </button>
                     </div>
@@ -291,7 +291,7 @@ function renderAnimeDetails(anime) {
                 <div class="anime-details-section">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                         <h3 style="margin: 0;">📖 Synopsis</h3>
-                        <button onclick="translateSynopsis('${synopsisId}', this)" class="btn-secondary btn-small" style="font-size: 12px;">
+                        <button onclick="translateSynopsis('${synopsisId}', this)" class="btn btn-secondary btn-small" style="font-size: 12px;">
                             🌐 Traduire en français
                         </button>
                     </div>
@@ -405,7 +405,7 @@ function renderStreamingResult(result, query) {
                     ${episodes.length > 20 ? `<option disabled>... et ${episodes.length - 20} autres</option>` : ''}
                 </select>
 
-                <button class="btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
+                <button class="btn btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
                     📥 Télécharger
                 </button>
             </div>
diff --git a/static/js/recommendations.js b/static/js/recommendations.js
index 3c3559f..a6505c2 100644
--- a/static/js/recommendations.js
+++ b/static/js/recommendations.js
@@ -26,7 +26,7 @@ async function loadRecommendations() {
                     <p style="font-size: 12px; margin-top: 10px; color: #888;">
                         Soit l'API MyAnimeList est inaccessible, soit vous n'avez pas encore de téléchargements.
                     </p>
-                    <button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
+                    <button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
                         🔄 Réessayer
                     </button>
                 </div>
@@ -40,7 +40,7 @@ async function loadRecommendations() {
             <div class="no-results">
                 <p>❌ Erreur lors du chargement des recommandations.</p>
                 <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
-                <button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
+                <button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
                     🔄 Réessayer
                 </button>
             </div>
@@ -75,7 +75,7 @@ async function loadLatestReleases() {
                     <p style="font-size: 12px; margin-top: 10px; color: #888;">
                         L'API MyAnimeList pourrait être temporairement inaccessible.
                     </p>
-                    <button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
+                    <button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
                         🔄 Réessayer
                     </button>
                 </div>
@@ -89,7 +89,7 @@ async function loadLatestReleases() {
             <div class="no-results">
                 <p>❌ Erreur lors du chargement des sorties.</p>
                 <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
-                <button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
+                <button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
                     🔄 Réessayer
                 </button>
             </div>
@@ -180,10 +180,10 @@ function renderRecommendationCard(anime) {
             ` : ''}
 
             <div class="anime-card-actions">
-                <button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
+                <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
                     🔗 MAL
                 </button>
-                <button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
+                <button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
                     📥 Télécharger
                 </button>
             </div>
@@ -233,10 +233,10 @@ function renderReleaseCard(anime) {
             ` : ''}
 
             <div class="anime-card-actions">
-                <button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
+                <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
                     🔗 MAL
                 </button>
-                <button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
+                <button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
                     📥 Télécharger
                 </button>
             </div>
diff --git a/static/js/series-search.js b/static/js/series-search.js
index c60dd1f..3a51f9d 100644
--- a/static/js/series-search.js
+++ b/static/js/series-search.js
@@ -54,10 +54,10 @@ async function handleSeriesSearch() {
                             </div>
                         ` : ''}
                         <div class="anime-card-actions">
-                            <button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(s.url)}', '_blank')">
+                            <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(s.url)}', '_blank')">
                                 🔗 Voir sur FS7
                             </button>
-                            <button class="btn-primary btn-small" onclick="loadSeriesEpisodesDirect('${escapeHtml(s.url)}', '${escapeHtml(s.title)}')">
+                            <button class="btn btn-primary btn-small" onclick="loadSeriesEpisodesDirect('${escapeHtml(s.url)}', '${escapeHtml(s.title)}')">
                                 📥 Voir les épisodes
                             </button>
                         </div>
@@ -111,7 +111,7 @@ async function loadSeriesEpisodesDirect(url, title) {
                             <option value="${escapeHtml(ep.url)}">Épisode ${escapeHtml(ep.episode)}</option>
                         `).join('')}
                     </select>
-                    <button class="btn-primary" style="margin-top: 10px; width: 100%;" onclick="downloadSeriesEpisode('${escapeHtml(url)}', '${escapeHtml(title)}')">
+                    <button class="btn btn-primary" style="margin-top: 10px; width: 100%;" onclick="downloadSeriesEpisode('${escapeHtml(url)}', '${escapeHtml(title)}')">
                         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px;">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                         </svg>
diff --git a/static/js/tabs.js b/static/js/tabs.js
index 9b71aa0..3daf96a 100644
--- a/static/js/tabs.js
+++ b/static/js/tabs.js
@@ -36,10 +36,10 @@ function renderSeriesRecommendationCard(series) {
             </div>
 
             <div class="anime-card-actions">
-                <button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
+                <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
                     🔗 Voir sur FS7
                 </button>
-                <button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
+                <button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
                     📥 Voir les épisodes
                 </button>
             </div>
@@ -98,10 +98,10 @@ function renderSeriesReleaseCard(series) {
             </div>
 
             <div class="anime-card-actions">
-                <button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
+                <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
                     🔗 Voir sur FS7
                 </button>
-                <button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
+                <button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
                     📥 Voir les épisodes
                 </button>
             </div>
@@ -238,7 +238,7 @@ async function loadSeriesReleases() {
                 <div class="no-results">
                     <p>❌ Erreur lors du chargement des séries</p>
                     <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
-                    <button class="btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
+                    <button class="btn btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
                         🔄 Réessayer
                     </button>
                 </div>`;
@@ -280,11 +280,11 @@ async function loadProvidersGrid() {
                         ` : ''}
                         <div class="anime-card-actions">
                             ${domains.length > 0 ? `
-                                <button class="btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
+                                <button class="btn btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
                                     🔗 Visiter le site
                                 </button>
                             ` : ''}
-                            <button class="btn-secondary btn-small" onclick="showProviderSearch('${id}')">
+                            <button class="btn btn-secondary btn-small" onclick="showProviderSearch('${id}')">
                                 🔍 Rechercher
                             </button>
                         </div>
@@ -310,7 +310,7 @@ async function loadProvidersGrid() {
                             <div class="anime-card-title">${host.icon} ${host.name}</div>
                         </div>
                         <div class="anime-card-actions">
-                            <button class="btn-secondary btn-small" onclick="showDownloadInfo()">
+                            <button class="btn btn-secondary btn-small" onclick="showDownloadInfo()">
                                 📥 Télécharger un fichier
                             </button>
                         </div>
@@ -332,7 +332,7 @@ async function loadProvidersGrid() {
                 <div class="no-results">
                     <p>❌ Erreur lors du chargement des fournisseurs</p>
                     <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
-                    <button class="btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
+                    <button class="btn btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
                         🔄 Réessayer
                     </button>
                 </div>
diff --git a/templates/components/anime_card.html b/templates/components/anime_card.html
index 30c84fa..bdc9182 100644
--- a/templates/components/anime_card.html
+++ b/templates/components/anime_card.html
@@ -16,7 +16,7 @@
 
         <div class="anime-overlay">
             <div class="overlay-buttons">
-                <button class="btn-circle" 
+                <button class="btn btn-primary btn-circle" 
                         hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                         hx-target="#player-container"
                         hx-swap="innerHTML"
@@ -38,13 +38,13 @@
         </div>
         
         <div class="anime-card-buttons">
-            <button class="btn-card btn-watch" 
+            <button class="btn btn-primary btn-small" 
                     hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
                 <i class="fas fa-eye"></i> <span>Regarder</span>
             </button>
-            <button class="btn-card btn-download" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
@@ -53,7 +53,7 @@
         </div>
 
         {% if not in_watchlist %}
-        <button class="btn-add-watchlist"
+        <button class="btn btn-secondary btn-small btn-block"
                 hx-post="/api/watchlist"
                 hx-vals='{"anime_url": "{{ anime.url }}", "anime_title": "{{ anime.title }}", "provider_id": "{{ anime.provider_id }}"}'
                 hx-swap="none"
@@ -61,7 +61,7 @@
             <i class="fas fa-plus"></i> Watchlist
         </button>
         {% else %}
-        <button class="btn-add-watchlist followed" disabled>
+        <button class="btn btn-secondary btn-small btn-block followed" disabled>
             <i class="fas fa-check"></i> Suivi
         </button>
         {% endif %}
diff --git a/templates/components/downloads_list.html b/templates/components/downloads_list.html
index 181a44b..f372d91 100644
--- a/templates/components/downloads_list.html
+++ b/templates/components/downloads_list.html
@@ -4,7 +4,7 @@
             <div class="download-item task-{{ task.status }}">
                 <div class="download-info">
                     <span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
-                    <span class="badge badge-{{ task.status }}">{{ task.status }}</span>
+                    <span class="badge badge-{{ task.status }}">{{ task.status | upper }}</span>
                 </div>
                 
                 <div class="progress-container">
@@ -23,21 +23,25 @@
                             <i class="fas fa-pause"></i>
                         </button>
                     {% elif task.status == 'paused' %}
-                        <button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
+                        <button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
                             <i class="fas fa-play"></i>
                         </button>
                     {% endif %}
                     
                     {% if task.status == 'completed' %}
-                        <a href="/video/{{ task.id }}" class="btn-icon success">
+                        <a href="/video/{{ task.id }}" class="btn-icon success" title="Voir la vidéo">
                             <i class="fas fa-external-link-alt"></i>
                         </a>
+                        <a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Télécharger le fichier">
+                            <i class="fas fa-file-download"></i>
+                        </a>
                     {% endif %}
                     
                     <button class="btn-icon danger" 
                             hx-delete="/api/downloads/{{ task.id }}" 
                             hx-confirm="Supprimer ce téléchargement ?"
-                            hx-swap="none">
+                            hx-swap="none"
+                            title="Supprimer">
                         <i class="fas fa-trash"></i>
                     </button>
                 </div>
@@ -45,52 +49,8 @@
         {% endfor %}
     </div>
 {% else %}
-    <div class="empty-state">
+    <div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
+        <i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
         <p>Aucun téléchargement en cours</p>
     </div>
 {% endif %}
-
-<style>
-.downloads-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 15px;
-}
-.download-item {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 10px;
-    padding: 15px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.progress-container {
-    height: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    margin: 10px 0;
-    overflow: hidden;
-}
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, #00d9ff, #00ff88);
-    transition: width 0.3s ease;
-}
-.download-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
-.download-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
-.download-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #aaa; }
-.download-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
-.btn-icon {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: white;
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-.badge-completed { color: #00ff88; }
-.badge-failed { color: #ff4444; }
-.badge-downloading { color: #00d9ff; }
-</style>
diff --git a/templates/components/episode_list.html b/templates/components/episode_list.html
index d3bf842..5f3a190 100644
--- a/templates/components/episode_list.html
+++ b/templates/components/episode_list.html
@@ -1,23 +1,26 @@
-<div class="episode-list-container card" x-data="{ view: 'grid' }">
-    <div class="episode-header">
-        <div class="header-info">
-            <h3>{{ anime_title }}</h3>
-            <span class="episode-count">{{ episodes|length }} épisodes disponibles</span>
+<div class="episode-list-container section-container" x-data="{ view: 'grid' }">
+    <div class="section-header">
+        <div>
+            <h2 style="border: none; padding: 0; margin-bottom: 5px;">{{ anime_title }}</h2>
+            <span class="badge">{{ episodes|length }} épisodes disponibles</span>
         </div>
-        <div class="header-actions">
-            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'active': view === 'grid' }">
+        <div class="header-actions" style="display: flex; gap: 10px;">
+            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
                 <i class="fas fa-th"></i>
             </button>
-            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'active': view === 'list' }">
+            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
                 <i class="fas fa-list"></i>
             </button>
-            <button class="btn btn-close" onclick="document.getElementById('player-container').innerHTML = ''">
+            <button class="btn btn-icon danger" onclick="document.getElementById('player-container').innerHTML = ''">
                 <i class="fas fa-times"></i>
             </button>
         </div>
     </div>
 
-    <div class="episodes-content" :class="'view-' + view">
+    <!-- Zone d'affichage du player vidéo (Placé en haut pour une meilleure visibilité lors de la sélection) -->
+    <div id="video-player-display"></div>
+
+    <div class="episodes-content" :class="'view-' + view" style="margin-top: 25px;">
         {% if episodes %}
             {% for ep in episodes %}
                 <div class="episode-item">
@@ -26,105 +29,103 @@
                         {{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
                     </div>
                     <div class="ep-actions">
-                        <button class="btn-play-small" 
+                        <button class="btn btn-primary btn-small" 
                                 hx-get="/api/player/embed?url={{ ep.url | urlencode }}" 
                                 hx-target="#video-player-display"
                                 hx-swap="innerHTML"
                                 onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
                             <i class="fas fa-play"></i> Regarder
                         </button>
-                        <button class="btn-download-small"
+                        <button class="btn btn-secondary btn-icon btn-small"
                                 hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
-                                hx-swap="none">
+                                hx-swap="none"
+                                title="Télécharger cet épisode">
                             <i class="fas fa-download"></i>
                         </button>
                     </div>
                 </div>
             {% endfor %}
         {% else %}
-            <p class="empty-msg">Aucun épisode trouvé pour ce lien.</p>
+            <div class="no-results">
+                <i class="fas fa-exclamation-circle"></i>
+                <p>Aucun épisode trouvé pour cette source.</p>
+            </div>
         {% endif %}
     </div>
-
-    <!-- Zone d'affichage du player vidéo -->
-    <div id="video-player-display"></div>
 </div>
 
 <style>
 .episode-list-container {
-    margin-top: 20px;
-    background: #1e1e2e;
-    border: 1px solid #333;
-    padding: 20px;
+    margin-top: 30px;
+    background: var(--bg-card);
+    border-radius: var(--card-radius);
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
     animation: fadeIn 0.3s ease-out;
 }
-.episode-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #333;
-}
-.episode-header h3 { margin: 0; color: #00d9ff; }
-.episode-count { font-size: 0.8rem; color: #888; }
 
 .episodes-content.view-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 15px;
 }
+
 .view-grid .episode-item {
-    background: #252538;
-    padding: 15px;
-    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 20px 15px;
+    border-radius: 12px;
     text-align: center;
-    transition: all 0.2s;
+    transition: var(--transition);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
-.view-grid .episode-item:hover { background: #2d2d4a; transform: translateY(-2px); }
+
+.view-grid .episode-item:hover { 
+    background: rgba(255, 255, 255, 0.07); 
+    border-color: var(--primary);
+    transform: translateY(-3px); 
+}
+
 .view-grid .ep-title { display: none; }
-.view-grid .ep-number { font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; }
+.view-grid .ep-number { font-weight: 800; font-size: 1.2rem; color: var(--primary); }
+.view-grid .ep-actions { display: flex; flex-direction: column; gap: 8px; }
+.view-grid .ep-actions .btn { width: 100%; }
 
 .episodes-content.view-list {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 10px;
 }
+
 .view-list .episode-item {
     display: flex;
     align-items: center;
-    gap: 15px;
-    background: #252538;
-    padding: 10px 15px;
-    border-radius: 6px;
+    gap: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 12px 20px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: var(--transition);
 }
-.view-list .ep-number { font-weight: bold; width: 50px; }
-.view-list .ep-title { flex: 1; color: #ccc; }
 
-.btn-play-small {
-    background: #00d9ff;
-    color: #000;
-    border: none;
-    padding: 5px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    font-weight: bold;
+.view-list .episode-item:hover {
+    background: rgba(255, 255, 255, 0.07);
+    border-color: var(--primary);
 }
-.btn-download-small {
-    background: transparent;
-    color: #888;
-    border: 1px solid #444;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-.btn-download-small:hover { color: #fff; border-color: #fff; }
+
+.view-list .ep-number { font-weight: 800; width: 60px; color: var(--primary); }
+.view-list .ep-title { flex: 1; color: var(--text-main); font-weight: 500; }
+.view-list .ep-actions { display: flex; gap: 10px; }
 
 #video-player-display:not(:empty) {
-    margin-top: 30px;
-    padding-top: 20px;
-    border-top: 2px dashed #333;
+    margin: 20px 0 30px 0;
+    padding: 25px;
+    background: #000;
+    border-radius: 12px;
+    border: 1px solid var(--primary);
+    box-shadow: 0 0 30px rgba(0, 217, 255, 0.15);
 }
 
 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
diff --git a/templates/components/header.html b/templates/components/header.html
index 3292bd2..a9206a3 100644
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -1,70 +1,69 @@
-<h1>⚡ Ohm Stream Downloader</h1>
-<p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
+<header>
+    <h1>⚡ Ohm Stream Downloader</h1>
+    <p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
 
-<!-- User info and logout button -->
-<div id="userInfo" 
-     x-show="isAuthenticated" 
-     style="margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
-    <div style="display: flex; align-items: center; gap: 10px;">
-        <span style="color: #00d9ff;">👤</span>
-        <span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: #00d9ff;">-</strong></span>
+    <!-- User info and logout button -->
+    <div id="userInfo" x-show="isAuthenticated" class="auth-panel" x-cloak>
+        <div style="display: flex; align-items: center; gap: 10px;">
+            <span style="color: var(--primary); font-size: 1.2rem;">👤</span>
+            <span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: var(--primary);">-</strong></span>
+        </div>
+        <button class="btn btn-secondary btn-small" 
+                hx-post="/api/auth/logout"
+                hx-on::after-request="isAuthenticated = false; window.location.reload()">
+            🚪 Déconnexion
+        </button>
     </div>
-    <button class="btn-secondary btn-small" 
-            hx-post="/api/auth/logout"
-            hx-on::after-request="isAuthenticated = false; window.location.reload()"
-            style="padding: 5px 15px; font-size: 12px;">
-        🚪 Déconnexion
-    </button>
-</div>
 
-<!-- Login prompt (shown when not logged in) -->
-<div id="loginPrompt" 
-     x-show="!isAuthenticated" 
-     style="margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
-    <p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
-</div>
+    <!-- Login prompt (shown when not logged in) -->
+    <div id="loginPrompt" x-show="!isAuthenticated" class="auth-panel" style="justify-content: center;" x-cloak>
+        <p style="color: var(--primary); margin: 0;">
+            👋 Bienvenue! <a href="/login" class="btn btn-secondary btn-small" style="margin-left: 10px;">Se connecter</a> pour accéder à toutes les fonctionnalités.
+        </p>
+    </div>
 
-<!-- Tabs - Robust navigation -->
-<div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'home' }" 
-            @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-        </svg>
-        Accueil
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'anime' }" 
-            @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        Anime
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'series' }" 
-            @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
-        </svg>
-        Série
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'watchlist' }" 
-            @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
-        </svg>
-        Watchlist
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'downloads' }" 
-            @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-        </svg>
-        Téléchargements
-    </button>
-</div>
+    <!-- Tabs - Robust navigation -->
+    <nav id="mainTabs" class="tabs">
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'home' }" 
+                @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+            </svg>
+            Accueil
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'anime' }" 
+                @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Anime
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'series' }" 
+                @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
+            </svg>
+            Série
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'watchlist' }" 
+                @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
+            </svg>
+            Watchlist
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'downloads' }" 
+                @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+            </svg>
+            Téléchargements
+        </button>
+    </nav>
+</header>
diff --git a/templates/components/home_section.html b/templates/components/home_section.html
index 7518112..f01ff84 100644
--- a/templates/components/home_section.html
+++ b/templates/components/home_section.html
@@ -7,7 +7,7 @@
     <div class="section-container">
         <div class="section-header">
             <h2>🎯 Recommandé pour vous</h2>
-            <button class="btn-secondary btn-small" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/recommendations" 
                     hx-target="#recommendationsList">
                 <i class="fas fa-sync-alt"></i> Actualiser
@@ -25,7 +25,7 @@
     <div class="section-container">
         <div class="section-header">
             <h2>🔥 Dernières sorties</h2>
-            <button class="btn-secondary btn-small" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/releases/latest" 
                     hx-target="#releasesList">
                 <i class="fas fa-sync-alt"></i> Actualiser
diff --git a/templates/components/series_card.html b/templates/components/series_card.html
index faf9507..d498cfc 100644
--- a/templates/components/series_card.html
+++ b/templates/components/series_card.html
@@ -8,7 +8,7 @@
              onerror="this.src='https://placehold.co/400x600/161625/ff6b6b?text=Image+Error'; this.onerror=null;">
         <div class="anime-overlay">
             <div class="overlay-buttons">
-                <button class="btn-circle" 
+                <button class="btn btn-primary btn-circle" 
                         hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                         hx-target="#player-container"
                         hx-swap="innerHTML"
@@ -25,13 +25,13 @@
         </div>
         
         <div class="anime-card-buttons">
-            <button class="btn-card btn-watch" 
+            <button class="btn btn-primary btn-small" 
                     hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
                 <i class="fas fa-eye"></i> <span>Regarder</span>
             </button>
-            <button class="btn-card btn-download" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
@@ -40,7 +40,7 @@
         </div>
 
         {% if not in_watchlist %}
-        <button class="btn-add-watchlist"
+        <button class="btn btn-secondary btn-small btn-block"
                 hx-post="/api/watchlist"
                 hx-vals='{"anime_url": "{{ series.url }}", "anime_title": "{{ series.title }}", "provider_id": "fs7", "lang": "vf"}'
                 hx-swap="none"
@@ -48,7 +48,7 @@
             <i class="fas fa-plus"></i> Watchlist
         </button>
         {% else %}
-        <button class="btn-add-watchlist followed" disabled>
+        <button class="btn btn-secondary btn-small btn-block followed" disabled>
             <i class="fas fa-check"></i> Suivi
         </button>
         {% endif %}
diff --git a/templates/index.html b/templates/index.html
index 32c960a..7eb5c09 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,18 +28,18 @@
                 placeholder="Rechercher un anime (ex: Frieren, One Piece, Naruto...)"
                 required
             >
-            <button type="submit" class="btn-primary">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button type="submit" class="btn btn-primary btn-search">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
                     <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>
                 Rechercher
             </button>
         </form>
-        <div id="search-loading" class="htmx-indicator">
+        <div id="search-loading" class="htmx-indicator" style="margin-top: 15px; color: var(--primary); display: none;">
             <div class="spinner"></div> Recherche en cours...
         </div>
-        <div style="margin-top: 10px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
-            💡 <strong>Info:</strong> La recherche utilise MyAnimeList pour afficher la fiche complète (synopsis, saisons, etc.)
+        <div style="margin-top: 15px; padding: 12px; background: rgba(0, 217, 255, 0.05); border: 1px solid rgba(0, 217, 255, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
+            💡 <strong>Astuce :</strong> La recherche unifiée explore plusieurs sources pour trouver vos animes préférés.
         </div>
     </div>
 
@@ -49,18 +49,18 @@
     <!-- Player container for HTMX injections -->
     <div id="player-container"></div>
 
-    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">
+    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;">
 
     <!-- Latest Releases Section -->
     <div class="section-header">
         <h2>🔥 Dernières sorties Anime</h2>
-        <button class="btn-small btn-secondary" 
+        <button class="btn btn-secondary btn-small" 
                 hx-get="/api/releases/latest" 
                 hx-target="#animeReleasesList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
-            Dernières sorties
+            Actualiser
         </button>
     </div>
     <div id="animeReleasesList" class="recommendations-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:500ms"></div>
@@ -85,30 +85,30 @@
                 placeholder="Rechercher une série (ex: Breaking Bad, Game of Thrones...)"
                 required
             >
-            <button type="submit" class="btn-primary">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button type="submit" class="btn btn-primary btn-search">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
                     <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>
                 Rechercher
             </button>
         </form>
-        <div id="series-search-loading" class="htmx-indicator">
+        <div id="series-search-loading" class="htmx-indicator" style="margin-top: 15px; color: var(--secondary); display: none;">
             <div class="spinner"></div> Recherche en cours...
         </div>
-        <div style="margin-top: 10px; padding: 10px; background: rgba(255, 107, 107, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
-            💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes
+        <div style="margin-top: 15px; padding: 12px; background: rgba(255, 107, 107, 0.05); border: 1px solid rgba(255, 107, 107, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
+            💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes.
         </div>
     </div>
 
     <!-- Series search results -->
     <div id="seriesSearchResults" style="margin-bottom: 40px;"></div>
 
-    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">
+    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;">
 
     <!-- Recommendations Section -->
     <div class="section-header">
         <h2>🎯 Recommandé pour vous</h2>
-        <button class="btn-small btn-secondary" 
+        <button class="btn btn-secondary btn-small" 
                 hx-get="/api/recommendations" 
                 hx-target="#seriesRecommendationsList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
@@ -122,26 +122,18 @@
     <!-- Latest Releases Section -->
     <div class="section-header" style="margin-top: 40px;">
         <h2>🔥 Dernières sorties Séries TV</h2>
-        <button class="btn-small btn-secondary" 
+        <button class="btn btn-secondary btn-small" 
                 hx-get="/api/releases/latest" 
                 hx-target="#seriesReleasesList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
-            Dernières sorties
+            Actualiser
         </button>
     </div>
     <div id="seriesReleasesList" class="releases-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:700ms"></div>
 </div>
 
-<div id="tab-providers" class="tab-content" x-show="activeTab === 'providers'">
-    <div class="section-header">
-        <h2>📦 Fournisseurs de Streaming</h2>
-        <button class="btn btn-sm btn-secondary" hx-get="/api/providers/health" hx-target="#providersGrid">Actualiser</button>
-    </div>
-    <div id="providersGrid" class="search-results"></div>
-</div>
-
 <div id="tab-watchlist" class="tab-content" x-show="activeTab === 'watchlist'">
 {% include "components/watchlist_section.html" %}
 </div>
diff --git a/templates/login.html b/templates/login.html
index aa57a75..7d4ed8f 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -5,116 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Connexion - Ohm Stream Downloader</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <style>
-        .auth-container {
-            max-width: 400px;
-            margin: 50px auto;
-            padding: 30px;
-            background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
-            border-radius: 20px;
-            box-shadow: 0 8px 32px rgba(0, 217, 255, 0.3);
-        }
-        .auth-title {
-            text-align: center;
-            color: #00d9ff;
-            margin-bottom: 30px;
-            font-size: 28px;
-        }
-        .auth-tabs {
-            display: flex;
-            margin-bottom: 30px;
-            border-bottom: 2px solid rgba(0, 217, 255, 0.2);
-        }
-        .auth-tab {
-            flex: 1;
-            padding: 15px;
-            text-align: center;
-            cursor: pointer;
-            color: #aaa;
-            transition: all 0.3s ease;
-        }
-        .auth-tab.active {
-            color: #00d9ff;
-            border-bottom: 2px solid #00d9ff;
-        }
-        .auth-tab:hover {
-            color: #00d9ff;
-        }
-        .auth-form {
-            display: none;
-        }
-        .auth-form.active {
-            display: block;
-        }
-        .form-group {
-            margin-bottom: 20px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            color: #00d9ff;
-            font-size: 14px;
-        }
-        .form-group input {
-            width: 100%;
-            padding: 12px;
-            background: rgba(0, 217, 255, 0.1);
-            border: 1px solid rgba(0, 217, 255, 0.3);
-            border-radius: 8px;
-            color: #fff;
-            font-size: 14px;
-            box-sizing: border-box;
-        }
-        .form-group input:focus {
-            outline: none;
-            border-color: #00d9ff;
-            box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
-        }
-        .form-group input::placeholder {
-            color: #666;
-        }
-        .auth-error {
-            background: rgba(255, 107, 107, 0.2);
-            border: 1px solid #ff6b6b;
-            color: #ff6b6b;
-            padding: 12px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-size: 14px;
-            display: none;
-        }
-        .auth-error.show {
-            display: block;
-        }
-        .auth-success {
-            background: rgba(0, 217, 255, 0.2);
-            border: 1px solid #00d9ff;
-            color: #00d9ff;
-            padding: 12px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-size: 14px;
-            display: none;
-        }
-        .auth-success.show {
-            display: block;
-        }
-        .btn-block {
-            width: 100%;
-        }
-        .back-link {
-            text-align: center;
-            margin-top: 20px;
-        }
-        .back-link a {
-            color: #00d9ff;
-            text-decoration: none;
-            font-size: 14px;
-        }
-        .back-link a:hover {
-            text-decoration: underline;
-        }
-    </style>
 </head>
 <body>
     <div class="auth-container">
@@ -140,7 +30,7 @@
                     aria-required="true"
                     aria-describedby="loginUsernameHelp"
                 >
-                <span id="loginUsernameHelp" class="visually-hidden">Champ obligatoire</span>
+                <span id="loginUsernameHelp" style="display: none;">Champ obligatoire</span>
             </div>
             <div class="form-group">
                 <label for="loginPassword">Mot de passe</label>
@@ -152,7 +42,7 @@
                     aria-required="true"
                 >
             </div>
-            <button type="submit" id="loginSubmit" class="btn-primary btn-block">Se connecter</button>
+            <button type="submit" id="loginSubmit" class="btn btn-primary btn-block">Se connecter</button>
         </form>
 
         <!-- Register Form -->
@@ -206,11 +96,11 @@
                     aria-required="true"
                 >
             </div>
-            <button type="submit" id="registerSubmit" class="btn-primary btn-block">S'inscrire</button>
+            <button type="submit" id="registerSubmit" class="btn btn-primary btn-block">S'inscrire</button>
         </form>
 
-        <div class="back-link">
-            <a href="/web">← Retour à l'accueil</a>
+        <div style="text-align: center; margin-top: 25px;">
+            <a href="/web" class="btn btn-secondary btn-small">← Retour à l'accueil</a>
         </div>
     </div>
 
@@ -219,14 +109,6 @@
     <script src="/static/js/auth-api.js"></script>
     <script src="/static/js/auth-ui.js"></script>
     <script>
-        // Debug: Check what's loaded
-        console.log('Auth modules loaded:');
-        console.log('- window.safeJsonParse:', typeof window.safeJsonParse);
-        console.log('- window.authApi:', typeof window.authApi);
-        console.log('- window.authUi:', typeof window.authUi);
-        console.log('- window.authApi.login:', typeof window.authApi?.login);
-        console.log('- window.authUi.handleLogin:', typeof window.authUi?.handleLogin);
-
         // Expose setToken from auth.js if available
         if (typeof window.setToken === 'undefined') {
             window.setToken = function(token) {
@@ -237,44 +119,26 @@
 
         // Attach event listeners after all scripts are loaded
         document.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM Content Loaded');
-            console.log('window.authUi:', window.authUi);
-
             const loginForm = document.getElementById('loginForm');
             const registerForm = document.getElementById('registerForm');
 
             if (loginForm && window.authUi && window.authUi.handleLogin) {
                 loginForm.addEventListener('submit', window.authUi.handleLogin);
-                console.log('✓ Login handler attached');
-            } else {
-                console.error('✗ authUi.handleLogin not available', {
-                    hasLoginForm: !!loginForm,
-                    hasAuthUi: !!window.authUi,
-                    hasHandleLogin: !!window.authUi?.handleLogin
-                });
             }
 
             if (registerForm && window.authUi && window.authUi.handleRegister) {
                 registerForm.addEventListener('submit', window.authUi.handleRegister);
-                console.log('✓ Register handler attached');
-            } else {
-                console.error('✗ authUi.handleRegister not available');
             }
 
             // Attach tab click handlers
             const tabs = document.querySelectorAll('.auth-tab');
-            console.log('Found tabs:', tabs.length);
             tabs.forEach(tab => {
                 tab.addEventListener('click', function() {
-                    console.log('Tab clicked:', this.dataset.tab);
                     if (window.authUi && window.authUi.switchTab) {
                         window.authUi.switchTab(this.dataset.tab);
-                    } else {
-                        console.error('✗ authUi.switchTab not available');
                     }
                 });
             });
-            console.log('✓ Tab handlers attached');
         });
     </script>
 </body>