diff --git a/run-dev-server b/run-dev-server
index 07bf5f5..4827992 100755
--- a/run-dev-server
+++ b/run-dev-server
@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-DEBUG=true CONFIG=./elig-test.ini FLASK_APP=webapp poetry run flask run --reload
+DEBUG=true TEMPLATES_AUTO_RELOAD=true FLASK_ENV=development CONFIG=./elig-test.ini FLASK_APP=webapp poetry run flask run --reload
diff --git a/static/find_pto.jpg b/static/find_pto.jpg
new file mode 100644
index 0000000..3f04c18
Binary files /dev/null and b/static/find_pto.jpg differ
diff --git a/templates/landing_form.html b/templates/landing_form.html
index cf61cbf..4192ca8 100644
--- a/templates/landing_form.html
+++ b/templates/landing_form.html
@@ -3,7 +3,12 @@
 <html lang="fr">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
   <title>Aquilenet: Éligibilité FTTH</title>
   <style>
     {% include 'style.css' %}
@@ -11,15 +16,67 @@
 </head>
 
 <body>
-  <h1 id="aquilenet-title">Aquilenet</h1>
-  <div id="container">
-    <h1 id="main-title">Test d'Éligibilité FTTH Aquilenet</h1>
+  <h1 class="text-center" id="aquilenet-title">AQUILENET</h1>
+  <div id="mainContainer" class="container">
+    
+    <div class="row d-flex justify-content-between align-items-center" data-parent="#mainContainer">
+      
+      <div class="col-12 text-intro">
+        <div id="methodPto" class="collapse show testMethods">
+          
+          <h2 class="text-center form-title">Test d'éligibilité par PTO</h1>
+            <form>
+              <div class="form-group" id="ptoForm">
+                <label class="form-label" for="pto-number">Numéro PTO</label>
+                <input required type="text" class="form-control" id="pto-number" aria-describedby="ptoHelp" placeholder="OOOO-XXXX-XXXX" oninvalid="this.setCustomValidity('Veuillez renseigner le PTO')" oninput="setCustomValidity('')">
+                
+                <small id="ptoHelp" class="form-text btn btn-link" data-toggle="collapse" data-target="#ptoInfo" aria-expanded="true" aria-controls="ptoInfo">Où trouver mon numéro de PTO ?</small>
+                <div id="ptoInfo" class="collapse" aria-labelledby="ptoForm" data-parent="#ptoForm">
+                  <div class="card-body">
+                    PTO (Point de terminaison optique) est un numéro unique que vous pouvez trouver sur le boîtier de raccordement de la fibre.
+                    C'est un petit boîtier blanc installé dans la maison
+                    <br>
+                    <img src="{{url_for('static', filename='find_pto.jpg')}}" class="img-fluid" alt="Responsive image">
+                  </div>
+                </div>
+              </div>  
+              <button type="submit" class="btn btn-sable">Tester le PTO</button>
+            </form>
+            
+            <button id="buttonNoPto" type="button" data-toggle="collapse" data-target=".testMethods" class="btn btn-link" aria-expanded="false" aria-controls="methodPto methodAddress">Je n'ai pas/ne trouve pas le PTO, tester autrement</button>
+        </div>
+
+        <div id="methodPto" class="collapse testMethods">
+          <h2 class="text-center form-title">Test d'éligibilité par adresse</h1>
+          <form>
+            <!-- <div class="form-group" id="ptoForm">
+              <label class="form-label" for="pto-number">Numéro PTO</label>
+              <input type="text" class="form-control" id="pto-number" aria-describedby="ptoHelp" placeholder="OOOO-XXXX-XXXX">
+              <small id="ptoHelp2" class="form-text btn btn-link" data-toggle="collapse" data-target="#ptoInfo" aria-expanded="true" aria-controls="ptoInfo">Où trouver mon numéro de PTO ?</small>
+              <div id="ptoInfo2" class="collapse" aria-labelledby="ptoForm" data-parent="#ptoForm">
+                <div class="card-body">
+                  PTO (Point de terminaison optique) est un numéro unique que vous pouvez trouver sur le boîtier de raccordement de la fibre.
+                  C'est un petit boîtier blanc installé dans la maison
+                  <br>
+                  <img src="{{url_for('static', filename='find_pto.jpg')}}" class="img-fluid" alt="Responsive image">
+                </div>
+              </div>
+            </div>   -->
+            <button type="button" class="btn btn-sable">Tester l'adresse</button>
+          </form>
+          <button id="buttonReturnPto" type="button" data-toggle="collapse" data-target=".testMethods" class="btn btn-link" aria-expanded="false" aria-controls="methodPto methodAddress">Revenir au test par PTO</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- <div id="container">
+    <h1 id="main-title">Testez avec votre numéro de PTO</h1>
     <form method="post" action="/result">
       <label>Numéro de PTO :
         <input name="pto"/>
       </label>
       <button>Tester</button>
     </form>
-  </div>
+  </div> -->
 </body>
 </html>
diff --git a/templates/style.css b/templates/style.css
index ef5c813..a1ff2a2 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -1,16 +1,81 @@
+html, body {
+  height : 100%;
+  /* font-size: 20px; */
+}
 body {
     background-color:  #1787c2;
-    display: flex;
-    flex-direction: column;
+    /* display: flex;
+    flex-direction: column; */
     font-family: 'Titillium Web', sans-serif;
 }
 #aquilenet-title {
-    color: white;
+    color: whitesmoke;
     align-self: center;
     font-size: 4em;
     margin-top: .3em;
     margin-bottom: .5em;
 }
+.form-title {
+    color: whitesmoke;
+    align-self: center;
+    font-size: 2em;
+    margin-top: .3em;
+    margin-bottom: .5em;
+}
+.form-label, .card-body {
+  color: whitesmoke;
+}
+#ptoHelp {
+  color: rgb(192, 192, 192);
+}
+.invalid-feedback {
+  display: block;
+}
+.sable .btn-ciel, .ciel .btn-sable{
+  padding: 8px;
+  border-radius: 10px;
+  box-shadow: 3px 3px 3px rgba(0,0,0,.3);
+  font-size: 1.1em
+}
+.sable .btn-ciel:hover, .ciel .btn-sable:hover{
+  box-shadow: none;
+}
+
+#buttonNoPto, #buttonReturnPto {
+  color: whitesmoke;
+  text-decoration: underline;
+}
+/* .btnSubmit {
+  flex: 1 1 auto;
+  margin: 10px;
+  padding: 30px;
+  text-align: center;
+  text-transform: uppercase;
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: white;
+  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
+  box-shadow: 0 0 20px #eee;
+  border-radius: 10px;
+ } */
+
+
+.btn-sable:hover {
+  background-position: right center; /* change the direction of the change here */
+}
+
+.btn-sable {
+  /* box-shadow: 0 0 20px #eee; */
+  /* border-radius: 10px; */
+  color: darkslategray;
+  transition: 0.5s;
+  background-size: 200% auto;
+  text-shadow: dimgray 0 1px 1px;
+  background-image: linear-gradient(to bottom, #ffd38c 0%, #ffedd0 51%,  #e0e0e0 100%);
+}
+/* #fda085 51%, */
+
+/*
 #container {
     width: 80%;
     background-color: #ffd38c;
@@ -43,4 +108,4 @@ thead, tfoot {
 td {
     padding-left: 1em;
     padding-right: 1em;
-}
+} */
