diff --git a/Source/BusinessClass/TextQuestion.php b/Source/BusinessClass/TextQuestion.php
index 78d0f2f..759f43d 100644
--- a/Source/BusinessClass/TextQuestion.php
+++ b/Source/BusinessClass/TextQuestion.php
@@ -17,9 +17,11 @@ class TextQuestion extends Question
         $content = $this->getContent();
         $id = $this->getId();
 
-        return "\t\t\t<div class='question'>
-                <label><strong>$content</strong></label>
-                <br><input data-id='$id' type='text' name='answers[]' />
-            </div><br>\n";
+        return "<div class='tab'>
+                    <h6>$content</h6>
+                    <p>
+                        <input placeholder='...' oninput='this.className = ''''  type='text' name='answers[]'>
+                    </p>
+                </div>\n";
     }
 }
diff --git a/Source/Model/ModelCandidate.php b/Source/Model/ModelCandidate.php
index 12cace7..98458cf 100644
--- a/Source/Model/ModelCandidate.php
+++ b/Source/Model/ModelCandidate.php
@@ -76,25 +76,38 @@ class ModelCandidate
         $nbQuestions = count($questions);
         $time = round(($nbQuestions * 20)/60);
 
-        $html = "
-    <h1>$title</h1>\n
-    <br>
-    <h3>$description</h3>\n
-    <br>
-    <h4><i>Temps estimé</i> : $time minutes</h4>
-    <div id='container_form'>\n
-        <form method='post'>\n";
+
+
+
+        $html = "<div class='container mt-5'>
+    <div class='row d-flex justify-content-center align-items-center'>
+        <div class='col-md-8'>
+            <form id='regForm' method='post'>
+                <h1 id='register'>$title</h1>
+                <div class='all-steps' id='all-steps'>";
+
+        for ($i = 0; $i < sizeof($questions); $i++) {
+            $html.= "<span class='step'><i class='fa'></i></span>";
+        }
+        $html.= "</div>";
 
         foreach ($questions as $question) {
             $html.= $question->printStrategy()."\n";
         }
 
         if (count($questions) > 0) {
-            $html.= "\t\t\t<input type='submit' value='Envoyer' id='button' style='margin-left: 45%'>\n
-\t\t\t<input type='hidden' name='data_ids' value=''>
-\t\t\t<input type='hidden' name='action' value='submitForm'>
-\t\t</form>\n
-\t</div><br><br><br>\n";
+            $html.= "<div class='thanks-message text-center' id='text-message'> <img src='https://i.imgur.com/O18mJ1K.png' width='100' class='mb-4'>
+                    <h3>Merci d'avoir répondu !</h3> <span>Nous vous rencontacterons si votre profil nous intéresse !</span>
+                </div>
+                <div style='overflow:auto;' id='nextprevious'>
+                    <div style='float:right;'>
+                        <button type='button' id='prevBtn' onclick='nextPrev(-1)'><i class='fa fa-angle-double-left'></i></button>
+                        <button type='button' id='nextBtn' onclick='nextPrev(1)'><i class='fa fa-angle-double-right'></i></button> </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>";
         } else {
             $html.= "\t\t</form>\n
 \t</div>\n";
diff --git a/Source/Views/CSS/styles.css b/Source/Views/CSS/styles.css
new file mode 100644
index 0000000..e0061a7
--- /dev/null
+++ b/Source/Views/CSS/styles.css
@@ -0,0 +1,119 @@
+body {
+    background: #eee
+}
+
+#regForm {
+    background-color: #ffffff;
+    margin: 0px auto;
+    font-family: Raleway;
+    padding: 40px;
+    border-radius: 30px;
+    background-color: rgba(23,143,150,0.7);
+}
+
+#register{
+    color: white;
+}
+
+h1 {
+    text-align: center
+}
+
+input {
+    padding: 10px;
+    width: 100%;
+    font-size: 17px;
+    font-family: Raleway;
+    border: 1px solid #aaaaaa;
+    border-radius: 10px;
+    -webkit-appearance: none;
+}
+
+
+
+.tab input:focus{
+
+    border:1px solid #6a1b9a !important;
+    outline: none;
+}
+
+input.invalid {
+
+    border:1px solid #e03a0666;
+}
+
+.tab {
+    display: none
+}
+
+button {
+    background-color: #6A1B9A;
+    color: #ffffff;
+    border: none;
+    border-radius: 50%;
+    padding: 10px 20px;
+    font-size: 17px;
+    font-family: Raleway;
+    cursor: pointer
+}
+
+button:hover {
+    opacity: 0.8
+}
+
+button:focus{
+
+    outline: none !important;
+}
+
+#prevBtn {
+    background-color: #bbbbbb
+}
+
+
+.all-steps{
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
+}
+
+.step {
+    height: 10px;
+    width: 10px;
+    margin: 0 2px;
+    background-color: #bbbbbb;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 15px;
+    color: #6a1b9a;
+    opacity: 0.5;
+}
+
+.step.active {
+    opacity: 1
+}
+
+
+.step.finish {
+    color: #fff;
+    background: green;
+    opacity: 1;
+}
+
+
+
+.all-steps {
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 30px
+}
+
+.thanks-message {
+    display: none
+}
\ No newline at end of file
diff --git a/Source/Views/HTML/form.php b/Source/Views/HTML/form.php
index 759300a..a9a3ce6 100644
--- a/Source/Views/HTML/form.php
+++ b/Source/Views/HTML/form.php
@@ -2,14 +2,15 @@
 <html lang="en">
 <head>
     <?php
-        global $googleApis, $googleStatic, $poppins, $icon, $logoUCA;
+    global $googleApis, $googleStatic, $poppins, $icon, $logoUCA;
     ?>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="Views/CSS/form.css" />
-    <link rel="stylesheet" href="Views/CSS/base.css" />
+    <link rel="stylesheet" href="Views/CSS/styles.css" />
     <link rel="preconnect" href="<?php echo $googleApis; ?>">
     <link rel="preconnect" href="<?php echo $googleStatic; ?>" crossorigin>
     <link href="<?php echo $poppins; ?>" rel="stylesheet">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
     <title>Formulaire de témoignage</title>
     <link rel="shortcut icon" href="<?php echo $icon; ?>" type="image/x-icon">
     <link rel="icon" href="<?php echo $icon; ?>" type="image/x-icon">
@@ -24,5 +25,8 @@
 </body>
 
 <script src="Views/JS/getData-Ids.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
+<script src="Views/JS/scripts.js"></script>
 
 </html>
diff --git a/Source/Views/JS/scripts.js b/Source/Views/JS/scripts.js
new file mode 100644
index 0000000..e21d364
--- /dev/null
+++ b/Source/Views/JS/scripts.js
@@ -0,0 +1,68 @@
+var currentTab = 0;
+document.addEventListener("DOMContentLoaded", function(event) {
+
+
+    showTab(currentTab);
+
+});
+
+function showTab(n) {
+    var x = document.getElementsByClassName("tab");
+    x[n].style.display = "block";
+    if (n == 0) {
+        document.getElementById("prevBtn").style.display = "none";
+    } else {
+        document.getElementById("prevBtn").style.display = "inline";
+    }
+    if (n == (x.length - 1)) {
+        document.getElementById("nextBtn").innerHTML = '<i class="fa fa-angle-double-right"></i>';
+    } else {
+        document.getElementById("nextBtn").innerHTML = '<i class="fa fa-angle-double-right"></i>';
+    }
+    fixStepIndicator(n)
+}
+
+function nextPrev(n) {
+    var x = document.getElementsByClassName("tab");
+    if (n == 1 && !validateForm()) return false;
+    x[currentTab].style.display = "none";
+    currentTab = currentTab + n;
+    if (currentTab >= x.length) {
+
+        document.getElementById("nextprevious").style.display = "none";
+        document.getElementById("all-steps").style.display = "none";
+        document.getElementById("register").style.display = "none";
+        document.getElementById("text-message").style.display = "block";
+
+
+
+
+    }
+    showTab(currentTab);
+}
+
+function validateForm() {
+    var x, y, i, valid = true;
+    x = document.getElementsByClassName("tab");
+    y = x[currentTab].getElementsByTagName("input");
+    for (i = 0; i < y.length; i++) {
+        if (y[i].value == "") {
+            y[i].className += " invalid";
+            valid = false;
+        }
+
+
+    }
+    if (valid) {
+        document.getElementsByClassName("step")[currentTab].className += " finish";
+    }
+    return valid;
+}
+
+function fixStepIndicator(n) {
+    var i, x = document.getElementsByClassName("step");
+    for (i = 0; i < x.length; i++) {
+        x[i].className = x[i].className.replace(" active", "");
+    }
+    x[n].className += " active";
+}
\ No newline at end of file