diff --git a/README.md b/README.md
index 9e96c1b..4b36381 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,15 @@
 Petit applicatif pour télécharger depuis des url Spotify à l'aide de Youtube-music  (flac ou mp3)  
 backend: spotdl, sacad, falsk, flask-login  
 
-Run:  
+## Run:  
 install requiments python:  
 ```
 pip install -r requirements.txt
 ```
+Init db sqlite:
+```
+python3 app.py & ctrl+c
+```
 
 ```
 python3 app.py
diff --git a/app.py b/app.py
index 1a82e1e..2325b7c 100644
--- a/app.py
+++ b/app.py
@@ -96,6 +96,9 @@ def create_admin():
 
 def validate_spotify_url(url):
     patterns = [
+        r'https?://open\.spotify\.com/[^/]+/track/[\w-]+',
+        r'https?://open\.spotify\.com/[^/]+/album/[\w-]+',
+        r'https?://open\.spotify\.com/[^/]+/playlist/[\w-]+',
         r'https?://open\.spotify\.com/track/[\w-]+',
         r'https?://open\.spotify\.com/album/[\w-]+',
         r'https?://open\.spotify\.com/playlist/[\w-]+',
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..30ded88
--- /dev/null
+++ b/index.html
@@ -0,0 +1,299 @@
+{% extends "layout.html" %}
+
+{% block title %}Télécharger - Spotify Downloader{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-lg-8">
+        <div class="card">
+            <div class="card-header">
+                <h4 class="mb-0"><i class="bi bi-download me-2"></i>Nouveau téléchargement</h4>
+            </div>
+            <div class="card-body">
+                <form id="downloadForm">
+                    <div class="mb-3">
+                        <label for="url" class="form-label">
+                            <i class="bi bi-link-45deg me-1"></i>URL Spotify
+                        </label>
+                        <textarea 
+                            class="form-control" 
+                            id="url" 
+                            name="url" 
+                            rows="4" 
+                            placeholder="Collez une ou plusieurs URLs Spotify (une par ligne)&#10;Exemple:&#10;https://open.spotify.com/track/...&#10;https://open.spotify.com/playlist/..."
+                            required
+                        ></textarea>
+                        <div class="form-text">Accepte les tracks, albums et playlists Spotify</div>
+                        <div id="urlError" class="text-danger mt-1" style="display: none;"></div>
+                    </div>
+
+                    <div class="row g-3 mb-3">
+                        <div class="col-md-4">
+                            <label for="format" class="form-label">
+                                <i class="bi bi-music-note me-1"></i>Format
+                            </label>
+                            <select class="form-select" id="format" name="format">
+                                <option value="mp3">MP3</option>
+                                <option value="flac">FLAC</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="copy_choice" class="form-label">
+                                <i class="bi bi-folder-plus me-1"></i>Copier vers NAS
+                            </label>
+                            <select class="form-select" id="copy_choice" name="copy_choice">
+                                <option value="no">Non</option>
+                                <option value="yes">Oui</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4 d-flex align-items-end">
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="delete_old" name="delete_old">
+                                <label class="form-check-label" for="delete_old">Supprimer anciens fichiers</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                        <button type="button" id="cancelBtn" class="btn btn-outline-danger me-md-2" disabled>
+                            <i class="bi bi-x-circle me-1"></i>Annuler
+                        </button>
+                        <button type="submit" id="submitBtn" class="btn btn-spotify">
+                            <i class="bi bi-download me-1"></i>Télécharger
+                        </button>
+                    </div>
+                </form>
+
+                <div id="downloadStatus" class="mt-4" style="display: none;">
+                    <div class="d-flex justify-content-between align-items-center mb-2">
+                        <span id="statusText" class="badge bg-info">En attente...</span>
+                        <span id="progressText" class="text-muted small">0%</span>
+                    </div>
+                    <div id="progressContainer" class="progress mb-3 progress-indeterminate" style="height: 25px;">
+                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
+                    </div>
+                    <div class="output-box rounded p-3" id="logOutput" style="max-height: 400px; overflow-y: auto;">
+                        <div class="text-muted text-center">En attente du téléchargement...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {% if recent_downloads %}
+        <div class="card mt-4">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Téléchargements récents</h5>
+                <a href="{{ url_for('history') }}" class="btn btn-sm btn-outline-light">Voir tout</a>
+            </div>
+            <div class="card-body p-0">
+                <div class="list-group list-group-flush">
+                    {% for dl in recent_downloads %}
+                    <div class="list-group-item bg-transparent d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="badge bg-{{ 'success' if dl.status == 'completed' else 'danger' if dl.status == 'error' else 'warning' if dl.status == 'running' else 'secondary' }}">
+                                {{ dl.status }}
+                            </span>
+                            <small class="text-muted ms-2">{{ dl.format_type.upper() }}</small>
+                        </div>
+                        <small class="text-muted">{{ dl.created_at.strftime('%d/%m %H:%M') }}</small>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+(function() {
+    'use strict';
+
+    const form = document.getElementById('downloadForm');
+    const submitBtn = document.getElementById('submitBtn');
+    const cancelBtn = document.getElementById('cancelBtn');
+    const downloadStatus = document.getElementById('downloadStatus');
+    const statusText = document.getElementById('statusText');
+    const progressText = document.getElementById('progressText');
+    const progressBar = document.getElementById('progressBar');
+    const progressContainer = document.getElementById('progressContainer');
+    const logOutput = document.getElementById('logOutput');
+    const urlError = document.getElementById('urlError');
+
+    let currentDownloadId = null;
+    let eventSource = null;
+
+    const spotifyPattern = /^https?:\/\/open\.spotify\.com\/(track|album|playlist)\/[\w-]+/;
+
+    function validateUrls(text) {
+        const urls = text.split('\n').filter(u => u.trim());
+        for (const url of urls) {
+            if (!spotifyPattern.test(url.trim())) {
+                return { valid: false, invalid: url };
+            }
+        }
+        return { valid: true, count: urls.length };
+    }
+
+    document.getElementById('url').addEventListener('input', function() {
+        const result = validateUrls(this.value);
+        if (this.value.trim() && !result.valid) {
+            urlError.textContent = `URL invalide: ${result.invalid.substring(0, 50)}...`;
+            urlError.style.display = 'block';
+        } else {
+            urlError.style.display = 'none';
+        }
+    });
+
+    function appendLog(message, type = 'info') {
+        const lines = message.split('\n').filter(l => l.trim());
+        lines.forEach(line => {
+            const span = document.createElement('div');
+            span.className = `log-${type}`;
+            span.textContent = line;
+            logOutput.appendChild(span);
+        });
+        logOutput.scrollTop = logOutput.scrollHeight;
+    }
+
+    function setStatus(status, progress) {
+        const badges = {
+            'pending': ['bg-secondary', 'En attente...'],
+            'running': ['bg-warning', 'En cours...'],
+            'completed': ['bg-success', 'Terminé !'],
+            'error': ['bg-danger', 'Erreur'],
+            'cancelled': ['bg-secondary', 'Annulé']
+        };
+        const [color, text] = badges[status] || ['bg-secondary', status];
+        statusText.className = `badge ${color}`;
+        statusText.textContent = text;
+        progressText.textContent = `${progress}%`;
+        
+        if (status === 'running') {
+            progressBar.classList.add('progress-bar-animated');
+            progressBar.style.width = '100%';
+            progressContainer.classList.add('progress-indeterminate');
+        } else {
+            progressBar.classList.remove('progress-bar-animated');
+            progressBar.style.width = `${progress}%`;
+            progressContainer.classList.remove('progress-indeterminate');
+            
+            if (status === 'completed') {
+                progressBar.classList.remove('progress-bar-striped');
+                showToast('Téléchargement terminé avec succès !', 'success');
+            } else if (status === 'error') {
+                showToast('Erreur lors du téléchargement', 'error');
+            } else if (status === 'cancelled') {
+                showToast('Téléchargement annulé', 'warning');
+            }
+        }
+    }
+
+    function startStream(downloadId) {
+        if (eventSource) {
+            eventSource.close();
+        }
+        
+        eventSource = new EventSource(`/api/download/${downloadId}/stream`);
+        
+        eventSource.onmessage = function(e) {
+            const [id, status, progress, log] = e.data.split('|');
+            
+            if (log !== '__END__' && log) {
+                let type = 'info';
+                if (log.includes('Erreur') || log.includes('Error')) type = 'error';
+                else if (log.includes('terminé') || log.includes('Terminé')) type = 'success';
+                else if (log.includes('Downloaded')) type = 'success';
+                else if (log.includes('Ajout')) type = 'info';
+                
+                appendLog(log, type);
+            }
+            
+            setStatus(status, parseInt(progress));
+            
+            if (status === 'completed' || status === 'error' || status === 'cancelled') {
+                eventSource.close();
+                eventSource = null;
+                submitBtn.disabled = false;
+                cancelBtn.disabled = true;
+            }
+        };
+
+        eventSource.onerror = function() {
+            eventSource.close();
+            eventSource = null;
+        };
+    }
+
+    form.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const urlValue = document.getElementById('url').value;
+        const validation = validateUrls(urlValue);
+        
+        if (!validation.valid) {
+            urlError.textContent = `URL invalide: ${validation.invalid.substring(0, 50)}...`;
+            urlError.style.display = 'block';
+            return;
+        }
+
+        const formData = {
+            url: urlValue,
+            format: document.getElementById('format').value,
+            delete_old: document.getElementById('delete_old').checked,
+            copy_choice: document.getElementById('copy_choice').value
+        };
+
+        submitBtn.disabled = true;
+        cancelBtn.disabled = false;
+        downloadStatus.style.display = 'block';
+        logOutput.innerHTML = '';
+        setStatus('pending', 0);
+        appendLog(`Démarrage de ${validation.count} téléchargement(s)...`, 'info');
+
+        try {
+            const response = await fetch('/api/download', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData)
+            });
+
+            const data = await response.json();
+            
+            if (data.error) {
+                appendLog(`Erreur: ${data.error}`, 'error');
+                setStatus('error', 0);
+                submitBtn.disabled = false;
+                cancelBtn.disabled = true;
+                return;
+            }
+
+            currentDownloadId = data.id;
+            setStatus('running', 0);
+            startStream(currentDownloadId);
+
+        } catch (err) {
+            appendLog(`Erreur réseau: ${err.message}`, 'error');
+            setStatus('error', 0);
+            submitBtn.disabled = false;
+            cancelBtn.disabled = true;
+        }
+    });
+
+    cancelBtn.addEventListener('click', async function() {
+        if (!currentDownloadId) return;
+        
+        try {
+            await fetch(`/api/download/${currentDownloadId}/cancel`, {
+                method: 'POST'
+            });
+            appendLog('Annulation en cours...', 'warning');
+        } catch (err) {
+            appendLog(`Erreur: ${err.message}`, 'error');
+        }
+    });
+})();
+</script>
+{% endblock %}