diff --git a/app.py b/app.py
index 0c79fe0..b28c70c 100644
--- a/app.py
+++ b/app.py
@@ -1,6 +1,7 @@
 from flask import Flask, request, redirect, url_for, send_file, render_template
 from subprocess import run
 import os
+import logging
 
 app = Flask(__name__)
 
@@ -18,17 +19,22 @@ def process_file(urls):
     os.chdir('downloads')
     #os.system(f'rm -rf *')
 
+    logs = []  # Créer une liste vide pour stocker les logs
     for url in urls:
         if url:
             if "album" in url:
                 #os.system(f'python3 -m spotdl {url} --output "{download_param_album}"')
                 run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
+                logs.append(f'Téléchargement de l album à l\'adresse {url}')
             elif "playlist" in url:
                 os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"')
-            
+                logs.append(f'Téléchargement de la playlist à l\'adresse {url}')
     
     # os.system(f'zip -r musics.zip ./downloads')
     run(['zip', '-r', 'musics.zip', '.'])
+    logs.append(f'Création du fichier ZIP musics.zip')
+    
+    return logs  # Retourner la liste des logs
 
 @app.route('/', methods=['GET', 'POST'])
 def index():
@@ -45,12 +51,14 @@ def index():
             return render_template('erreur.html')
 
         urls = [url1, url2, url3, url4, url5]
-        process_file(urls)
+        logs = process_file(urls)
+        #process_file(urls)
         #print(resultProcessFile)
         
         with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f:
             result2 = f.readlines()
-    return render_template('download_complete.html', result2=result2)
+    return render_template('download_complete.html', logs=logs)
+    #return render_template('download_complete.html', result2=result2)
 
 @app.route('/download', methods=['GET'])
 def download():
diff --git a/static/css/style.css b/static/css/style.css
index 935bc98..0defc8c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,140 +1,72 @@
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-body {
     background-color: black;
 }
 
