diff --git a/.gitignore b/.gitignore
index d29e7a9..607ae2a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 # Ignore dossier docker
-Docker
+Docker/*
 # Ignorer ce qu'il y a dans downloads
 downloads/*
diff --git a/.old/app.py b/.old/app.py
deleted file mode 100644
index b28c70c..0000000
--- a/.old/app.py
+++ /dev/null
@@ -1,82 +0,0 @@
-from flask import Flask, request, redirect, url_for, send_file, render_template
-from subprocess import run
-import os
-import logging
-
-app = Flask(__name__)
-
-@app.route('/')
-def upload_form():
-    return render_template('upload.html')
-
-def process_file(urls):
-    # path = os.path.expanduser('~/musics/downloads')
-    #path = '/home/gu1ll4um3/github/SpotDL_Web/downloads'
-    #path = 'downloads/'
-    download_param_album = '{artist}/{album}/{artist} - {title}'
-    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
-
-    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():
-    message = None
-    if request.method == 'POST':
-        url1 = request.form['url1']
-        url2 = request.form['url2']
-        url3 = request.form['url3']
-        url4 = request.form['url4']
-        url5 = request.form['url5']
-
-        # Vérifier si au moins un champ est vide
-        if not url1 and not url2 and not url3 and not url4 and not url5:
-            return render_template('erreur.html')
-
-        urls = [url1, url2, url3, url4, url5]
-        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', logs=logs)
-    #return render_template('download_complete.html', result2=result2)
-
-@app.route('/download', methods=['GET'])
-def download():
-    # PATH='/home/gu1ll4um3/musics/downloads/musics.zip'
-    #os.chdir('downloads')
-    PATH='downloads/musics.zip'
-    return send_file(PATH,as_attachment=True)
-
-# @app.route('/errors')
-# def errors():
-#    with open('erreurs.txt', 'r') as f:
-#       lines = f.readlines()
-#    return render_template('logs.html', lines=lines)
-
-@app.route('/test')
-def test():
-    return render_template('test.html')
-
-
-if __name__ == '__main__':
-    app.run(debug=True, port=3000)
diff --git a/.old/logs/erreurs.log b/.old/logs/erreurs.log
deleted file mode 100644
index b635fbe..0000000
--- a/.old/logs/erreurs.log
+++ /dev/null
@@ -1,3 +0,0 @@
-Des erreurs se sont produites et la ou les piste(s) suivante(s) sont manquantes :
- 
- Aldebert - La danse
diff --git a/.old/static/css/style.css b/.old/static/css/style.css
deleted file mode 100644
index 0defc8c..0000000
--- a/.old/static/css/style.css
+++ /dev/null
@@ -1,72 +0,0 @@
-body{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: black;
-}
-
-.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);
-    /* align-items: center; */
-}
-
-.procedure {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-}
-
-h2, a {
-    color: white;
-}
-
-.url {
-    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;
-    flex-direction: column;
-    width : auto ;
-}
-
-button {
-    display: block;
-    margin: 10px auto;
-  }
\ No newline at end of file
diff --git a/.old/static/css/style.css.old b/.old/static/css/style.css.old
deleted file mode 100644
index d3aaca4..0000000
--- a/.old/static/css/style.css.old
+++ /dev/null
@@ -1,208 +0,0 @@
-@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/.old/static/css/style.css.old2 b/.old/static/css/style.css.old2
deleted file mode 100644
index 73305ad..0000000
--- a/.old/static/css/style.css.old2
+++ /dev/null
@@ -1,191 +0,0 @@
-/* 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/.old/templates/download_complete.html b/.old/templates/download_complete.html
deleted file mode 100644
index 68ceaba..0000000
--- a/.old/templates/download_complete.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
-    <title>SpotDL Web</title>
-</head>
-<body>
-    <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 %}
-            </a>    
-            </div>
-            <div>
-            <a>
-                {% for log in logs %}
-                    <p>{{ log }}<br></p>
-                {% endfor %}
-                </a>      
-            </div>          
-        </form>
-    </div>
-      
-      
-</body>
diff --git a/.old/templates/erreur.html b/.old/templates/erreur.html
deleted file mode 100644
index 783356e..0000000
--- a/.old/templates/erreur.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
-    <title>SpotDL Web</title>
-</head>
-
-<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>
-
diff --git a/.old/templates/logs.html b/.old/templates/logs.html
deleted file mode 100644
index 3d9181c..0000000
--- a/.old/templates/logs.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<head>
-    <title>Fichier de texte</title>
- </head>
- <body>
-    <h1>Fichier de texte</h1>
-    <ul>
-        {% for log in logs %}
-            <p>{{ log }}</p>
-        {% endfor %}
-    </ul>
- </body>
diff --git a/.old/templates/test.html b/.old/templates/test.html
deleted file mode 100644
index 7693af7..0000000
--- a/.old/templates/test.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<style>
-
-    button:hover {
-        background-color: blue;
-        color: white;
-    }
-
-    button:active::before {
-        content: "Bouton cliqué";
-      }
-
-    input:empty {
-        border: 2px solid grey;
-        font-size: 13px;
-        padding-left: 7px;
-        padding-right: 7px;
-        border-radius: 9px;
-        width:100%;
-        height:30px;
-    }
-    input:valid:not(:placeholder-shown) {
-        border: 2px solid green;
-        font-size: 13px;
-        padding-left: 7px;
-        padding-right: 7px;
-        border-radius: 9px;
-        width:100%;
-        height:30px;
-      }
-    input:invalid {
-        border: 2px solid red;
-        font-size: 13px;
-        padding-left: 7px;
-        padding-right: 7px;
-        border-radius: 9px;
-        width:100%;
-        height:30px;
-    }
-  </style>
-  
-  <!-- L'élément input suivant aura une bordure grise s'il est vide, verte s'il contient une valeur valide, ou rouge s'il contient une valeur qui ne respecte pas le format défini par la regex -->
-  <input type="text" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="url"/>
-  <button id="mon-bouton">Mon bouton</button>
-  <script>
-    // Récupère l'élément bouton grâce à son ID
-    const bouton = document.getElementById('mon-bouton');
-  
-    // 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 = "Bouton cliqué";
-    });
-  </script>
\ No newline at end of file
diff --git a/.old/templates/upload.html b/.old/templates/upload.html
deleted file mode 100644
index e4df066..0000000
--- a/.old/templates/upload.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
-    <title>SpotDL Web</title>
-</head>
-<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">
-        </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">
-        </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">
-        </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">
-        </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">
-        </div>
-
-        <div style="margin-top: 10px;">
-            <button type="submit" id="btn" class="btn" value="Téléchargement">Téléchargement</button>
-        </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>
-    
-
-
diff --git a/app.py b/app.py
index e1ac3f9..027dcbf 100644
--- a/app.py
+++ b/app.py
@@ -5,8 +5,9 @@ import os, logging, json
 
 app = Flask(__name__)
 
-with open("identifiants.json") as f:
-  identifiants = json.load(f)
+#Page d'identification en cours de développement
+# with open("identifiants.json") as f:
+#   identifiants = json.load(f)
 
 def process_file(urls):
     download_param_album = '{artist}/{album}/{artist} - {title}'
@@ -14,7 +15,6 @@ def process_file(urls):
 
     os.chdir('downloads')
     os.system(f'rm -rf *')
-    #run(['rm', '-rf', '*']) ne fonctionne pas ... ??
 
     for url in urls:
         if url:
@@ -23,7 +23,6 @@ def process_file(urls):
             elif "playlist" in url:
                 run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
     
-    #os.system(f'zip -r musics.zip ./downloads')
     run(['zip', '-r', 'musics.zip', '.'])
     os.chdir('../')
 
@@ -31,19 +30,9 @@ def process_file(urls):
 def upload_form():
     return render_template('index.html')
 
-#Fonctionne
-# @app.route('/download/<filename>')
-# def download_file(filename):
-#   PATH='file.txt'
-#   return send_file(PATH, as_attachment=True)
-
 @app.route('/download', methods=['POST'])
 def download_file():
-  # votre code de téléchargement ici
-#   now = datetime.now()
-#   date_time = now.strftime("%Y-%m-%d %H-%M-%S")
-#   with open(f"file.txt", "w") as file:
-#     file.write(date_time)
+
   if request.method == 'POST':
         url1 = request.form['url1']
         url2 = request.form['url2']
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..fae7eb9
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,6 @@
+function startDownload() {
+    document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
+  }
+  function refreshPage() {
+    window.location.reload();
+  }
\ No newline at end of file
diff --git a/templates/404.html b/templates/404.html
index 8382b12..6a1a0cb 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,15 +1,14 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
-    <title>SpotDL Web</title>
-</head>
+{% extends 'layout.html' %}
 
-<body>
-    <div class="container">
-        <h1>Error 404</h1>
-        <h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>
-        <button class="btn" onclick="window.location.href = '/';">Accueil</button>
-    </div>
+{% block body %}
 
-</body>
+    <body>
+        <div class="container">
+            <h1>Error 404</h1>
+            <h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>
+            <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+        </div>
 
+    </body>
+
+{% endblock body %}
\ No newline at end of file
diff --git a/templates/erreur.html b/templates/erreur.html
index fee662d..34d1246 100644
--- a/templates/erreur.html
+++ b/templates/erreur.html
@@ -1,18 +1,18 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
-    <title>SpotDL Web</title>
-</head>
+{% extends 'layout.html' %}
 
-<body>
-    <div class="container">
-        <h1 class="title"> SpotDL Web </h1>
-        <h2> Veuillez entrer au moins une URL ! </h2>
-        <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+{% block body %}
 
-        {% if message %}
-            <p>{{ message }}</p>
-        {% endif %}
-    </div>
+    <body>
+        <div class="container">
+            <h1 class="title"> SpotDL Web </h1>
+            <h2> Veuillez entrer au moins une URL ! </h2>
+            <button class="btn" onclick="window.location.href = '/';">Accueil</button>
 
-</body>
+            {% if message %}
+                <p>{{ message }}</p>
+            {% endif %}
+        </div>
+
+    </body>
+
+{% endblock body %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 4a98c25..8898104 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,13 +1,7 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>SpotDL Web</title>
-</head>
+{% extends 'layout.html' %}
+
+{% block body %}
 
-<body>
   <div class="container">
     <h1 class="title">SpotDL Web</h1>
     <div class="bordered">
@@ -40,17 +34,6 @@
       <button type="submit" class="btn" id="download-button" onclick="startDownload()">Télécharger</button>
       <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button>
     </form>
-    <!-- <button class="btn2" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
-    <!-- <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
   </div>
-  
-<script>
-  function startDownload() {
-    document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
-  }
-  function refreshPage() {
-    window.location.reload();
-  }
-</script>
-</body>
-</html
+
+{% endblock body %}
diff --git a/templates/layout.html b/templates/layout.html
new file mode 100644
index 0000000..b2fd614
--- /dev/null
+++ b/templates/layout.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
+  <script src="/static/js/script.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>SpotDL Web</title>
+</head>
+
+<body>
+
+    {% block body %}{% endblock body %}
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/modele.html b/templates/modele.html
new file mode 100644
index 0000000..7e84aa9
--- /dev/null
+++ b/templates/modele.html
@@ -0,0 +1,7 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+
+
+
+{% endblock body %}
\ No newline at end of file