diff --git a/app.py b/app.py
index c0fc65d..5ef3fbf 100644
--- a/app.py
+++ b/app.py
@@ -31,6 +31,18 @@ app = Flask(__name__)
 
 @app.route("/")
 def home() :
+    """
+    Page d'accueil du site Web.
+
+    Parameters
+    ----------
+    None.
+
+    Returns
+    -------
+    flask.render_template
+    """
+
     return render_template("index.html")
 
 
@@ -75,10 +87,34 @@ def free_rooms() :
     """
 
     # Récupération des ID des départements depuis le formulaire :
-    if request.method == "POST" :
-        dident_list = request.form["dept"]
+    dident_list = request.args.getlist("dept")
+
+    # Récupération de l'éventuelle date personnalisée (depuis la page de sélection de date :
+    date_uf = request.args.get("date")
+    if date_uf == None :
+        print("hey")
+        date_uf = [""]
     else :
-        dident_list = request.args.getlist("dept")
+        date_uf = date_uf.split("-")
+
+    time_uf = request.args.get("time")
+    if time_uf == None :
+        print("hey")
+        time_uf = [""]
+    else :
+        time_uf = time_uf.split(":")
+
+    date = dti.datetime.now()
+
+    print(date_uf, time_uf)
+
+    if time_uf != [""] :
+        date = date.replace(hour = int(time_uf[0]), minute = int(time_uf[1]))
+    if date_uf != [""] :
+        date = date.replace(year = int(date_uf[0]), month = int(date_uf[1]), day = int(date_uf[2]))
+
+    print(date)
+
 
     # Récupération de la liste des départements :
     dept_filen = "data/dept_list.txt"
@@ -98,8 +134,6 @@ def free_rooms() :
 
     ignore_list = ["salle non définie", "salle en Distanciel"]
 
-    date = dti.datetime.now()
-
     free_rooms = ro.getrooms(date, depts, ignore_list)
 
     frooms_disp = dict() # Mise en forme des infos pour la page Web
@@ -122,6 +156,39 @@ def free_rooms() :
     return render_template("free-rooms.html", **context)
 
 
-@app.route("/app/date-select")
+@app.route("/app/date-select", methods=["POST", "GET"])
 def date_select() :
-    return render_template("date-select.html")
\ No newline at end of file
+    """
+    Permet de sélectionner une date à laquelle
+    chercher des salles libres.
+
+    Parameters
+    ----------
+    None.
+
+    Returns
+    -------
+    flask.render_template
+    """
+    dident_list = request.args.getlist("dept")
+
+    context = {"dident_list":dident_list}
+
+    return render_template("date-select.html", **context)
+
+
+@app.route("/app/about")
+def about() :
+    """
+    Page 'À propos'.
+
+    Parameters
+    ----------
+    None.
+
+    Returns
+    -------
+    flask.render_template
+    """
+
+    return render_template("about.html")
diff --git a/static/style.css b/static/style.css
index 6a25813..cacbffa 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,35 +1,32 @@
 :root {
-    --bg: #191919;
-    --bg-dark: #252525;
-    --bg-light: #4b4b4b;
-    --fg: #ffffff;
-    --hl: #8080ff;
+    --bg: #1f0e1c;
+    --bg-dark: #3e2137;
+    --bg-light: #584563;
+    --fg: #f5edba;
+    --hl: #9d303b;
 }
 
-* {
+body {
     background: var(--bg);
-    padding-left: 5px;
-    padding-right: 5px;
+    margin: 0px;
+    padding: 0px;
     font-family: "ubuntu", "sans";
     color: var(--fg);
 }
 
 header {
     background: var(--hl);
+    display: inline-block;
     font-size: 250%;
+    width: 100%;
     font-weight: lighter;
     text-align: center;
-    margin: 10px;
-    margin-left: calc(-50vw + 50%);
-    margin-right: calc(-50vw + 50%);
-    margin-top: calc(-50vw + 50%);
-    padding-top: 20px;
-    padding-bottom: 5px;
 }
 
 main {
-    /*display: flex;
-    flex-direction: row;*/
+    margin: 15px;
+    display: flex;
+    flex-direction: column;
     line-height: 1.7;
 }
 
@@ -45,7 +42,6 @@ nav {
 
 p {
     text-align: justify;
-    text-indent: 50px;
 }
 
 .flex-container {
@@ -58,6 +54,8 @@ h1, h2, h3, h4 {
     font-weight: lighter;
     border-left: solid;
     border-width: 5px;
+    background: var(--bg-dark);
+    display: inline-block;
     border-color: var(--hl);
 }
 
@@ -95,17 +93,66 @@ dt .details {
     font-size: 80%;
 }
 
-button, input {
+input[type="submit"], button{
     background: var(--bg-light);
     border-style: solid;
     border-width: 1px;
     border-color: var(--bg);
-    padding: 10px;
+    padding: 20px;
     border-radius: 10px;
+    transition: background 0.1s;
+    color: var(--fg);
 }
 
-input checkbox {
-    margin-bottom: 5px;
+input[type="submit"]:hover, button:hover {
+    background: var(--bg-dark);
+    color: var(--fg);
+}
+
+input[type="time"], input[type="date"] {
+    font-family: "Ubuntu", sans-serif;
+    background: var(--bg-dark);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--bg);
+    padding: 20px;
+    border-radius: 10px;
+    transition: background 0.1s;
+    margin: 10px;
+    color: var(--fg);
+}
+
+input[type="checkbox"] {
+    display: none;
+    width: 0px;
+    height: 0px;
+}
+
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+input[type="checkbox"]:hover + label {
+    background: var(--bg-dark);
+}
+
+input[type="checkbox"]:checked + label {
+    background: var(--hl);
+}
+
+input[type="checkbox"] + label {
+    background: var(--bg-light);
+    transition: background 0.1s;
+    display: inline-block;
+    width: 200px;
+    height: 80px;
+    padding: 10px;
+    margin: 10px;
+    text-align: center;
+    border-radius: 15px;
+    box-shadow: 5px 5px black;
 }
 
 .done {
@@ -117,5 +164,12 @@ input {
     background: var(--bg-dark);
 }
 
+#greet {
+    font-size: 200%;
+    text-align: center;
+    font-weight: lighter;
+}
+
+
 @media screen and (max-width: 769px) {
 }
diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..80ac051
--- /dev/null
+++ b/templates/about.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <title>UniSquat</title>
+    <link rel="stylesheet" type="text/css" href="../static/style.css">
+    <meta name="viewport" content="width=300, initial-scale=1" />
+  </head>
+  <body>
+    {% include "base.html" %}
+    <main>
+    <p id="greet">UniSquat</p>
+    <div class="flex">
+        <p>🚧 <b>Version en cours de développement !</b> 🚧</p>
+    </div>
+    <div class="flex">
+        <p>Développé par <a href="https://forge.chapril.org/Wantoo">Wantoo</a>.</p>
+    </div>
+    <div class="flex">
+        <button onClick="history.go(-1);">Retour</button>
+    </div>
+    </main>
+    <footer></footer>
+  </body>
+</html>
diff --git a/templates/base.html b/templates/base.html
index 77e4275..83d6914 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,164 +1 @@
 <div class="flex"><header>UniSquat</header></div>
-<style>
-    :root {
-        --bg: #1f0e1c;
-        --bg-dark: #3e2137;
-        --bg-light: #584563;
-        --fg: #f5edba;
-        --hl: #9d303b;
-    }
-
-    body {
-        background: var(--bg);
-		margin: 0px;
-		padding: 0px;
-        font-family: "ubuntu", "sans";
-        color: var(--fg);
-    }
-
-    header {
-        background: var(--hl);
-		display: inline-block;
-        font-size: 250%;
-		width: 100%;
-        font-weight: lighter;
-        text-align: center;
-    }
-
-    main {
-        display: flex;
-        flex-direction: column;
-        line-height: 1.7;
-    }
-
-    nav {
-        vertical-align: top;
-        margin: 10px;
-        width: 50%;
-    }
-
-    #body {
-        margin: 10px;
-    }
-
-    p {
-        text-align: justify;
-        text-indent: 50px;
-    }
-
-    .flex-container {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    h1, h2, h3, h4 {
-        font-weight: lighter;
-        border-left: solid;
-        border-width: 5px;
-		background: var(--bg-dark);
-		display: inline-block;
-        border-color: var(--hl);
-    }
-
-    a {
-        color: var(--hl);
-    }
-
-    img {
-        margin: 10px;
-        align-self: flex-start;
-        max-width: 200px;
-        border-radius: 10px;
-    }
-
-    iframe {
-        max-width: 200px;
-        max-height: 500px;
-    }
-
-    ul {
-        margin-bottom: 5px;
-    }
-
-    dt {
-        font-weight: bold;
-        font-size: 90%;
-        border-bottom-style: solid;
-        border-bottom-width: 2px;
-        border-bottom-color: var(--bg-light);
-        padding: 10px;
-    }
-
-    dt .details {
-        font-weight: normal;
-        font-size: 80%;
-    }
-
-    input[type="submit"]{
-        background: var(--bg-light);
-        border-style: solid;
-        border-width: 1px;
-        border-color: var(--bg);
-        padding: 20px;
-        border-radius: 10px;
-		transition: background 0.1s;
-		margin: 10px;
-    }
-    
-    input[type="submit"]:hover {
-        background: var(--bg-dark);
-    }
-
-	input[type="checkbox"] {
-		display: none;
-		width: 0px;
-		height: 0px;
-	}
-
-	.flex {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-	}
-
-	input[type="checkbox"]:hover + label {
-		background: var(--bg-dark);
-	}
-
-	input[type="checkbox"]:checked + label {
-		background: var(--hl);
-	}
-	
-	input[type="checkbox"] + label {
-		background: var(--bg-light);
-		transition: background 0.1s;
-		display: inline-block;
-		width: 200px;
-		height: 80px;
-		padding: 10px;
-		margin: 10px;
-		text-align: center;
-        border-radius: 15px;
-  		box-shadow: 5px 5px black;
-	}
-
-    .done {
-        background: var(--bg-dark);
-        text-decoration: line-through;
-    }
-
-    input {
-        background: var(--bg-dark);
-    }
-
-    #greet {
-        font-size: 200%;
-        text-align: center;
-        font-weight: lighter;
-    }
-
-
-    @media screen and (max-width: 769px) {
-    }
-</style>
diff --git a/templates/date-select.html b/templates/date-select.html
index d5afa58..5166ce2 100644
--- a/templates/date-select.html
+++ b/templates/date-select.html
@@ -3,20 +3,26 @@
   <head>
     <meta charset="utf-8">
     <title>UniSquat</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../static/style.css">
     <meta name="viewport" content="width=300, initial-scale=1" />
   </head>
   <body>
     {% include "base.html" %}
     <main>
       <form action="/app/free-rooms" method="get">
+        <div class="flex"><p>Choisisssez une date</p></div>
         <div class="flex">
-          <label for="froom-date">Choisisssez une date :</label>
-          <input type="date" id="froom-date" name="froom-date">
+          <input type="date" id="froom-date" name="date"/>
+        </div>
+        <div class="flex">
+          <input type="time" id="froom-time" name="time"/>
         </div>
         <div class="flex">
           <input type="submit" value="Valider">
         </div>
+        {% for d in dident_list : %}
+          <span style="display: none;"><input type="text" name="dept" value="{{ d }}"/></span>
+        {% endfor %}
       </form>
     </main>
     <footer></footer>
diff --git a/templates/dept-select.html b/templates/dept-select.html
index ccaf1c5..6f9163e 100644
--- a/templates/dept-select.html
+++ b/templates/dept-select.html
@@ -9,7 +9,7 @@
   <body>
     {% include "base.html" %}
     <main>
-		<div class="flex"><p>Sélectionnez des départements dans la liste :</p></div>
+		<div class="flex"><p>Sélectionnez des départements dans la liste</p></div>
       <form action="/app/free-rooms" method="get">
 		<div class="flex">
         	<input type="submit" value="Valider">
diff --git a/templates/free-rooms.html b/templates/free-rooms.html
index 7963618..e63fa93 100644
--- a/templates/free-rooms.html
+++ b/templates/free-rooms.html
@@ -17,6 +17,10 @@
       {% endfor %}
       <input type="submit" value="Choisir une date"/>
     </form>
+    <div class="flex">
+      <button onClick="location.href='/app'" type="button">Choisir des départements</button>
+      <button onClick="location.href='/app/about'" type="button">À propos</button>
+    </div>
     <h1>Disponibles maintenant</h1>
     <div class="flex-container">
       <ul>
diff --git a/templates/index.html b/templates/index.html
index 70f3ee5..f0627d9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,14 +3,16 @@
   <head>
     <meta charset="utf-8">
     <title>UniSquat</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../static/style.css">
     <meta name="viewport" content="width=300, initial-scale=1" />
   </head>
   <body>
     {% include "base.html" %}
     <main>
     <p id="greet">Bienvenue sur UniSquat !</p>
-    <a style="text-align: center;" href="/app">Accès à l'application</a>
+    <div class="flex">
+      <button onClick="location.href='/app'">Démarrer</button>
+    </div>
     </main>
     <footer></footer>
   </body>