-h1 {
-    /* border: 2px #eee solid; */
+.erreur {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.download_complete {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.all {
+    align-items: center;
+    flex-direction: column;
+}
+
+.titre{
+    display: flex;
+    justify-content: center;
     color: rgb(24,216,96);
-    background-color: black;
-    text-align: center;
-    padding: 10px;
+    /* align-items: center; */
 }
 
-h2 {
+.procedure {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
     text-align: center;
-    margin: auto;
-    padding: 10px;
+}
+
+h2, a {
     color: white;
 }
 
 .url {
-    display: flex;
+    display: block;
+    justify-content:center;
+    width: auto;
+    flex: 1 1 0;
+    /* align-items: center; */
+}
+
+.urlbox {
+    display: block;
+    /* align-items: flex-start; */
+    flex: 1 1 0;
+    width: 225;
+}
+
+form {
+    display: flex ;
     justify-content: center;
     align-items: center;
-    /* min-height:100%; */
-    background-color: black;
-    color: white
-}
-
-div {
-    display: flex;
-    justify-content: center;
-    /* align-items: center; */
-    /* min-height:100%; */
-    background-color: black;
-    color: white
-}
-
-.logs {
-    justify-content: center;
-    background-color: black;
-    color: white
-}
-
-
-input[type="submit"] {
-    display: block;
-    margin: auto;
+    flex-direction: column;
+    width : auto ;
 }
 
 button {
     display: block;
     margin: 10px auto;
-  }
-
-/* .urlbox{
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-} */
-
-/* .urlbox:empty {
-    border: 2px solid #999999;
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-}
-
-.urlbox:valid:not(:placeholder-shown){
-    border:rgb(24,216,96) 2px;
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-}
-.urlbox:invalid{
-    border: red solid 2px;
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-} */
-
-.urlbox:empty {
-    border: 2px solid grey;
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-  
-
-}
-.urlbox:valid:not(:placeholder-shown) {
-    border: 2px solid rgb(24,216,96);
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-  }
-.urlbox:invalid {
-    border: 2px solid red;
-    font-size: 13px;
-    padding-left: 7px;
-    padding-right: 7px;
-    border-radius: 9px;
-    width:100%;
-    height:30px;
-}
-
-
-
-button{
-    /* margin-right: 0px; */
-    height: 30px;
-    width:130px;
-    border-radius: 5px ;
-    border: none; 
-    /* float: right; */
-    background-color: #ddd;
-    font-weight: bold;
-}
-
-button:hover{
-    background-color: rgb(24,216,96);
-    color: white;
-}
\ No newline at end of file
+  }
\ No newline at end of file
diff --git a/static/css/style.css.old b/static/css/style.css.old
new file mode 100644
index 0000000..d3aaca4
--- /dev/null
+++ b/static/css/style.css.old
@@ -0,0 +1,208 @@
+@media (max-width: 600px) {
+  .urlbox {
+    /* les styles pour les appareils mobiles vont ici */
+    width: 100%; /* étend l'élément sur toute la largeur de l'écran */
+  }
+}
+
+@media (min-width: 601px) and (max-width: 900px) {
+  .urlbox {
+    /* les styles pour les tablettes vont ici */
+    width: 50%; /* étend l'élément sur la moitié de la largeur de l'écran */
+  }
+}
+
+@media (min-width: 901px) {
+  .urlbox {
+    /* les styles pour les écrans de bureau vont ici */
+    width: 25%; /* étend l'élément sur un quart de la largeur de l'écran */
+  }
+}
+
+body {
+    background-color: black;
+}
+
+h1 {
+    /* border: 2px #eee solid; */
+    color: rgb(24,216,96);
+    background-color: black;
+    text-align: center;
+    padding: 10px;
+}
+
+h2 {
+    text-align: center;
+    margin: auto;
+    padding: 10px;
+    color: white;
+}
+
+.url {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* min-height:100%; */
+    background-color: black;
+    color: white
+}
+
+div {
+    display: flex;
+    justify-content: center;
+    /* align-items: center; */
+    /* min-height:100%; */
+    background-color: black;
+    color: white
+}
+
+.logs {
+    justify-content: center;
+    background-color: black;
+    color: white
+}
+
+
+input[type="submit"] {
+    display: block;
+    margin: auto;
+}
+
+button {
+    display: block;
+    margin: 10px auto;
+  }
+
+.urlbox:empty {
+    border: 2px solid grey;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+  
+
+}
+.urlbox:valid:not(:placeholder-shown) {
+    border: 2px solid rgb(24,216,96);
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+  }
+.urlbox:invalid {
+    border: 2px solid red;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+}
+
+
+
+button{
+    /* margin-right: 0px; */
+    height: 30px;
+    width:130px;
+    border-radius: 5px ;
+    border: none; 
+    /* float: right; */
+    background-color: #ddd;
+    font-weight: bold;
+}
+
+button:hover{
+    background-color: rgb(24,216,96);
+    color: white;
+}
+
+@media (max-width: 600px) {
+    body {
+      background-color: black;
+    }
+    
+    h1 {
+      color: rgb(24,216,96);
+      background-color: black;
+      text-align: center;
+      padding: 10px;
+    }
+    
+    h2 {
+      text-align: center;
+      margin: auto;
+      padding: 10px;
+      color: white;
+    }
+    
+    .url {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: black;
+      color: white;
+    }
+    
+    div {
+      display: flex;
+      justify-content: center;
+      background-color: black;
+      color: white;
+    }
+    
+    .logs {
+      justify-content: center;
+      background-color: black;
+      color: white;
+    }
+    
+    input[type="submit"] {
+      display: block;
+      margin: auto;
+    }
+    
+    button {
+      display: block;
+      margin: 10px auto;
+    }
+    
+    .urlbox {
+      border: 2px solid grey;
+      font-size: 13px;
+      padding: 7px;
+      border-radius: 9px;
+      width: 100%;
+      height: 30px;
+      box-sizing: border-box;
+    }
+    
+    .urlbox:valid:not(:placeholder-shown) {
+      border: 2px solid rgb(24,216,96);
+    }
+
+    .urlbox:invalid {
+      border: 2px solid red;
+    }
+      
+    button {
+      height: 30px;
+      width: 130px;
+      border-radius: 5px;
+      border: none;
+      background-color: #ddd;
+      font-weight: bold;
+      box-sizing: border-box;
+    }  
+      
+    button:hover {
+      background-color: rgb(24,216,96);
+      color: white;
+    }
+}
+
+
diff --git a/static/css/style.css.old2 b/static/css/style.css.old2
new file mode 100644
index 0000000..73305ad
--- /dev/null
+++ b/static/css/style.css.old2
@@ -0,0 +1,191 @@
+/* Mise en forme générale */
+body {
+    background-color: black;
+  }
+  
+  /* Titre principal */
+  h1 {
+    color: rgb(24,216,96);
+    background-color: black;
+    text-align: center;
+    padding: 10px;
+    margin-top: 10px;
+  }
+  
+  /* Titre secondaire */
+  h2 {
+    text-align: center;
+    margin: auto;
+    padding: 10px;
+    color: white;
+  }
+  
+  /* Conteneur principal */
+  .url {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: black;
+    color: white;
+  }
+  
+  /* Conteneurs secondaires */
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: black;
+    color: white;
+  }
+  
+  /* Conteneur des logs */
+  .logs {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: black;
+    color: white;
+  }
+  
+  /* Bouton de soumission du formulaire */
+  input[type="submit"] {
+    display: block;
+    margin: auto;
+  }
+  
+  /* Bouton générique */
+  button {
+    display: block;
+    margin: 10px auto;
+  }
+  
+  /* Champ de saisie de l'URL */
+  .urlbox:empty {
+    border: 2px solid grey;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    height: 30px;
+    /* width: 150; */
+  }
+  .urlbox:valid:not(:placeholder-shown) {
+    border: 2px solid rgb(24,216,96);
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    /* width: 150%; */
+    height: 30px;
+  }
+  .urlbox:invalid {
+    border: 2px solid red;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    /* width: 150%; */
+    height: 30px;
+  }
+  
+  /* Bouton de téléchargement */
+  button {
+    height: 30px;
+    width: 130px;
+    border-radius: 5px;
+    border: none;
+    background-color: #ddd;
+    font-weight: bold;
+  }
+  
+  button:hover {
+    background-color: rgb(24,216,96);
+    color: white;
+  }
+  
+  /* Mise en forme pour écrans de smartphone */
+@media only screen and (max-width: 480px) {
+    /* Titre principal */
+    h1 {
+      font-size: 18px;
+    }
+  
+    /* Titre secondaire */
+    h2 {
+      font-size: 14px;
+    }
+  
+    /* Conteneur principal */
+    .url {
+      padding: 0 5px;
+    }
+  
+    /* Champ de saisie de l'URL */
+    .urlbox {
+      width: 150%;
+      padding: 0 10%;
+    }
+  
+    /* Bouton de téléchargement */
+    button {
+      width: 80%;
+    }
+  }
+  
+  /* Mise en forme pour écrans de tablette */
+  @media only screen and (min-width: 481px) and (max-width: 768px) {
+    /* Titre principal */
+    h1 {
+      font-size: 22px;
+    }
+  
+    /* Titre secondaire */
+    h2 {
+      font-size: 16px;
+    }
+  
+    /* Conteneur principal */
+    .url {
+      padding: 0 10px;
+    }
+  
+    /* Champ de saisie de l'URL */
+    .urlbox {
+      width: 150%;
+    }
+  
+    /* Bouton de téléchargement */
+    button {
+      width: 80%;
+    }
+  }
+  
+  /* Mise en forme pour écrans d'ordinateur */
+  @media only screen and (min-width: 769px) {
+    /* Titre principal */
+    h1 {
+      font-size: 28px;
+    }
+  
+    /* Titre secondaire */
+    h2 {
+      font-size: 20px;
+    }
+  
+    /* Conteneur principal */
+    .url {
+      padding: 0 20px;
+    }
+  
+    /* Champ de saisie de l'URL */
+    .urlbox {
+      width: 200%;
+    }
+  
+    /* Bouton de téléchargement */
+    button {
+      width: 80%;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/templates/download_complete.html b/templates/download_complete.html
index f03fc5d..68ceaba 100644
--- a/templates/download_complete.html
+++ b/templates/download_complete.html
@@ -4,22 +4,31 @@
     <title>SpotDL Web</title>
 </head>
 <body>
-    <h1> SpotDL Web </h1>
-    <h2> Téléchargement Terminé </h2>
-    <!-- <a class="btn btn-success" href="{{url_for('download')}}">Download</a> -->
-    <button onclick="window.location.href ='{{url_for('download')}}';">Download</button>
-    <button onclick="window.location.href = '/';">Télécharger à nouveau</button>
-      
-    <form class="logs">
+    <div class="download_complete">
+        <h1> SpotDL Web </h1>
+        <h2> Téléchargement Terminé </h2>
+        <!-- <a class="btn btn-success" href="{{url_for('download')}}">Download</a> -->
+        <button onclick="window.location.href ='{{url_for('download')}}';">Download</button>
+        <button onclick="window.location.href = '/';">Télécharger à nouveau</button>
+            
+        <form class="logs">
         <div><h1>Fichier de texte</h1></div>
         <div>
             <a>
-            {% for line in result2 %}
-                <p>{{ line }}<br></p>
-            {% endfor %}
+                {% for line in result2 %}
+                    <p>{{ line }}<br></p>
+                {% endfor %}
             </a>    
-        </div>
-        
-    </form>  
+            </div>
+            <div>
+            <a>
+                {% for log in logs %}
+                    <p>{{ log }}<br></p>
+                {% endfor %}
+                </a>      
+            </div>          
+        </form>
+    </div>
+      
       
 </body>
diff --git a/templates/erreur.html b/templates/erreur.html
index f1ac2d1..783356e 100644
--- a/templates/erreur.html
+++ b/templates/erreur.html
@@ -4,10 +4,16 @@
     <title>SpotDL Web</title>
 </head>
 
-<h1> SpotDL Web </h1>
-<h2> Veuillez entrer au moins une URL ! </h2>
-<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
+<body>
+    <div class="erreur">
+        <h1> SpotDL Web </h1>
+        <h2> Veuillez entrer au moins une URL ! </h2>
+        <button onclick="window.location.href = '/';">Télécharger à nouveau</button>
+
+        {% if message %}
+            <p>{{ message }}</p>
+        {% endif %}
+    </div>
+
+</body>
 
-{% if message %}
-    <p>{{ message }}</p>
-{% endif %}
\ No newline at end of file
diff --git a/templates/logs.html b/templates/logs.html
index ce39a31..3d9181c 100644
--- a/templates/logs.html
+++ b/templates/logs.html
@@ -4,8 +4,8 @@
  <body>
     <h1>Fichier de texte</h1>
     <ul>
-       {% for line in lines %}
-          <li>{{ line }}</li>
-       {% endfor %}
+        {% for log in logs %}
+            <p>{{ log }}</p>
+        {% endfor %}
     </ul>
  </body>
diff --git a/templates/upload.html b/templates/upload.html
index 72f8be8..e4df066 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -3,56 +3,62 @@
     <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
     <title>SpotDL Web</title>
 </head>
-
-    <h1>SpotDL Web</h1>
-        <div><a href="https://open.spotify.com/" style="color:white;" target="_blank">Aller sur Spotify</a></div>
-        <div>   - Chercher un album ou une playlist</div> 
-        <div>   - Copier le ou les lien(s) url ci-dessous</div> 
+<body>
+    <div class="all">
+        <div class="procedure">
+            <h1 class="titre">SpotDL Web</h1>
+            <a href="https://open.spotify.com/" style="color:white;" target="_blank">Aller sur Spotify <br> </a>
+            <a>- Chercher un album ou une playlist <br> </a>   
+            <a>- Copier le ou les lien(s) url ci-dessous <br> </a>
+        </div>
+        
     <div class="url" style="padding-top: 10px;">
     <form method="POST">
         <!-- <label for="url">URL:</label>
         <input type="text" name="url" id="url"> -->
-
+        <!-- regex="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" -->
         <div style="margin-top: 10px;">
             <!-- <label for="url1">URL 1:</label> -->
-            <input type="text" name="url1" id="url1" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
+            <input type="text" name="url1" id="url1" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
         </div>
             
         <div style="margin-top: 10px;">
             <!-- <label for="url2">URL 2:</label> -->
-            <input type="text" name="url2" id="url2" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
+            <input type="text" name="url2" id="url2" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <!-- <label for="url3">URL 3:</label> -->
-            <input type="text" name="url3" id="url3" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
+            <input type="text" name="url3" id="url3" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <!-- <label for="url4">URL 4:</label> -->
-            <input type="text" name="url4" id="url4" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
+            <input type="text" name="url4" id="url4" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <!-- <label for="url5">URL 5:</label> -->
-            <input type="text" name="url5" id="url5" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
+            <input type="text" name="url5" id="url5" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <button type="submit" id="btn" class="btn" value="Téléchargement">Téléchargement</button>
-            <script>
-                // Récupère l'élément bouton grâce à son ID
-                const bouton = document.getElementById('btn');
-              
-                // Ajoute un écouteur d'événement 'click' au bouton
-                bouton.addEventListener('click', function() {
-                  // Met à jour la valeur de l'attribut innerHTML du bouton
-                  this.innerHTML = "Téléchargement en cours ...";
-                });
-              </script>
         </div>
 
     </form>
     </div>
+    </div>
+<script>
+    // Récupère l'élément bouton grâce à son ID
+    const bouton = document.getElementById('btn');          
+    // Ajoute un écouteur d'événement 'click' au bouton
+    bouton.addEventListener('click', function() {
+    // Met à jour la valeur de l'attribut innerHTML du bouton
+    this.innerHTML = "Téléchargement en cours ...";
+    });
+</script>
+</body>
+