Révision complète du css et modification du js principalement

86 files changed, 1344 insertions, 1118 deletions

diff --git a/Core/Functions/func_admin.php b/Core/Functions/func_admin.php
index 16cf7c0..baccdae 100644
--- a/Core/Functions/func_admin.php
+++ b/Core/Functions/func_admin.php
@@ -19,7 +19,7 @@ function admin_user_del ($userId) {
 
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
@@ -40,7 +40,7 @@ function admin_job_add($jobNameEn, $jobNameFr) {
 
         // Redirection vers message avec l'index du message à afficher.
         $_SESSION["message"] = $message;
-        header("Location: /Templates/message.php");
+        header("Location: /Template/message.php");
         die();
 }
 
@@ -57,7 +57,7 @@ function admin_job_del($jobId) {
     
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
@@ -74,7 +74,7 @@ function admin_mission_del($missionId) {
     
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/Functions/func_info.php b/Core/Functions/func_info.php
index 8464fe1..89b1688 100644
--- a/Core/Functions/func_info.php
+++ b/Core/Functions/func_info.php
@@ -34,7 +34,7 @@ function info_update_user_infos($userInfos, $userId, $userStatus) {
     // Redirection vers message avec l'index du message à afficher.
     $message = ["infosUpdate", "success"];
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/Functions/func_language.php b/Core/Functions/func_language.php
index a1c1498..b92395d 100644
--- a/Core/Functions/func_language.php
+++ b/Core/Functions/func_language.php
@@ -14,7 +14,7 @@ function language_set($language) {
     if ($_SESSION["src"] == "index") {
         header("Location: /".$_SESSION["src"].".php");
     } else {
-        header("Location: /Templates/".$_SESSION["src"].".php");
+        header("Location: /Template/".$_SESSION["src"].".php");
     }
     die();
 }
diff --git a/Core/Functions/func_login.php b/Core/Functions/func_login.php
index 6456ba1..f0c72c7 100644
--- a/Core/Functions/func_login.php
+++ b/Core/Functions/func_login.php
@@ -71,7 +71,7 @@ function login($cookie, $email = null, $pass = null, $remember = 0) {
 
     // On redirige vers message.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/Functions/func_logout.php b/Core/Functions/func_logout.php
index dd6a411..e1c28bf 100644
--- a/Core/Functions/func_logout.php
+++ b/Core/Functions/func_logout.php
@@ -33,7 +33,7 @@ function logout() {
     // Enfin on redirige avec le bon message.
     $message = ["logout", "success"];
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/Functions/func_mission.php b/Core/Functions/func_mission.php
index 9d009c5..acc59fa 100644
--- a/Core/Functions/func_mission.php
+++ b/Core/Functions/func_mission.php
@@ -13,7 +13,7 @@ function mission_initiate($proId) {
         "proId"   => $proId,
         "proJobs" => $dbsearch->get_pro_job_by_proid($proId)
     ];
-    header("Location: /Templates/mission.php");
+    header("Location: /Template/mission.php");
     die();
 }
 
@@ -30,7 +30,7 @@ function mission_register($subject, $clientId, $proId, $jobId) {
 
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
@@ -47,7 +47,7 @@ function mission_review($missionId, $review, $note) {
 
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/Functions/func_myMission.php b/Core/Functions/func_myMission.php
index 3531c48..bf3a2a6 100644
--- a/Core/Functions/func_myMission.php
+++ b/Core/Functions/func_myMission.php
@@ -18,7 +18,7 @@ function mymission_accept_mission($missionId) {
 
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
@@ -36,7 +36,7 @@ function mymission_complete_mission($missionId, $userStatus) {
             $_SESSION["missionCompleted"] = [
                 "missionId" => $missionId
             ];
-            header("Location: /Templates/mission.php");
+            header("Location: /Template/mission.php");
             die();
         default:
             break;
@@ -51,7 +51,7 @@ function mymission_complete_mission($missionId, $userStatus) {
     
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/Functions/func_register.php b/Core/Functions/func_register.php
index b7c02cd..f7686e7 100644
--- a/Core/Functions/func_register.php
+++ b/Core/Functions/func_register.php
@@ -23,7 +23,7 @@ function register($email, $password, $userStatus) {
 
     // Redirection vers message avec l'index du message à afficher.
     $_SESSION["message"] = $message;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
diff --git a/Core/wrapper.php b/Core/wrapper.php
index 89e7b96..ea4be30 100644
--- a/Core/wrapper.php
+++ b/Core/wrapper.php
@@ -171,7 +171,17 @@ if (isset($_SESSION["src"])) {
     } elseif ($_SESSION["src"] == "index"
               && (isset($_POST["mandateProId"]) && $_POST["mandateProId"] !== "")
     ) {
-        mission_initiate($_POST["mandateProId"]);
+        if (isset($_SESSION["loggedIn"], $_SESSION["userStatus"])
+            && $_SESSION["loggedIn"]
+            && $_SESSION["userStatus"] == 2
+        ) {
+            mission_initiate($_POST["mandateProId"]);
+        } else {
+            $message = ["missionRegister", "notConnected"];
+            $_SESSION["message"] = $message;
+            header("Location: /Template/message.php");
+            die();
+        }
 
     } elseif  ($_SESSION["src"] == "mission"
                && isset($_SESSION["loggedIn"], $_SESSION["userStatus"],
diff --git a/Database/dbmain.php b/Database/dbmain.php
index 77999f9..b1777ba 100644
--- a/Database/dbmain.php
+++ b/Database/dbmain.php
@@ -55,8 +55,8 @@ class DbMain {
         `zipCode`     VARCHAR(6) NOT NULL,
         `city`        VARCHAR(128) NOT NULL,
         `degree`      VARCHAR(128) NULL DEFAULT NULL,
-        `capability`  TEXT NULL DEFAULT NULL,
-        `description` TEXT NULL DEFAULT NULL,
+        `capability`  VARCHAR(256) NULL DEFAULT NULL,
+        `description` VARCHAR(256) NULL DEFAULT NULL,
         `userId`      INT UNSIGNED NOT NULL,
         PRIMARY KEY (`userId`),
         INDEX `fk_userinfo_userId_idx` (`userId` ASC) VISIBLE,
@@ -105,7 +105,7 @@ class DbMain {
         `date`              TIMESTAMP NOT NULL,
         `subject`           VARCHAR(128) NULL DEFAULT NULL,
         `note`              TINYINT(1) UNSIGNED NULL DEFAULT NULL,
-        `review`            TEXT NULL DEFAULT NULL,
+        `review`            VARCHAR(256) NULL DEFAULT NULL,
         `acceptedByPro`     TIMESTAMP NULL DEFAULT NULL,
         `validatedByClient` TIMESTAMP NULL DEFAULT NULL,
         `validatedByPro`    TIMESTAMP NULL DEFAULT NULL,
diff --git a/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb b/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb
index 570f173..3a7249d 100644
--- a/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb
+++ b/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb
diff --git a/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb.bak b/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb.bak
index fe7c98e..570f173 100644
--- a/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb.bak
+++ b/Documents_et_infos/Bdd_mysql/mysql_alphajob.mwb.bak
diff --git a/Documents_et_infos/Bdd_mysql/mysql_alphajob.png b/Documents_et_infos/Bdd_mysql/mysql_alphajob.png
index d28858b..a9b8e1c 100644
--- a/Documents_et_infos/Bdd_mysql/mysql_alphajob.png
+++ b/Documents_et_infos/Bdd_mysql/mysql_alphajob.png
diff --git a/Documents_et_infos/todo.txt b/Documents_et_infos/todo.txt
index 429031f..70bac07 100644
--- a/Documents_et_infos/todo.txt
+++ b/Documents_et_infos/todo.txt
@@ -2,7 +2,7 @@
 #################################################
 
 - Global front
-    - Système de notification ? (5)
+    - Système de notification ? (5 sera l'élément suivi pour le dossier pro)
 
 - Revoir front Client & Pro
     - Requète de mission pour un pro sur le moteur de recherche. (DONE)
diff --git a/Medias/Images/slide0.jpg b/Media/Images/slide0.jpg
index d533b52..d533b52 100644
--- a/Medias/Images/slide0.jpg
+++ b/Media/Images/slide0.jpg
diff --git a/Medias/Images/slide1.jpg b/Media/Images/slide1.jpg
index b9a175a..b9a175a 100644
--- a/Medias/Images/slide1.jpg
+++ b/Media/Images/slide1.jpg
diff --git a/Medias/Images/slide2.jpg b/Media/Images/slide2.jpg
index 42b38ab..42b38ab 100644
--- a/Medias/Images/slide2.jpg
+++ b/Media/Images/slide2.jpg
diff --git a/Statics/Css/Flags/flag.css b/Static/Css/Flags/flag.css
index 707b523..707b523 100644
--- a/Statics/Css/Flags/flag.css
+++ b/Static/Css/Flags/flag.css
diff --git a/Statics/Css/Fontsawesome/all.css b/Static/Css/Fontsawesome/all.css
index 3efe071..3efe071 100644
--- a/Statics/Css/Fontsawesome/all.css
+++ b/Static/Css/Fontsawesome/all.css
diff --git a/Static/Css/admin.css b/Static/Css/admin.css
new file mode 100644
index 0000000..b92ae2c
--- /dev/null
+++ b/Static/Css/admin.css
@@ -0,0 +1,56 @@
+
+/* BUTTONS */
+#adminButtons {
+    display:         flex;
+    justify-content: space-around;
+    gap:             1em;
+    width:           80%;
+    margin-left:     auto;
+    margin-right:    auto;
+    padding:         2em;
+    border-bottom:   var(--mainSiteColor) solid 2px ;
+}
+
+/* SECTION JOBS*/
+#secAdminJobs form {
+    flex-direction:  column;
+    justify-content: space-around;
+}
+
+#secAdminJobs form label i {
+    width:         30px;
+    border-radius: 0px;
+}
+
+#secAdminJobs form label i:first-child {
+    border-radius: var(--iBorderRadius);
+}
+
+/* MAIN */
+#mainAdmin section {
+    display: none;
+}
+
+#mainAdmin form {
+    display:         flex;
+    justify-content: center;
+    gap:             1em;
+    margin:          1em;
+}
+
+#mainAdmin pre {
+    font-family: SourceSansPro;
+    white-space: pre-wrap;
+    margin:      0.3em 0em;
+}
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+    #secAdminUsers form {
+        flex-direction: column;
+    }
+    
+    #secAdminMissions form {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/Static/Css/footer.css b/Static/Css/footer.css
new file mode 100644
index 0000000..b806b47
--- /dev/null
+++ b/Static/Css/footer.css
@@ -0,0 +1,11 @@
+
+/* FOOTER */
+footer {
+    min-height:         10vh;
+    display:            flex;
+    flex-direction:     column;
+    text-align:         center;
+    font-size:          var(--fontSizeSmall);
+    color:              var(--footerTextColor);
+    background-color:   var(--footerBgColor);
+}
diff --git a/Static/Css/login.css b/Static/Css/login.css
new file mode 100644
index 0000000..915b5f6
--- /dev/null
+++ b/Static/Css/login.css
@@ -0,0 +1,19 @@
+
+/* MAIN */
+#mainLogin form {
+    display:         flex;
+    flex-direction:  column;
+    align-items:     center;
+    justify-content: space-around;
+    gap:             1em;
+    padding:         1.5% 5%;
+}
+
+#mainLogin label {
+    width: 70%;
+}
+
+#mainLogin input[type="email"],
+#mainLogin input[type="password"] {
+    width: inherit;
+}
diff --git a/Static/Css/main.css b/Static/Css/main.css
new file mode 100644
index 0000000..a602db3
--- /dev/null
+++ b/Static/Css/main.css
@@ -0,0 +1,214 @@
+/* 
+Sites web utilisés pour le CSS:
+https://css-tricks.com/guides/
+https://stackoverflow.com/
+https://www.w3schools.com/css/default.asp
+
+Toutes les recherches sont effectuées en anglais
+sur mon instance SearX https://searx.debulois.fr
+*/
+
+:root {
+    --mainSiteColor:           #c0392b;
+    --bodyBg:                  #fafafa;  
+    --separatorBg:              var(--bodyBg);
+    --bg:                      white;
+    --text:                    black;
+
+    --navbarTextColor:          var(--text);
+    --headerBg:                 var(--bg);
+    --navBg:                   #f8f8f8;
+
+    --slideText:               whitesmoke;
+    --slideBg:                 black;
+    --slideStroke:             black;
+
+    --footerTextColor:         #636e72;
+    --footerBgColor:           #2d3436;
+
+    --iconColor:               white;
+    --btnHoverBg:              #e74c3c;
+
+    --tableText:                var(--text);
+    --tableBg:                  var(--bodyBg);
+    --tdBorderColor:           rgba(0, 0, 0, 0.2);
+    --tableStarUnchecked:      darkgray;
+    --tableStarChecked:        orange;
+
+    --messageTextErrorColor:   red;
+    --messageTextSuccessColor: green;
+
+    --inputBorder:              2px solid var(--mainSiteColor);
+    --thBorder:                 2px solid var(--mainSiteColor);
+    --tdBorder:                 2px solid var(--tdBorderColor);
+    --iBorderRadius:            5px 0px 0px 5px;
+    --inputBorderRadius:        0px 5px 5px 0px;
+
+    --fontSizeI:                20px;
+    --fontSizeSlideP:           34px;
+    --fontSizeSmall:            16px;
+    --fontSizeSmallPlus:        18px;
+    --fontSizeMedium:           26px;
+    --fontSizeLarge:            28px;
+}
+
+@font-face {
+    font-family: "akira";
+    src:          url("../Fonts/akira.otf")
+}
+
+@font-face {
+    font-family: "SourceSansPro";
+    src:         url("../Fonts/SourceSansPro.ttf")
+}
+
+.show_flex {
+    display:        flex !important;
+    flex-direction: column;
+}
+
+.show_block {
+    display: block !important;
+}
+
+.noBorder {
+    border:           none !important;
+    background-color: var(--bg) !important;
+}
+
+.separator {
+    height:             10vh;
+    background-color:   var(--separatorBg);
+}
+
+.info {
+    font-style: italic;
+}
+
+.spacer {
+    flex-grow: 2;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+    font-family:     SourceSansPro;
+    font-size:       var(--fontSizeSmall);
+    margin:          0px;
+    min-height:      100vh;
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-between;
+    background-color: var(--bodyBg);
+    color:            var(--textColor);
+}
+
+main {
+    width:             80%;
+    min-height:        70vh;
+    margin-left:       auto;
+    margin-right:      auto;
+    display:           flex;
+    flex-direction:    column;
+    justify-content:   center;
+    text-align:        center;
+    border-top:        6px solid var(--mainSiteColor);
+    border-right:      3px solid var(--mainSiteColor);
+    border-bottom:     3px solid var(--mainSiteColor);
+    border-left:       3px solid var(--mainSiteColor);
+    border-radius:     3px;
+    background-color:  var(--bg);
+    color:             var(--textColor);
+}
+
+main h2 {
+    max-width:     80%;
+    font-size:     var(--fontSizeLarge);
+    margin-left:   auto;
+    margin-right:  auto;
+    padding:       1.5% 3%;
+    border-bottom: var(--mainSiteColor) 3px solid;
+}
+
+main h3 {
+    max-width:     80%;
+    font-size:     var(--fontSizeMedium);
+    margin-left:   auto;
+    margin-right:  auto;
+    padding:       0.5% 3%;
+    border-bottom: var(--mainSiteColor) 2px solid;
+}
+
+main label {
+    display:         flex;
+    justify-content: center;
+}
+
+main i {
+    width:            60px;
+    margin:           0px !important; /* important à cause de -> flag.css */
+    height:           2em !important; /* important à cause de -> all.css fontawesome*/
+    line-height:      2em !important; /* important à cause de -> all.css fontawesome*/
+    font-size:        var(--fontSizeI);
+    color:            var(--iconColor);
+    background-color: var(--mainSiteColor);
+    border-radius:    var(--iBorderRadius);
+}
+
+main table {
+    display:         block;
+    Overflow-x:      auto;
+    Overflow-y:      auto;
+    color:           var(--textColor);
+    padding:         1em;
+    border-collapse: collapse;
+    max-width:       95%;
+    margin-left:     auto;
+    margin-right:    auto;
+}
+
+main th {
+    font-size:        var(--fontSizeSmallPlus);
+    border:           var(--thBorder);
+    background-color: var(--tableBg);
+}
+
+main td {
+    border:           var(--tdBorder);
+    background-color: var(--tableBg);
+}
+
+
+select {
+    height:        1.6em;
+    line-height:   1.6em;
+    border-radius: 3px;
+    border:        var(--inputBorder);
+}
+
+main input[type="text"],
+main input[type="email"],
+main input[type="password"] {
+    border:        var(--inputBorder);
+    border-radius: var(--inputBorderRadius);
+}
+
+main input[type="submit"],
+main button {
+    color:            var(--textColor);
+    font-size:        var(--fontSizeSmall);
+    border:           var(--inputBorder);
+    background-color: var(--bg);
+    border-radius:    5px;
+    padding:          0.2em 0.3em;
+    transition:       all 0.08s ease-in-out;
+}
+
+main input[type="submit"]:hover,
+main button:hover {
+    cursor:             pointer;
+    color:              var(--bg);
+    background-color:   var(--btnHoverBg);
+}
diff --git a/Static/Css/message.css b/Static/Css/message.css
new file mode 100644
index 0000000..3ea29e3
--- /dev/null
+++ b/Static/Css/message.css
@@ -0,0 +1,19 @@
+
+.success {
+    color:           var(--messageTextSuccessColor);
+    font-weight:     bold;
+
+    text-decoration: underline;
+    font-size:       var(--fontSizeMedium);
+}
+
+.error {
+    color:           var(--messageTextErrorColor);
+    font-weight:     bold;
+    text-decoration: underline;
+    font-size:       var(--fontSizeMedium);
+}
+
+#mainMessage h3 {
+    border: none;
+}
\ No newline at end of file
diff --git a/Static/Css/mission.css b/Static/Css/mission.css
new file mode 100644
index 0000000..cd37466
--- /dev/null
+++ b/Static/Css/mission.css
@@ -0,0 +1,16 @@
+#mainMission form {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-around;
+    gap:             1em;
+    padding:         1.5% 5%;
+    align-items:     center;
+}
+
+#mainMission label {
+    width: 70%;
+}
+
+#mainMission input[type="text"] {
+    width: inherit;
+}
diff --git a/Static/Css/myMission.css b/Static/Css/myMission.css
new file mode 100644
index 0000000..5b6ad2a
--- /dev/null
+++ b/Static/Css/myMission.css
@@ -0,0 +1,26 @@
+
+#myMissionButtons {
+    display:         flex;
+    justify-content: space-around;
+    gap:             1em;
+    max-width:       80%;
+    margin-left:     auto;
+    margin-right:    auto;
+    margin-bottom:   1em;
+    padding:         2em;
+    border-bottom:   var(--mainSiteColor) solid 2px ;
+}
+
+#mainMyMission section {
+    display: none;
+}
+
+#mainMyMission p {
+    font-style: italic;
+}
+
+#mainMyMission pre {
+    font-family: SourceSansPro;
+    white-space: pre-wrap;
+    margin:      0.3em 0em;
+}
diff --git a/Static/Css/navbar.css b/Static/Css/navbar.css
new file mode 100644
index 0000000..327cde8
--- /dev/null
+++ b/Static/Css/navbar.css
@@ -0,0 +1,128 @@
+
+.showNav {
+    top: 0vh !important;
+}
+
+.navLinkClicked {
+    transform: scale(1.2) rotate(90deg);
+    color: var(--mainSiteColor) !important;
+}
+
+.headerInfoAdmin {
+    color: darkblue;
+}
+
+.headerInfoPro {
+    color: brown;
+}
+
+.headerInfoClient {
+    color: darkolivegreen;
+}
+
+header {
+    z-index: 1;
+    display: flex;
+    justify-content: space-around;
+    height:           10vh;
+    text-align: center;
+    background-color: var(--headerBg);
+    border-top:       var(--mainSiteColor) solid 6px;
+    border-bottom:    var(--mainSiteColor) solid 3px;
+}
+
+header h2 {
+    font-family: akira;
+    color:       var(--mainSiteColor) !important;
+    margin:      0px;
+}
+
+header a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align:       center;
+    flex-grow:       1;
+    color:           var(--navbarTextColor);
+    text-decoration: none;
+    transition:      all 0.1s ease-in-out;
+}
+
+header form {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: center;
+    flex-grow:       1;
+}
+
+header a:hover {
+    transform: scale(1.1);
+}
+
+header i {
+    all:          revert;
+    margin-right: 0.4em;
+    font-size:    var(--fontSizeI);
+}
+
+header a:first-child {
+    border-right: 3px solid var(--mainSiteColor);
+    background-color: var(--navBg);
+}
+
+header a:first-child:hover {
+    transform: none;
+}
+
+header a:first-child i {
+    color:      #404040;
+    font-size:  var(--fontSizeLarge);
+    margin:     0px;
+    transition: all 0.1s ease-in-out;
+}
+
+header a:first-child i:hover {
+    cursor: pointer;
+}
+
+nav {
+    top:              -10.5vh;
+    display:          flex;
+    position:         relative;
+    justify-content:  space-around;
+    height:           10vh;
+    border-bottom:    var(--mainSiteColor) solid 3px;
+    background-color: var(--navBg);
+    box-shadow:       0px 0px 6px #0e0e0e;
+    transition:       all 0.1s ease-in-out;
+}
+
+nav a {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: center;
+    text-align:      center;
+    flex-grow:       1;
+    color:           var(--navbarTextColor);
+    text-decoration: none;
+    transition:      all 0.1s ease-in-out;
+}
+
+nav a:hover {
+    color:     var(--mainSiteColor);
+    transform: scale(1.2);
+}
+
+nav p {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: center;
+    text-align:      center;
+    flex-grow:       1;
+}
+
+@media screen and (max-width: 768px) {
+    header a:first-child {
+        min-width: 20%;
+    }
+}
\ No newline at end of file
diff --git a/Static/Css/register.css b/Static/Css/register.css
new file mode 100644
index 0000000..e9a5009
--- /dev/null
+++ b/Static/Css/register.css
@@ -0,0 +1,22 @@
+
+#mainRegister form {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-around;
+    gap:             1em;
+    padding:         1.5% 5%;
+    align-items:     center;
+}
+
+#mainRegister label {
+    width: 70%;
+}
+
+#mainRegister:last-child {
+    justify-content: center !important;
+}
+
+#mainRegister input[type="email"],
+#mainRegister input[type="password"] {
+    width: inherit;
+}
diff --git a/Static/Css/search.css b/Static/Css/search.css
new file mode 100644
index 0000000..c9aa98b
--- /dev/null
+++ b/Static/Css/search.css
@@ -0,0 +1,70 @@
+.star {
+    width:            1.2em !important;
+    background-color: var(--tableBg) !important;
+    font-size:        var(--fontSizeSmall) !important;
+}
+
+.checked {
+    color: var(--tableStarChecked) !important;
+}
+
+.unchecked {
+    color: var(--tableStarUnchecked) !important;
+}
+
+/* DIV SEARCH */
+#divSearch {
+    width:           80%;
+    margin-left:     auto;
+    margin-right:    auto;
+    padding-bottom:  1em;
+    display:         flex;
+    flex-direction:  row;
+    flex-wrap:       wrap;
+    justify-content: space-around;
+    align-items:     center;
+    border-bottom:   var(--mainSiteColor) 2px solid;;
+}
+
+#mainSearch form {
+    display:         flex;
+    flex-direction:  row;
+    flex-grow:       1;
+    justify-content: center;
+    align-items:     center;
+    gap:             1em;
+}
+
+#mainSearch p {
+    font-size: var(--fontSizeSmallPlus);
+    font-style: italic;
+}
+
+#mainSearch select {
+    height:        3em;
+    font-size:     calc((var(--fontSizeI) * 2) / 3);
+    border-radius: var(--inputBorderRadius);
+}
+
+#mainSearch pre {
+    font-family: SourceSansPro;
+    white-space: pre-wrap;
+    margin:      0.3em 0em;
+}
+
+#formMandate {
+    margin: 1em auto;
+}
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+    .extend {
+        display: none;
+    }
+    #mainSearch form {
+        flex-direction: column;
+    }
+    #divSearch {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/Static/Css/slideshow.css b/Static/Css/slideshow.css
new file mode 100644
index 0000000..c7c2e99
--- /dev/null
+++ b/Static/Css/slideshow.css
@@ -0,0 +1,67 @@
+
+.slideDotSelected {
+    color:     var(--mainSiteColor);
+    transform: scale(1.4);
+}
+
+#secSlides {
+    display:         flex;
+    flex-direction:  column;
+    text-align:      center;
+    width:               100%;
+    height:              70vh;
+    background-color:    var(--navbarBg);
+    background-image:    url("/Media/Images/slide0.jpg");
+    background-size:     cover;
+    background-repeat:   no-repeat;
+    background-position: center;
+    transition:          background-image 0.3s linear;
+}
+
+#secSlides p {
+    display:                   none;
+    z-index:                   1;
+    margin:                    auto;
+    max-width:                 80%;
+    font-size:                 var(--fontSizeSlideP);
+    color:                     var(--slideText);
+    animation-timing-function: cubic-bezier(0, 0, 0, 1);
+    animation-name:            textSlide;
+    animation-duration:        5s;
+    animation-iteration-count: infinite;
+}
+
+#secSlides p span {
+    font-family: akira;
+    color:       var(--mainSiteColor);
+    text-shadow:
+         1px  1px 0 var(--slideStroke),          
+         1px -1px 0 var(--slideStroke),
+        -1px  1px 0 var(--slideStroke),
+        -1px -1px 0 var(--slideStroke);
+}
+
+#slideDots {
+    margin-bottom: 1em;
+}
+
+#slideDots i {
+    margin-right: 1em;
+}
+
+#slideDots i:last-child {
+    margin-right: none;
+}
+
+/* Etapes de l'animation */
+@keyframes textSlide {
+    0%    {transform: translate(0%, 20%);}
+    100%  {transform: translate(0%, 0%);}
+}
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+    #secSlides p {
+        font-size: var(--fontSizeMedium);
+    }
+}
\ No newline at end of file
diff --git a/Static/Css/userInfo.css b/Static/Css/userInfo.css
new file mode 100644
index 0000000..ceda91a
--- /dev/null
+++ b/Static/Css/userInfo.css
@@ -0,0 +1,86 @@
+
+.jobsListElem {
+    background-color: rgb(243, 201, 201);
+    border-radius:     10px;
+    transition:        all 0.1s ease-in-out;
+}
+
+.jobsListElem:hover {
+    cursor:            pointer;
+    background-color: #f5a4a4;
+}
+
+.jobsListElem i{
+    background-color: transparent !important;
+    color:           #991e1e !important;
+    width:            auto !important;
+    height:           auto !important;
+    line-height:      normal !important;
+    font-size:        var(--fontSizeSmall) !important;
+    border-radius:    0px !important;
+    margin-left:      0.5em;
+}
+
+#mainUserInfo form {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-around;
+    gap:             1em;
+    padding:         1.5% 5%;
+    align-items:     center;
+}
+
+#mainUserInfo label {
+    width: 70%;
+}
+
+#mainUserInfo input[type="text"] {
+    width: inherit;
+}
+
+#mainUserInfo button {
+    padding: 0.13em 0.2em;
+}
+
+#userJob {
+    justify-content: center;
+    width:           70%;
+}
+
+#userJob div {
+    width:           inherit;
+    font-size:       calc(36px / 2.5);
+    height:          2.5em;
+    line-height:     2.5em;
+    display:         flex;
+    justify-content: space-around;
+    align-items:     center;
+    border:          var(--inputBorder);
+    border-radius:   0px 4px 4px 0px;
+}
+
+#jobsList {
+    align-items: center;
+}
+
+#jobsListGrid {
+    display:               grid;
+    min-height:            2em;
+    line-height:           2em;
+    padding:               1px 2px;
+    grid-template-columns: repeat(3, 1fr);
+    border:                var(--inputBorder);
+    border-radius:         0px 4px 4px 0px;
+    width:                 inherit;
+    gap:                   0.5em;
+}
+
+@media screen and (max-width: 768px) {
+    #jobsListGrid {
+        grid-template-columns: 1fr;
+    }
+
+    #userJob div span{
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/Statics/Fonts/Flags/flags.png b/Static/Fonts/Flags/flags.png
index cdd33c3..cdd33c3 100644
--- a/Statics/Fonts/Flags/flags.png
+++ b/Static/Fonts/Flags/flags.png
diff --git a/Statics/Fonts/Fontsawesome/fa-brands-400.eot b/Static/Fonts/Fontsawesome/fa-brands-400.eot
index cba6c6c..cba6c6c 100644
--- a/Statics/Fonts/Fontsawesome/fa-brands-400.eot
+++ b/Static/Fonts/Fontsawesome/fa-brands-400.eot
diff --git a/Statics/Fonts/Fontsawesome/fa-brands-400.svg b/Static/Fonts/Fontsawesome/fa-brands-400.svg
index b9881a4..b9881a4 100644
--- a/Statics/Fonts/Fontsawesome/fa-brands-400.svg
+++ b/Static/Fonts/Fontsawesome/fa-brands-400.svg
diff --git a/Statics/Fonts/Fontsawesome/fa-brands-400.ttf b/Static/Fonts/Fontsawesome/fa-brands-400.ttf
index 8d75ded..8d75ded 100644
--- a/Statics/Fonts/Fontsawesome/fa-brands-400.ttf
+++ b/Static/Fonts/Fontsawesome/fa-brands-400.ttf
diff --git a/Statics/Fonts/Fontsawesome/fa-brands-400.woff b/Static/Fonts/Fontsawesome/fa-brands-400.woff
index 3375bef..3375bef 100644
--- a/Statics/Fonts/Fontsawesome/fa-brands-400.woff
+++ b/Static/Fonts/Fontsawesome/fa-brands-400.woff
diff --git a/Statics/Fonts/Fontsawesome/fa-brands-400.woff2 b/Static/Fonts/Fontsawesome/fa-brands-400.woff2
index 402f81c..402f81c 100644
--- a/Statics/Fonts/Fontsawesome/fa-brands-400.woff2
+++ b/Static/Fonts/Fontsawesome/fa-brands-400.woff2
diff --git a/Statics/Fonts/Fontsawesome/fa-regular-400.eot b/Static/Fonts/Fontsawesome/fa-regular-400.eot
index a4e5989..a4e5989 100644
--- a/Statics/Fonts/Fontsawesome/fa-regular-400.eot
+++ b/Static/Fonts/Fontsawesome/fa-regular-400.eot
diff --git a/Statics/Fonts/Fontsawesome/fa-regular-400.svg b/Static/Fonts/Fontsawesome/fa-regular-400.svg
index 463af27..463af27 100644
--- a/Statics/Fonts/Fontsawesome/fa-regular-400.svg
+++ b/Static/Fonts/Fontsawesome/fa-regular-400.svg
diff --git a/Statics/Fonts/Fontsawesome/fa-regular-400.ttf b/Static/Fonts/Fontsawesome/fa-regular-400.ttf
index 7157aaf..7157aaf 100644
--- a/Statics/Fonts/Fontsawesome/fa-regular-400.ttf
+++ b/Static/Fonts/Fontsawesome/fa-regular-400.ttf
diff --git a/Statics/Fonts/Fontsawesome/fa-regular-400.woff b/Static/Fonts/Fontsawesome/fa-regular-400.woff
index ad077c6..ad077c6 100644
--- a/Statics/Fonts/Fontsawesome/fa-regular-400.woff
+++ b/Static/Fonts/Fontsawesome/fa-regular-400.woff
diff --git a/Statics/Fonts/Fontsawesome/fa-regular-400.woff2 b/Static/Fonts/Fontsawesome/fa-regular-400.woff2
index 5632894..5632894 100644
--- a/Statics/Fonts/Fontsawesome/fa-regular-400.woff2
+++ b/Static/Fonts/Fontsawesome/fa-regular-400.woff2
diff --git a/Statics/Fonts/Fontsawesome/fa-solid-900.eot b/Static/Fonts/Fontsawesome/fa-solid-900.eot
index e994171..e994171 100644
--- a/Statics/Fonts/Fontsawesome/fa-solid-900.eot
+++ b/Static/Fonts/Fontsawesome/fa-solid-900.eot
diff --git a/Statics/Fonts/Fontsawesome/fa-solid-900.svg b/Static/Fonts/Fontsawesome/fa-solid-900.svg
index 00296e9..00296e9 100644
--- a/Statics/Fonts/Fontsawesome/fa-solid-900.svg
+++ b/Static/Fonts/Fontsawesome/fa-solid-900.svg
diff --git a/Statics/Fonts/Fontsawesome/fa-solid-900.ttf b/Static/Fonts/Fontsawesome/fa-solid-900.ttf
index 25abf38..25abf38 100644
--- a/Statics/Fonts/Fontsawesome/fa-solid-900.ttf
+++ b/Static/Fonts/Fontsawesome/fa-solid-900.ttf
diff --git a/Statics/Fonts/Fontsawesome/fa-solid-900.woff b/Static/Fonts/Fontsawesome/fa-solid-900.woff
index 23ee663..23ee663 100644
--- a/Statics/Fonts/Fontsawesome/fa-solid-900.woff
+++ b/Static/Fonts/Fontsawesome/fa-solid-900.woff
diff --git a/Statics/Fonts/Fontsawesome/fa-solid-900.woff2 b/Static/Fonts/Fontsawesome/fa-solid-900.woff2
index 2217164..2217164 100644
--- a/Statics/Fonts/Fontsawesome/fa-solid-900.woff2
+++ b/Static/Fonts/Fontsawesome/fa-solid-900.woff2
diff --git a/Statics/Fonts/SourceSansPro.ttf b/Static/Fonts/SourceSansPro.ttf
index ffe2786..ffe2786 100644
--- a/Statics/Fonts/SourceSansPro.ttf
+++ b/Static/Fonts/SourceSansPro.ttf
diff --git a/Statics/Fonts/akira.otf b/Static/Fonts/akira.otf
index c75fdb3..c75fdb3 100644
--- a/Statics/Fonts/akira.otf
+++ b/Static/Fonts/akira.otf
diff --git a/Statics/Js/index.js b/Static/Js/index.js
index b468417..a9889b2 100644
--- a/Statics/Js/index.js
+++ b/Static/Js/index.js
@@ -7,21 +7,21 @@
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
 function slideshow_start(slideNumber = 1) {
     let images = [
-        "/Medias/Images/slide0.jpg",
-        "/Medias/Images/slide1.jpg",
-        "/Medias/Images/slide2.jpg"
+        "/Media/Images/slide0.jpg",
+        "/Media/Images/slide1.jpg",
+        "/Media/Images/slide2.jpg"
     ];
 
     setInterval(() => {
-        // Changement del'image de fond de de la div
-        document.getElementById("slides").style.backgroundImage = `url("${images[slideNumber]}")`;
+        // Changement de l'image de fond de de la div
+        document.getElementById("secSlides").style.backgroundImage = `url("${images[slideNumber]}")`;
         // Untoggle les précedents
         // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux
         document.getElementById(`slide_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("show_block");
-        document.getElementById(`slideDot_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("slideSelected");
+        document.getElementById(`slideDot_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("slideDotSelected");
         // Toggle le nouveau texte & selecteur
         document.getElementById(`slide_${slideNumber}`).classList.toggle("show_block");
-        document.getElementById(`slideDot_${slideNumber}`).classList.toggle("slideSelected")
+        document.getElementById(`slideDot_${slideNumber}`).classList.toggle("slideDotSelected")
         // +1 sauf si fin
         if (slideNumber < images.length - 1) {
             slideNumber++; 
diff --git a/Statics/Js/main.js b/Static/Js/main.js
index 6fe6dec..7f3935c 100644
--- a/Statics/Js/main.js
+++ b/Static/Js/main.js
@@ -20,4 +20,10 @@ function show(parentId, element, id, className) {
             elements[i].classList.remove(className);
         }
     }
+}
+
+function showNavButtons() {
+    document.getElementsByTagName("nav")[0].classList.toggle("showNav")
+    // first-child à chaque fois
+    document.getElementsByTagName("header")[0].getElementsByTagName("a")[0].getElementsByTagName("i")[0].classList.toggle("navLinkClicked")
 }
\ No newline at end of file
diff --git a/Statics/Js/message.js b/Static/Js/message.js
index fa8e675..97f39ef 100644
--- a/Statics/Js/message.js
+++ b/Static/Js/message.js
@@ -10,8 +10,7 @@ function redirect(page) {
 
 // Timer pour message
 function start_timer(page) {
-    // var -> global, let -> local{}
-    let seconds = 1;
+    let seconds = 2;
     let text = document.getElementById("redirect").innerHTML;
     setInterval(() => {
         if (seconds > 0) {
diff --git a/Statics/Js/userinfo.js b/Static/Js/userinfo.js
index 6b4c1d9..29c92d0 100644
--- a/Statics/Js/userinfo.js
+++ b/Static/Js/userinfo.js
@@ -16,55 +16,23 @@
 // GLOBAL
 // ****************************************************************************
 var payload  = [];
-var dictJobs = {};
-
-// ****************************************************************************
-// FONCTIONS ANNEXES
-// ****************************************************************************
-// Récupération des possibles emplois et stockage dans une variable
-function init_dict_jobs() {
-    // Récupération des emplois disponibles
-    let selJob = document.getElementById("jobsSel");
-
-    // Pour chaque emploi disponible
-    for (i = 0; i < selJob.length; i ++) {
-        if (selJob[i].value !== "") {
-            // Création d'un dictionnaire -> "Nom Emploi": "ID"
-            dictJobs[selJob[i].text] = selJob[i].value;
-        }
-    }
-}
-
-// Création et ajout d'un bouton "supprimmer"
-function add_bouton_rm(li, jobsId) {
-    // Création et configuration du bouton
-    let buttonDel       = document.createElement("button");
-    buttonDel.type      = "button";
-    buttonDel.innerHTML = "<i class=\"fas fa-ban\"></i>";
-    buttonDel.onclick   = () => {remove(li, jobsId);};
-
-    // Ajout du boutton au "li" passé en argument
-    li.appendChild(buttonDel);
-}
 
 // ****************************************************************************
 // FONCTIONS PRINCIPALES
 // ****************************************************************************
+
+// TODO: Revoir les commentaires
 // Initiation
-function init() {
-    // Peuplement du dictionnaire des emploies "Nom Emploi": "ID"
-    init_dict_jobs();
-    
+function init() {    
     // Récupération des emplois déja présent
-    let jobs = document.getElementById("jobsList").getElementsByTagName("li");
+    let jobs = document.getElementsByClassName("jobsListElem");
 
-    // Pour chaque emploi déja enregistré
+    // Pour chaque emploi disponible
     for (i = 0; i < jobs.length; i ++) {
-        // Ajout de chaques choix à la liste final "payload"
-        payload.push(dictJobs[jobs[i].innerHTML]);
-        // Ajout d'un id et d'un bouton remove à chaque "li".
-        jobs[i].id = "jobId_" + dictJobs[jobs[i].innerHTML];
-        add_bouton_rm(jobs[i], dictJobs[jobs[i].innerHTML]);
+        if (jobs[i].getAttribute("data-value") !== "") {
+            payload.push(jobs[i].getAttribute("data-value"));
+            jobs[i].onclick = (ptrEvent) => {remove(ptrEvent)};
+        }
     }
 
     // Transformation de la liste des emplois choisis en JSON
@@ -75,32 +43,39 @@ function init() {
 // Ajout d'un emploi
 function add() {
     // Récupération du nom du choix dans le "select" des emplois
-    let jobName = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text;
+    let jobName  = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text;
+    let jobValue = document.getElementById("jobsSel").options[jobsSel.selectedIndex].value;
 
     // Si l'emploi n'est pas deja dans "payload" 
     // et si il fait bien partie du dictionnaire de tous les emplois
-    if (jobName in dictJobs && !payload.includes(dictJobs[jobName])) {
+    if (!payload.includes(jobValue) && jobValue !== "") {
         // Ajout à payload
-        payload.push(dictJobs[jobName]);
+        payload.push(jobValue);
+
         // Création, configuration et ajout du nouveau "li"
-        let li = document.createElement("li");
-        li.id  = "jobId_" + dictJobs[jobName];
-        li.appendChild(document.createTextNode(jobName));
-        add_bouton_rm(li, dictJobs[jobName]);
-        document.getElementById("jobsList").appendChild(li);
+        let i = document.createElement("i");
+        i.className = "fas fa-ban";
+
+        let div = document.createElement("div");
+        div.className = "jobsListElem";
+        div.dataset.value = jobValue;
+        div.onclick = (ptrEvent) => {remove(ptrEvent)};
+        div.appendChild(document.createTextNode(jobName));
+        div.appendChild(i);
+        
+        document.getElementById("jobsListGrid").appendChild(div);
         // Transformation de la liste des emplois choisis en JSON
         // et inscription de ce dernier dans la "value" de l'input "jobs".
         document.getElementById("jobs").value = JSON.stringify(payload);
     }
 }
 
-// Suppression d'un emploi
-function remove(li, jobsId) {
+function remove(ptrEvent) {
     // Suppression de l'emploi dans "payload"
-    payload.splice(payload.indexOf(jobsId), 1);
-    // Suppression du "li" de l'emploi
-    document.getElementById("jobsList").removeChild(li);
+    payload.splice(payload.indexOf(ptrEvent.srcElement.getAttribute("data-value")), 1);
+    // Suppression du "div" de l'emploi
+    document.getElementById("jobsListGrid").removeChild(ptrEvent.srcElement);
     // Transformation de la liste des emplois choisis en JSON
     // et inscription de ce dernier dans la "value" de l'input "jobs".
     document.getElementById("jobs").value = JSON.stringify(payload);
-}
+}
\ No newline at end of file
diff --git a/Statics/Css/main.css b/Statics/Css/main.css
deleted file mode 100644
index cd3ab65..0000000
--- a/Statics/Css/main.css
+++ /dev/null
@@ -1,576 +0,0 @@
-/* 
-Sites web utilisés pour le CSS:
-https://css-tricks.com/guides/
-https://stackoverflow.com/
-https://www.w3schools.com/css/default.asp
-
-Toutes les recherches sont effectuées en anglais
-sur mon instance SearX https://searx.debulois.fr
-*/
-
-/* Déclaration de la palette de couleur */
-:root {
-    /* GLOBAL */
-    --mainSiteColor:      #c0392b;
-    --bodyBg:             #fafafa;  
-    /* SEPARATOR */
-    --separatorBg:        #fafafa;
-    /* NAVBAR */
-    --navbarText:         black;
-    --navbarBg:           white;
-    /* SLIDER */
-    --slideText:          whitesmoke;
-    --slideBg:            black;
-    --slideStroke:        black;
-    /* MAIN */
-    --bg:                 white;
-    --text:               black;
-    --iconColor:          white;
-    --btnHoverBg:         #e74c3c;
-    /* TABLES */
-    --tableText:          black;
-    --tableBg:            #fafafa;
-    --tableBorder:        rgba(0, 0, 0, 0.2);
-    --tableStarUnchecked: darkgray;
-    --tableStarChecked:   orange;
-    /* FOOTER */
-    --footerText:         #636e72;
-    --footerBg:           #2d3436;
-}
-
-/* Déclaration des fonts */
-@font-face {
-    /* Nom du font */
-    font-family: "akira";
-    /* source du font */
-    src:          url("../Fonts/akira.otf")
-}
-
-@font-face {
-    font-family: "SourceSansPro";
-    src:         url("../Fonts/SourceSansPro.ttf")
-}
-
-/* Déclaration des class */
-/* NAVBAR */
-.titleNavbar {
-    /* Type de font à utiliser */
-    font-family: akira;
-    /* Couleur du text */
-    color:       var(--mainSiteColor) !important;
-    /* taille de l'élément flex */
-    flex-grow:   1;
-}
-
-.userManager{
-    /* Seconde ligne si plus de place */
-    flex-wrap: wrap;
-    flex-grow: 1;
-}
-
-.userManager li {
-    /* type d'affichage */
-    display:     flex;
-    /* Alignement verticale */
-    align-items: center;
-}
-
-.userManager a {
-    /* Hauteur de la ligne */
-    line-height: 2.5em;
-}
-
-.userManager i{
-    /* Taille du texte */
-    font-size: 1.3em;
-}
-
-.language{
-    /* hauteur */
-    height:          100%;
-    display:         flex;
-    /* direction du flex */
-    flex-direction:  column;
-    /* Métode d'espacement des éléments fles */
-    justify-content: space-around;
-    /* Alignement du texte horizontalement */
-    text-align:      center;
-    flex-grow:       1;
-}
-/* FIN NAVBAR */
-
-/* SLIDER */
-.slideSelected {
-    color:     var(--mainSiteColor);
-    /* Transform de type zoom x1,3 */
-    transform: scale(1.3);
-}
-
-.show_block {
-    /* Opacité de l'élément 0=transparent 1=opaque */
-    display: block !important;
-}
-/* FIN SLIDER */
-
-.show_flex {
-    /* Opacité de l'élément 0=transparent 1=opaque */
-    display: flex !important;
-    flex-direction: column;
-}
-
-/* MESSAGE */
-.success {
-    color:         green;
-    /* Type de texte gras */
-    font-weight:     bold;
-    /* Type du texte sous-ligné */
-    text-decoration: underline;
-    font-size:       28px;
-}
-
-.error {
-    color:         red;
-    font-weight:     bold;
-    text-decoration: underline;
-    font-size:       28px;
-}
-/* FIN MESSAGE */
-
-/* TABLEAU */
-.show_table {
-    /* Opacité de l'élément 0=transparent 1=opaque */
-    display: table !important;
-}
-
-.star {
-    /* !important prend le dessus sur tout type de déclaration précédente */
-    font-size:        20px           !important;
-    width:            20%            !important;
-    line-height:      1em            !important;
-    height:           1em            !important;
-    background-color: var(--tableBg) !important;
-}
-
-.unchecked {
-    color: var(--tableStarUnchecked) !important;
-}
-
-.checked {
-    color: var(--tableStarChecked) !important;
-}
-
-.noBorder {
-    /* Bordure */
-    border:           none    !important;
-    background-color: white !important;
-}
-/* FIN TABLEAU */
-
-/* GLOBAL */
-.separator {
-    height:             10vh;
-    /* Couleur du fond */
-    background-color:   var(--separatorBg);
-}
-
-.info {
-    /* Style du texte italic */
-    font-style: italic;
-}
-
-.spacer {
-    flex-grow: 2;
-}
-
-.flex-center {
-    justify-content: center !important;
-}
-
-.width-auto {
-    width: auto !important;
-}
-/* FIN GLOBAL */
-
-/* Déclaration globale */
-html {
-    /* transitions douce lors d'un appel d'id ex: index.php#IdNumero1 */
-	scroll-behavior: smooth;
-}
-
-body {
-    /* Choix du font */
-    font-family:     SourceSansPro;
-    margin:          0px;
-    /* taille en vh (view height) pourcentage de hauteur de fenêtre*/
-    min-height:      100vh;
-    display:         flex;
-    flex-direction:  column;
-    justify-content: space-between;
-    background-color: var(--bodyBg);
-}
-
-pre {
-    /* Permet d'aller à la ligne */
-    font-family: SourceSansPro;
-    white-space: pre-wrap;
-    margin:      0.3em 0em;
-}
-
-/* Déclaration par ID */
-/* NAVBAR */
-nav {
-    /* Index de profondeur */
-    z-index:          1;
-    height:           10vh;
-    display:          flex;
-    align-items:      center;
-    justify-content:  space-around;
-    text-align:       center;
-    background-color: var(--navbarBg);
-    border-top:       var(--mainSiteColor) solid 6px;
-    border-bottom:    var(--mainSiteColor) solid 3px;
-    color:            var(--navbarText);
-}
-
-nav ul {
-    display:              flex;
-    justify-content:      space-around;
-    column-gap:           15px;
-    list-style-type:      none;
-    /* Marge extérieure de l'élément */
-    margin-block-start:   0px;
-    margin-block-end:     0px;
-    /* Marge intérieure de l'élément */
-    padding-inline-start: 0px;
-}
-
-nav i {
-    margin-right: 0.4em;
-}
-
-nav a {
-    color:           var(--navbarText);
-    text-decoration: none;
-    transition:      all 0.15s ease-in-out;
-}
-
-nav a:hover {
-    color:     var(--mainSiteColor);
-    transform: scale(1.1);
-    z-index:   2;
-}
-/* FIN NAVBAR */
-
-/* SLIDER */
-#slides {
-    width:               100%;
-    height:              70vh;
-    background-color:    var(--navbarBg);
-    /* Image de fond du slider */
-    background-image:    url("/Medias/Images/slide0.jpg");
-    /* Remplissage du fond en zoom */
-    background-size:     cover;
-    /* Non répétition de l'image de fond  */
-    background-repeat:   no-repeat;
-    /* Centrage de l'image */
-    background-position: center;
-    text-align:          center;
-    transition:          background-image 0.3s linear;
-}
-
-#slides p {
-    position:                  absolute;
-    display:                   inline-block;
-    left:                      0; 
-    right:                     0; 
-    margin-left:               auto; 
-    margin-right:              auto;
-    max-width:                 80%;
-    font-size:                 48px;
-    color:                     var(--slideText);
-    /* opacity:                   0; */
-    display: none;
-    /* Aniamtion liée */
-    animation-name:            textSlide;
-    /* Durée de l'animation */
-    animation-duration:        5s;
-    /* Nombre de répétition de l'animation */
-    animation-iteration-count: infinite;
-}
-
-#slides p span {
-    font-family: akira;
-    color:       var(--mainSiteColor);
-    /* Ombre du texte: positionX, positionY, Etendue, Fondue */
-    text-shadow:
-         1px  1px 0 var(--slideStroke),          
-         1px -1px 0 var(--slideStroke),
-        -1px  1px 0 var(--slideStroke),
-        -1px -1px 0 var(--slideStroke);
-}
-
-/* Etapes de l'animation */
-@keyframes textSlide {
-    0%    {top: 29%}
-    35%   {top: 18%}
-    100%  {top: 18%}
-}
-
-#slideDots {
-    position:  absolute;
-    /* Centrer un élément absolu, gauche moitié puis droite (moins moitié) */
-    left:      50%;
-    transform: translateX(-50%);
-    margin:    0 auto;
-    bottom:    10%;
-}
-#slideDots i {
-    margin-right: 1em;
-}
-
-#slideDots i:last-child {
-    margin-right: none;
-}
-/* FIN SLIDER */
-
-/* GLOBAL */
-main {
-    width:             80%;
-    min-height:        70vh;
-    /* margin left & right en auto = centré */
-    margin-left:       auto;
-    margin-right:      auto;
-    display:           flex;
-    flex-direction:    column;
-    justify-content:   center;
-    text-align:        center;
-    border-top:        6px solid var(--mainSiteColor);
-    border-right:      3px solid var(--mainSiteColor);
-    border-bottom:     3px solid var(--mainSiteColor);
-    border-left:       3px solid var(--mainSiteColor);
-    border-radius:     5px;
-    background-color:  var(--bg);
-    color:             var(--text);
-}
-
-main h2 {
-    display:       inline-block;
-    margin-left:   auto;
-    margin-right:  auto;
-    padding:       1.5% 5%;
-    border-bottom: var(--mainSiteColor) 0.5vh solid;
-}
-
-#mainAdmin section {
-    display: none;
-}
-
-#mainLogin    form,
-#mainUserInfo form,
-#mainRegister form,
-#mainMission  form,
-#mainAdmin    form,
-#mainSearch   form {
-    display:         flex;
-    flex-direction:  column;
-    justify-content: space-around;
-    gap:             1em;
-    padding:         1.5% 5%;
-    align-items:     center;
-}
-
-#mainSearch form,
-#mainAdmin  form {
-    flex-direction: row;
-}
-
-#mainLogin    label,
-#mainUserInfo label,
-#mainRegister label,
-#mainMission  label,
-#mainAdmin    label,
-#mainSearch   label {
-    width:   80%;
-    display: flex;
-}
-
-#mainLogin    i,
-#mainUserInfo i,
-#mainRegister i,
-#mainMission  i,
-#mainAdmin    i,
-#mainSearch   i {
-    width:            90px;
-    height:           2em;
-    line-height:      2em;
-    font-size:        28px;
-    color:            var(--iconColor);
-    background-color: var(--mainSiteColor);
-    border-radius: 5px 0px 0px 5px;
-}
-
-#mainMyMission table,
-#mainAdmin     table,
-#mainSearch    table {
-    color:           var(--text);
-    padding:         5%;
-    border-collapse: collapse;
-    width:           95%;
-    margin:          1em auto;
-}
-
-#mainMyMission table {
-    display: none;
-}
-
-#mainMyMission th,
-#mainAdmin     th,
-#mainSearch    th {
-    font-size:        15px;
-    border:           2px solid var(--mainSiteColor);
-    background-color: var(--tableBg);
-}
-
-#mainMyMission td,
-#mainAdmin     td,
-#mainSearch    td {
-
-    border:           2px solid var(--tableBorder);
-    background-color: var(--tableBg);
-}
-
-#mainUserInfo input[type="text"],
-#mainMission  input[type="text"],
-#mainLogin    input[type="email"],
-#mainLogin    input[type="password"],
-#mainRegister input[type="email"],
-#mainSearch   input[type="search"],
-#mainRegister input[type="password"] {
-    width:   inherit;
-    border:  3px solid var(--mainSiteColor);
-    border-radius: 0px 5px 5px 0px;
-    padding: 0.5em;
-}
-
-#userJob {
-    justify-content: space-between;
-}
-
-#userJobs i {
-    border-radius: 5px;
-}
-
-#userJob select {
-    height:        2.5em;
-    line-height:   2.5em;
-    margin-top:    auto;
-    margin-bottom: auto;
-}
-
-#userJob  button[type="button"] {
-    margin-top:    auto;
-    margin-bottom: auto;
-    margin-right: 3em;
-    font-size:        16px;
-    height:           2em;
-    border:           2px solid var(--mainSiteColor);
-    background-color: var(--bg);
-    border-radius:    5px;
-    padding:          0em 1em;
-    transition:       all 0.1s ease-in-out;
-}
-
-#userJob  button[type="button"]:hover {
-    cursor:             pointer;
-    color:              var(--bg);
-    background-color:   var(--btnHoverBg);
-}
-
-#jobsList {
-    border: 3px solid var(--mainSiteColor);
-    border-radius: 5px;
-    padding: 2em 5em;
-    list-style: circle;
-}
-
-#jobsList > li > button {
-    border: none;
-    background-color: inherit;
-}
-
-#jobsList > li > button > i {
-    background-color: inherit;
-    color: var(--mainSiteColor);
-    border: 2px solid grey;
-    border-radius: 4px;
-    font-size:   22px;
-    width:       1.3em;
-    height:      1.3em;
-    line-height: 1.3em;
-    transition:       all 0.15s ease-in-out;
-}
-
-#jobsList > li > button > i:hover {
-    background-color: var(--btnHoverBg);
-    color: whitesmoke;
-    cursor:  pointer;
-}
-
-#mainMission select {
-    height:        2.5em;
-    line-height:   2.5em;
-    margin-top:    auto;
-    margin-bottom: auto;
-    margin-left:   1em;
-}
-
-#mainUserInfo textarea,
-#mainMission  textarea {
-    width:  83%;
-    height: 3.4em;
-    border: 0.5vh solid var(--mainSiteColor);
-    border-radius: 0px 5px 5px 0px;
-}
-
-#mainLogin    input[type="submit"],
-#mainUserInfo input[type="submit"],
-#mainMission  input[type="submit"],
-#mainSearch   input[type="submit"],
-#mainAdmin    input[type="submit"],
-#mainRegister input[type="submit"] {
-    font-size:        17px;
-    font-weight:      bold;
-    height:           2.5em;
-    border:           0.15em solid var(--mainSiteColor);
-    background-color: var(--bg);
-    border-radius:    5px;
-    padding:          0% 0.7em;
-    transition:       all 0.1s ease-in-out;
-}
-
-#mainLogin    input[type="submit"]:hover,
-#mainUserInfo input[type="submit"]:hover,
-#mainMission  input[type="submit"]:hover,
-#mainSearch   input[type="submit"]:hover,
-#mainAdmin    input[type="submit"]:hover,
-#mainRegister input[type="submit"]:hover {
-    cursor:             pointer;
-    color:              var(--bg);
-    background-color:   var(--btnHoverBg);
-}
-
-#mainMessage p {
-    font-size: 20px;
-}
-/* FIN GLOBAL */
-
-/* FOOTER */
-footer {
-    min-height:         10vh;
-    display:            flex;
-    flex-direction:     column;
-    text-align:         center;
-    color:              var(--footerText);
-    background-color:   var(--footerBg);
-}
-/* FIN FOOTER */
diff --git a/Templates/Includes/en/message.php b/Template/Include/en/message.php
index aa3415f..503fd98 100644
--- a/Templates/Includes/en/message.php
+++ b/Template/Include/en/message.php
@@ -79,6 +79,13 @@ $messageText  = [
             "info"     => "Error, please sign-in before.",
             "timer"    => true,
             "toSrc"    => true
+        ],
+        "notConnected" => [
+            "success"  => false,
+            "title"    => "Mandate infos.",
+            "info"     => "Error, you must be connected, and connected as client.",
+            "timer"    => true,
+            "toSrc"    => false
         ]
     ],
     // Acceptation d'une mission
diff --git a/Templates/Includes/en/table.php b/Template/Include/en/table.php
index 6fe716a..8aef67f 100644
--- a/Templates/Includes/en/table.php
+++ b/Template/Include/en/table.php
@@ -26,8 +26,8 @@ $header = [
         "Accepted by pro date",
         "Validated by client date",
         "Validated by pro date",
-        "Client ID",
-        "Pro ID",
+        "Client lastname",
+        "Pro lastname",
         "Job"
     ],
     // En-tête des colonnes du tableau Search de l'index.
diff --git a/Templates/Includes/en/text.php b/Template/Include/en/text.php
index 3e6b981..7b8cfd1 100644
--- a/Templates/Includes/en/text.php
+++ b/Template/Include/en/text.php
@@ -11,8 +11,8 @@ $text = [
         "btManageJob"     => "Manage jobs categories",
         "btManageUser"    => "Manage users",
         "btManageMission" => "Manage missions",
-        "formJobAddEn"    => "Name of the category in English",
-        "formJobAddFr"    => "Name of the category in French",
+        "formJobAddEn"    => "Name in English",
+        "formJobAddFr"    => "Name in French",
         "submitJobAdd"    => "Add",
         "selJobDel"       => "Choose a job to delete",
         "submitJobDel"    => "Delete",
@@ -30,8 +30,9 @@ $text = [
         "adress"       => "Adress",
         "zipCode"      => "Zip code",
         "city"         => "City",
+        "myJobs"       => "My jobs",
         "jobsSel"      => "Jobs",
-        "jobsAdd"       => "Add",
+        "jobsAdd"      => "Add",
         "degree"       => "Degree",
         "capability"   => "Capacities",
         "description"  => "Descriptions",
@@ -56,6 +57,9 @@ $text = [
         "pendingMission"   => "Pending missions",
         "ongoingMission"   => "Ongoing missions",
         "completedMission" => "Completed missions",
+        "noPending"        => "There is actually no pending missions.",
+        "noOngoing"        => "There is actually no ongoing missions.",
+        "noCompleted"      => "There is actually no completed missions.",
         "accept"           => "Accept",
         "validate"         => "Validate"
     ],
@@ -86,8 +90,10 @@ $text = [
         "h2"            => "Search a professional",
         "searchBarName" => "Search by name",
         "searchBarJob"  => "Search by job",
+        "or"            => "or",
         "submit"        => "Search",
-        "moreInfo"      => "More info",
+        "noResult"      => "No result.",
+        "moreInfo"      => "Infos",
         "mandate"       => "Mandate"
     ],
     "incl_index_slideshow" => [
diff --git a/Templates/Includes/en/title.php b/Template/Include/en/title.php
index c4fbeca..c4fbeca 100644
--- a/Templates/Includes/en/title.php
+++ b/Template/Include/en/title.php
diff --git a/Templates/Includes/fr/message.php b/Template/Include/fr/message.php
index 424ff1e..d9dc98c 100644
--- a/Templates/Includes/fr/message.php
+++ b/Template/Include/fr/message.php
@@ -79,6 +79,13 @@ $messageText  = [
             "info"     => "Erreur lors de la requête.",
             "timer"    => true,
             "toSrc"    => true
+        ],
+        "notConnected" => [
+            "success"  => false,
+            "title"    => "Requête de mission.",
+            "info"     => "Erreur, Vous devez être connecté, et connecté en tant que client.",
+            "timer"    => true,
+            "toSrc"    => false
         ]
     ],
     // Acceptation d'une mission
diff --git a/Templates/Includes/fr/table.php b/Template/Include/fr/table.php
index 29246e5..342b5e5 100644
--- a/Templates/Includes/fr/table.php
+++ b/Template/Include/fr/table.php
@@ -26,8 +26,8 @@ $header = [
         "Date d'acceptation par le pro",
         "Date de validation du client",
         "Date de validation du pro",
-        "ID du client",
-        "ID du pro",
+        "Nom du client",
+        "Nom du pro",
         "Emploi"
     ],
     // En-tête des colonnes du tableau Search de l'index.
diff --git a/Templates/Includes/fr/text.php b/Template/Include/fr/text.php
index 030d32f..ed28f1f 100644
--- a/Templates/Includes/fr/text.php
+++ b/Template/Include/fr/text.php
@@ -11,8 +11,8 @@ $text = [
         "btManageJob"     => "Gestion des emplois",
         "btManageUser"    => "Gestion des utilisateurs",
         "btManageMission" => "Gestion des missions",
-        "formJobAddEn"    => "Nom de la catégorie en Englais",
-        "formJobAddFr"    => "Nom de la catégorie en Français",
+        "formJobAddEn"    => "Nom en Englais",
+        "formJobAddFr"    => "Nom en Français",
         "submitJobAdd"    => "Ajouter",
         "selJobDel"       => "Choisir une categorie à suppr.",
         "submitJobDel"    => "Suppr.",
@@ -30,6 +30,7 @@ $text = [
         "adress"       => "Adresse",
         "zipCode"      => "Code postal",
         "city"         => "Ville",
+        "myJobs"       => "Mes emplois:",
         "jobsSel"      => "Emplois",
         "jobsAdd"      => "Ajouter",
         "degree"       => "Diplômes",
@@ -56,6 +57,9 @@ $text = [
         "pendingMission"   => "Missions en attente",
         "ongoingMission"   => "Missions en cours",
         "completedMission" => "Missions terminées",
+        "noPending"        => "Il n'y a pas de missions en attente.",
+        "noOngoing"        => "Il n'y a pas de missions en cours.",
+        "noCompleted"      => "Il n'y a pas de missions en terminées.",
         "accept"           => "Accepter",
         "validate"         => "Valider"
     ],
@@ -86,8 +90,10 @@ $text = [
         "h2"            => "Rechercher un professionnel",
         "searchBarName" => "Recherche par nom",
         "searchBarJob"  => "Recherche par catégorie",
+        "or"            => "ou",
         "submit"        => "Rechercher",
-        "moreInfo"      => "Plus d'infos",
+        "noResult"      => "Aucun résultat.",
+        "moreInfo"      => "Infos",
         "mandate"       => "Mandater"
     ],
     "incl_index_slideshow" => [
diff --git a/Templates/Includes/fr/title.php b/Template/Include/fr/title.php
index 49285a2..49285a2 100644
--- a/Templates/Includes/fr/title.php
+++ b/Template/Include/fr/title.php
diff --git a/Templates/Includes/incl_form_admin.php b/Template/Include/incl_form_admin.php
index 52430d9..68fa531 100644
--- a/Templates/Includes/incl_form_admin.php
+++ b/Template/Include/incl_form_admin.php
@@ -22,12 +22,6 @@ $dbsearch = new DbSearch;
 $dbmission = new DbMission;
 
 // ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Separateur -->
-<div class="separator"></div>'.PHP_EOL);
-
-// ****************************************************************************
 // DIV PRINCIPALE
 // ****************************************************************************
 echo('<!-- Division principale -->
@@ -38,9 +32,9 @@ echo('<!-- Division principale -->
 // ****************************************************************************
 echo('<!-- Bouttons de navigation -->
 <div id="adminButtons">
-    <button onclick="show(\'mainAdmin\', \'section\', \'secAdminJobs\', \'show_flex\')"><h2>'.$text[basename(__FILE__, ".php")]["btManageJob"].'</h2></button>
-    <button onclick="show(\'mainAdmin\', \'section\', \'secAdminUsers\', \'show_flex\')"><h2>'.$text[basename(__FILE__, ".php")]["btManageUser"].'</h2></button>
-    <button onclick="show(\'mainAdmin\', \'section\', \'secAdminMissions\', \'show_flex\')"><h2>'.$text[basename(__FILE__, ".php")]["btManageMission"].'</h2></button>
+    <button onclick="show(\'mainAdmin\', \'section\', \'secAdminJobs\',     \'show_flex\')">'.$text[basename(__FILE__, ".php")]["btManageJob"].'</button>
+    <button onclick="show(\'mainAdmin\', \'section\', \'secAdminUsers\',    \'show_flex\')">'.$text[basename(__FILE__, ".php")]["btManageUser"].'</button>
+    <button onclick="show(\'mainAdmin\', \'section\', \'secAdminMissions\', \'show_flex\')">'.$text[basename(__FILE__, ".php")]["btManageMission"].'</button>
 </div>'.PHP_EOL);
 
 // ****************************************************************************
@@ -50,16 +44,24 @@ echo('<!-- Bouttons de navigation -->
 echo('<!-- Section gestion des emplois -->
 <section id="secAdminJobs">
     <form action="./../../Core/wrapper.php" method="post">
+        <h3>Ajouter une categorie d\'emploi</h3>
         <label>
             <i class="fas fa-briefcase"></i>
+            <i class="gb uk flag"></i>
             <input type="text" name="addJobNameEn" maxlength="128" placeholder="'.$text[basename(__FILE__, ".php")]["formJobAddEn"].'" required>
-            <i class="fas fa-briefcase" style="margin-left: 5%;"></i>
+        </label>
+        <label>
+            <i class="fas fa-briefcase"></i>
+            <i class="fr flag"></i>
             <input type="text" name="addJobNameFr" maxlength="128" placeholder="'.$text[basename(__FILE__, ".php")]["formJobAddFr"].'" required>
         </label>
-        <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitJobAdd"].'">
+        <label>
+            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitJobAdd"].'">
+        </label>
     </form>
     <!-- Form pour suppression d une catégorie d emploi -->
     <form action="/../Core/wrapper.php" method="post">
+        <h3>Supprimer une categorie d\'emploi</h3>
         <label>
             <select name="delJobId" required>
                 <option value="" selected>'.$text[basename(__FILE__, ".php")]["selJobDel"].'</option>'.PHP_EOL);
@@ -69,7 +71,9 @@ for ($i = 0; $i < count($allJobs); $i++){
 }
 echo('            </select>
         </label>
-        <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitJobDel"].'">
+        <label>
+            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitJobDel"].'">
+        </label>
     </form>
 </section>'.PHP_EOL);
 
@@ -79,12 +83,15 @@ echo('            </select>
 // Form pour suppression d'un utilisateur
 echo('<!-- Section supression d\' un utilisateur -->
 <section id="secAdminUsers">
+    <h3>Suppression d\' un utilisateur</h3>
     <form action="./../../Core/wrapper.php" method="post">
         <label>
             <i class="fas fa-trash-alt"></i>
             <input type="text" name="delUserId" maxlength="10" placeholder="'.$text[basename(__FILE__, ".php")]["formDel"].'" required>
         </label>
-        <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitDel"].'">
+        <label>
+            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitDel"].'">
+        </label>
     </form>'.PHP_EOL);
 
 // Récupération de tous les utilisateurs.
@@ -134,12 +141,15 @@ echo('</table>
 // Form pour suppression d'une mission
 echo('<!-- Section supression d\' une mission -->
 <section id="secAdminMissions">
+    <h3>Suppression d\' une mission</h3>
     <form action="./../../Core/wrapper.php" method="post">
         <label>
             <i class="fas fa-trash-alt"></i>
             <input type="text" name="delMissionId" maxlength="10" placeholder="'.$text[basename(__FILE__, ".php")]["formDel"].'" required>
         </label>
-        <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitDel"].'">
+        <label>
+            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submitDel"].'">
+        </label>
     </form>'.PHP_EOL);
 
 // Récupération de toutes les missions et des infos des utilisateurs.
diff --git a/Templates/Includes/incl_form_login.php b/Template/Include/incl_form_login.php
index d0e8b25..e907635 100644
--- a/Templates/Includes/incl_form_login.php
+++ b/Template/Include/incl_form_login.php
@@ -10,12 +10,6 @@
 require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
 
 // ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Séparateur -->
-<div class="separator"></div>');
-
-// ****************************************************************************
 // DIV PRINCIPALE AVEC TITRE ET FORM DE CONNEXION
 // ****************************************************************************
 echo('<!-- Div principale -->
@@ -30,7 +24,7 @@ echo('<!-- Div principale -->
             <i class="fas fa-lock"></i>
             <input type="password" name="password" id="password" maxlength="128" placeholder="'.$text[basename(__FILE__, ".php")]["password"].'" required>
         </label>
-        <label class="flex-center">
+        <label>
             <input type="checkbox" name="rememberMe" id="rememberMe">
             '.$text[basename(__FILE__, ".php")]["rememberMe"].'
         </label>
diff --git a/Templates/Includes/incl_form_mission.php b/Template/Include/incl_form_mission.php
index b378b93..b95c396 100644
--- a/Templates/Includes/incl_form_mission.php
+++ b/Template/Include/incl_form_mission.php
@@ -15,11 +15,6 @@ require_once(dirname( __FILE__ )."./../../Database/meth_dbsearch.php");
 if (isset($_SESSION["missionInitiate"]) 
     && count($_SESSION["missionInitiate"]) > 0
 ) {
-    // ****************************************************************************
-    // SEPARATEUR
-    // ****************************************************************************
-    echo('<!-- Séparateur -->
-    <div class="separator"></div>');
 
     // ****************************************************************************
     // DIV PRINCIPALE AVEC TITRE ET FORM POUR MANDATEMENT DE MISSION
@@ -78,7 +73,7 @@ if (isset($_SESSION["missionInitiate"])
             </label>
             <label>
                 <i class="far fa-comment-alt"></i>
-                <textarea name="review" placeholder="'.$text[basename(__FILE__, ".php")]["review"].'" required></textarea>
+                <input type="text" name="review" maxlength="256" placeholder="'.$text[basename(__FILE__, ".php")]["review"].'" required></textarea>
             </label>
             <input type="hidden" name="missionCompletedId" value="'.$_SESSION["missionCompleted"]["missionId"].'">
             <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submit"].'">
@@ -88,7 +83,7 @@ if (isset($_SESSION["missionInitiate"])
 
 // Sinon renvoie vers mes mission (F5 w/ unset)
 } else {
-    header("Location: /Templates/myMission.php");
+    header("Location: /Template/myMission.php");
     die();
 }
 
diff --git a/Templates/Includes/incl_form_register.php b/Template/Include/incl_form_register.php
index 7dd324c..0baeaf2 100644
--- a/Templates/Includes/incl_form_register.php
+++ b/Template/Include/incl_form_register.php
@@ -10,12 +10,6 @@
 require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
 
 // ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Separateur -->
-<div class="separator"></div>');
-
-// ****************************************************************************
 // DIV PRINCIPALE AVEC TITRE ET FORMULAIRE POUR S'INSCRIRE
 // ****************************************************************************
 echo('<!-- Division principale -->
diff --git a/Templates/Includes/incl_form_userInfo.php b/Template/Include/incl_form_userInfo.php
index 5873a5a..afe98b8 100644
--- a/Templates/Includes/incl_form_userInfo.php
+++ b/Template/Include/incl_form_userInfo.php
@@ -32,12 +32,6 @@ if (!$info) {
 }
 
 // ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Separateur -->
-<div class="separator"></div>');
-
-// ****************************************************************************
 // DIV PRINCIPALE AVEC TITRE ET FORMULAIRE COMMUN AUX PROS ET CLIENTS
 // ****************************************************************************
 echo('<!-- Division principale -->
@@ -83,25 +77,31 @@ if ($_SESSION["userStatus"] == 1) {
     // ****************************************************************************
     echo('    <label id="userJob">
         <i class="fas fa-wrench"></i> 
-        <p>Selectionner mes jobs:</p>'.PHP_EOL);
-    echo('        <select id="jobsSel">
-            <option value="" selected>'.$text[basename(__FILE__, ".php")]["jobsSel"].'</option>'.PHP_EOL);
+            <div>
+                <span>'.$text[basename(__FILE__, ".php")]["myJobs"].'</span>'.PHP_EOL);
+    echo('                <select id="jobsSel">
+                <option value="" selected>'.$text[basename(__FILE__, ".php")]["jobsSel"].'</option>'.PHP_EOL);
     //Peuplement du select qui comprend tous les emplois
     for ($i = 0; $i < count($allJobs); $i++) {
-        echo('            <option value="'.$allJobs[$i]["jobCategoryId"].'">'.$allJobs[$i]["jobCategoryName".ucwords($_SESSION["lang"])].'</option>'.PHP_EOL);
+        echo('                <option value="'.$allJobs[$i]["jobCategoryId"].'">'.$allJobs[$i]["jobCategoryName".ucwords($_SESSION["lang"])].'</option>'.PHP_EOL);
     }
-    echo('        </select>
-        <button type="button" onclick="add()">'.$text[basename(__FILE__, ".php")]["jobsAdd"].'</button>
+    echo('            </select>
+            <button type="button" onclick="add()">'.$text[basename(__FILE__, ".php")]["jobsAdd"].'</button>
+        </div>
     </label>'.PHP_EOL);
     
     // ****************************************************************************
     // PARTIE EMPLOI DEJA SELECTIONNE
     // ****************************************************************************
-    echo('    <ul id="jobsList">'.PHP_EOL);
+    echo('    
+        <label id="jobsList">
+            <i class="fas fa-briefcase"></i>
+            <div id=jobsListGrid>'.PHP_EOL);
     for ($i = 0; $i < count($proJobs); $i++) {
-        echo('        <li>'.$proJobs[$i]["jobCategoryName".ucwords($_SESSION["lang"])].'</li>'.PHP_EOL);
+        echo('        <div class="jobsListElem" data-value="'.$proJobs[$i]["jobCategoryId"].'">'.$proJobs[$i]["jobCategoryName".ucwords($_SESSION["lang"])].'<i class="fas fa-ban"></i></div>'.PHP_EOL);
     }
-    echo('    </ul>
+    echo('    </div>
+        </label>
     <input type="hidden" name="jobs" id="jobs" value="">'.PHP_EOL);
     
     // ****************************************************************************
@@ -109,21 +109,21 @@ if ($_SESSION["userStatus"] == 1) {
     // ****************************************************************************
     echo('    <label>
         <i class="fas fa-user-graduate"></i>
-        <input type="text" name="degree" id="degree" maxlength="128" placeholder="'.$text[basename(__FILE__, ".php")]["degree"].'"value="'.$info[0]["degree"].'" required>
+        <input type="text" name="degree" id="degree" maxlength="128" placeholder="'.$text[basename(__FILE__, ".php")]["degree"].'" value="'.$info[0]["degree"].'" required>
     </label>
     <label>
         <i class="fas fa-cogs"></i>
-        <textarea name="capability" id="capability" placeholder="'.$text[basename(__FILE__, ".php")]["capability"].'" cols="30" rows="2"  required>'.$info[0]["capability"].'</textarea>
+        <input type="text" name="capability" id="capability" maxlength="256" placeholder="'.$text[basename(__FILE__, ".php")]["capability"].'" value="'.$info[0]["capability"].'" required>
     </label>
     <label>
         <i class="fas fa-file-signature"></i>
-        <textarea name="description" id="description" placeholder="'.$text[basename(__FILE__, ".php")]["description"].'" cols="30" rows="2"  required>'.$info[0]["description"].'</textarea>
+        <input type="text" name="description" id="description" maxlength="256" placeholder="'.$text[basename(__FILE__, ".php")]["description"].'" value="'.$info[0]["description"].'" required>
     </label>'.PHP_EOL);
 
     // ****************************************************************************
     // CHARGEMENT ET DECLENCHEMENT DU JAVASCRIPT DEDIE A CETTE PAGE
     // ****************************************************************************
-    echo('    <script src="/Statics/Js/userinfo.js"></script>
+    echo('    <script src="/Static/Js/userinfo.js"></script>
     <script>init()</script>');
 }
 
diff --git a/Templates/Includes/incl_global_footer.php b/Template/Include/incl_global_footer.php
index a11ed02..a11ed02 100644
--- a/Templates/Includes/incl_global_footer.php
+++ b/Template/Include/incl_global_footer.php
diff --git a/Templates/Includes/incl_global_header.php b/Template/Include/incl_global_header.php
index 3ad0965..9847bf1 100644
--- a/Templates/Includes/incl_global_header.php
+++ b/Template/Include/incl_global_header.php
@@ -9,14 +9,14 @@
 // ****************************************************************************
 // METADATA COMMUNE A TOUTES LES PAGES
 // ****************************************************************************
-echo('<!-- Table d\'encodage -->
-<meta charset="UTF-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
+echo('<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link href="/Statics/Css/main.css" rel="stylesheet">
+<link href="/Static/Css/main.css" rel="stylesheet">
+<link href="/Static/Css/navbar.css" rel="stylesheet">
+<link href="/Static/Css/footer.css" rel="stylesheet">
 <!-- https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself -->
-<link href="/Statics/Css/Fontsawesome/all.css" rel="stylesheet">
+<link href="/Static/Css/Fontsawesome/all.css" rel="stylesheet">
 <!-- https://semantic-ui.com/elements/flag.html -->
-<link href="/Statics/Css/Flags/flag.css" rel="stylesheet">'.PHP_EOL);
+<link href="/Static/Css/Flags/flag.css" rel="stylesheet">'.PHP_EOL);
 
 ?>
\ No newline at end of file
diff --git a/Templates/Includes/incl_global_message.php b/Template/Include/incl_global_message.php
index 1afcb02..a0a9e5f 100644
--- a/Templates/Includes/incl_global_message.php
+++ b/Template/Include/incl_global_message.php
@@ -14,12 +14,6 @@ $name   = $_SESSION["message"][0];
 $status = $_SESSION["message"][1];
 
 // ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Separateur -->
-<div class="separator"></div>');
-
-// ****************************************************************************
 // DIV PRINCIPALE ET TITRE
 // ****************************************************************************
 echo('<!-- Division principale -->
@@ -42,14 +36,14 @@ echo('<!-- Texte principal -->
 <p>'.$messageText[$name][$status]["info"].'</p>
 <p id="redirect" class="info">'.$redirect.'</p></main>
 <!-- Chargement du javascript dédié à cette page -->
-<script src="/Statics/Js/message.js"></script>');
+<script src="/Static/Js/message.js"></script>');
 
 // ****************************************************************************
 // RECUPERATION DE LA PAGE VERS LAQUELLE REDIRIGER SI CE N'EST PAS L'INDEX
 // ****************************************************************************
 if ($messageText[$name][$status]["toSrc"]) {
     if ($_SESSION["src"] !== "index") {
-        $dest = "Templates/".$_SESSION["src"];
+        $dest = "Template/".$_SESSION["src"];
     } else {
         $dest = "index";
     }
diff --git a/Template/Include/incl_global_navbar.php b/Template/Include/incl_global_navbar.php
new file mode 100644
index 0000000..95ab8d8
--- /dev/null
+++ b/Template/Include/incl_global_navbar.php
@@ -0,0 +1,89 @@
+<?php
+
+// ############################################################################
+// #                                                                          #
+// # Description: La navbar                                                   #
+// #                                                                          #
+// ############################################################################
+
+// Switch -> https://www.php.net/manual/fr/control-structures.switch.php
+// https://stackoverflow.com/questions/6330114/do-you-need-break-in-switch-when-return-is-used
+
+// Import des textes en fonction de la langue définie dans la variable "lang" de la session.
+require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
+
+// Header avec titre et boutton du navbar
+echo('<!-- Header -->
+<header>
+    <!-- Titre -->
+    <a onclick="showNavButtons()"><i class="fas fa-bars"></i></a>
+    <!-- Espace vide -->
+    <div class="spacer"></div>
+    <a id="navTitle" href="/"><h2>'.$text[basename(__FILE__, ".php")]["h2"].'</h2></a>
+    <!-- Espace vide -->
+    <div class="spacer"></div>
+'.PHP_EOL);
+// Affichage du drapeau de la langue actuellement sélectionnée.
+$flags = [
+    "en" => "gb uk",
+    "fr" => "fr"
+];
+echo('    <!-- Choix de la langue -->
+    <form action="/../Core/wrapper.php" method="post" id="navFormLang">
+        <label>
+            <i class="'.$flags[$_SESSION["lang"]].' flag"></i>'.$text[basename(__FILE__, ".php")]["lang"].'
+            <br>
+            <select name="langSel" id="navSelLang" required>
+                <option value="" selected>'.$text[basename(__FILE__, ".php")]["btnLang"].'</option>
+                <option value="en">English</option>
+                <option value="fr">Français</option>
+            </select>
+        </label>
+    </form>
+</header>
+'.PHP_EOL);
+
+// Affichage du navbar et de ses elements en fonction de si l'utilisateur est connecté ou non.
+echo('<!-- navbar -->    
+<nav>
+<!-- Espace vide -->
+<div class="spacer"></div>
+<!-- Liste de lien pour la navigation -->');
+if (isset($_SESSION["loggedIn"], $_SESSION["userStatus"]) 
+    && $_SESSION["loggedIn"] == "1"
+) {
+    switch ($_SESSION["userStatus"]) {
+        case 0:
+            $status = 'Admin';
+            echo('        <p><span class="headerInfoAdmin">'.$status.'</span>'.$_SESSION["email"].'</p>'.PHP_EOL);
+            echo('        <a href="/index.php#separator2"><i class="fas fa-search"></i> '.$text[basename(__FILE__, ".php")]["btnSearch"].'</a>');
+            echo('        <a href="/Template/admin.php"><i class="fas fa-cog"></i> '.$text[basename(__FILE__, ".php")]["btnAdmin"].'</a>'.PHP_EOL);
+            echo('        <a href="/Template/logout.php"><i class="fas fa-sign-out-alt"></i> '.$text[basename(__FILE__, ".php")]["btnLogout"].'</a>'.PHP_EOL);
+            break;
+        case 1:
+            $status = 'Pro';
+            echo('        <p><span class="headerInfoPro">'.$status.'</span>'.$_SESSION["email"].'</p>'.PHP_EOL);
+            echo('        <a href="/index.php#separator2"><i class="fas fa-search"></i> '.$text[basename(__FILE__, ".php")]["btnSearch"].'</a>');
+            echo('        <a href="/Template/myMission.php"><i class="fas fa-tasks"></i> '.$text[basename(__FILE__, ".php")]["btnMyMission"].'</a>'.PHP_EOL);
+            echo('        <a href="/Template/userInfo.php"><i class="fas fa-user"></i> '.$text[basename(__FILE__, ".php")]["btnInfos"].'</a>');
+            echo('        <a href="/Template/logout.php"><i class="fas fa-sign-out-alt"></i> '.$text[basename(__FILE__, ".php")]["btnLogout"].'</a>'.PHP_EOL);
+            break;
+        case 2:
+            $status = 'Client';
+            echo('        <p><span class="headerInfoClient">'.$status.'</span>'.$_SESSION["email"].'</p>'.PHP_EOL);
+            echo('        <a href="/index.php#separator2"><i class="fas fa-search"></i> '.$text[basename(__FILE__, ".php")]["btnSearch"].'</a>');
+            echo('        <a href="/Template/myMission.php"><i class="fas fa-tasks"></i> '.$text[basename(__FILE__, ".php")]["btnMyMission"].'</a>'.PHP_EOL);
+            echo('        <a href="/Template/userInfo.php"><i class="fas fa-user"></i> '.$text[basename(__FILE__, ".php")]["btnInfos"].'</a>');
+            echo('        <a href="/Template/logout.php"><i class="fas fa-sign-out-alt"></i> '.$text[basename(__FILE__, ".php")]["btnLogout"].'</a>'.PHP_EOL);
+            break;
+    }
+    echo('        <!-- Espace vide -->
+        <div class="spacer"></div>');
+} else {
+    echo('        <a href="/Template/login.php"><i class="fas fa-sign-in-alt"></i> '.$text[basename(__FILE__, ".php")]["btnLogin"].'</a>
+        <a href="/Template/register.php"><i class="fas fa-user-plus"></i> '.$text[basename(__FILE__, ".php")]["btnRegister"].'</a>
+        <!-- Espace vide -->
+        <div class="spacer"></div>'.PHP_EOL);
+}
+echo('</nav>');
+?>
\ No newline at end of file
diff --git a/Templates/Includes/incl_index_search.php b/Template/Include/incl_index_search.php
index cad6f2d..13d581e 100644
--- a/Templates/Includes/incl_index_search.php
+++ b/Template/Include/incl_index_search.php
@@ -29,95 +29,118 @@ echo('<!-- Division principale -->
 // Form pour la recherche par nom et envoi au wrappeur.
 echo('<!-- Form de recherche -->
 <h2>'.$text[basename(__FILE__, ".php")]["h2"].'</h2>
-<div>
+<div id="divSearch">
+    <div class="spacer"></div>
     <form action="/Core/wrapper.php" method="post">
         <label>
             <i class="fas fa-search"></i>
-            <input type="search" name="searchByName" id="searchBar"placeholder="'.$text[basename(__FILE__, ".php")]["searchBarName"].'" required>
+            <input type="text" name="searchByName" id="searchBar"placeholder="'.$text[basename(__FILE__, ".php")]["searchBarName"].'" required>
         </label>
         <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submit"].'">
     </form>
+    <p>'.$text[basename(__FILE__, ".php")]["or"].'</p>
     <form action="/Core/wrapper.php" method="post">
-    <label>
-        <i class="fas fa-search"></i>
-        <select name="searchByJob" required>
-            <option value="" selected>'.$text[basename(__FILE__, ".php")]["searchBarJob"].'</option>'.PHP_EOL);
+        <label>
+            <i class="fas fa-search"></i>
+            <select name="searchByJob" required>
+                <option value="" selected>'.$text[basename(__FILE__, ".php")]["searchBarJob"].'</option>'.PHP_EOL);
 $allJobs = $dbsearch->get_job_all();
 for ($i = 0; $i < count($allJobs); $i++){
-    echo('            <option value="'.$allJobs[$i]["jobCategoryId"].'">'.$allJobs[$i]["jobCategoryName".ucwords($_SESSION["lang"])].'</option>'.PHP_EOL);
+    echo('                <option value="'.$allJobs[$i]["jobCategoryId"].'">'.$allJobs[$i]["jobCategoryName".ucwords($_SESSION["lang"])].'</option>'.PHP_EOL);
 }
-echo('        </select>
+echo('            </select>
         </label>
         <input type="submit" value="'.$text[basename(__FILE__, ".php")]["submit"].'">
     </form>
+    <div class="spacer"></div>
 </div>'.PHP_EOL);
 
 // Si l'index est chargé avec des données dans la variable "search" de la session,
 // c'est qu'une recherche à été effectuée, on affiche alors le contenu de cette recherche en tableau.
 if (isset($_SESSION["search"])) {
-    echo("<table>");
     // Si la variable isResearch est vrai, c'est une rechreche.
     if ($_SESSION["search"]["isResearch"]) {
-        echo("<tr>");
-        for ($i = 0; $i < count($header["search"]); $i++) {
-            echo("<th><pre>".$header["search"][$i]."</pre></th>");
-        }
-        echo("</tr>");
-        foreach ($_SESSION["search"]["result"] as $result) {
-            echo("<tr>");
-            echo("<td><pre>".$result["lastname"]."</pre></td>");
-            echo("<td><pre>".$result["firstname"]."</pre></td>");
-            // jobs
-            if (count($result["jobs"]) > 0) {
-                $jobsName = array();
-                for ($i = 0; $i < count($result["jobs"]); $i++) {
-                    array_push($jobsName, $result["jobs"][$i]["jobCategoryName".ucwords($_SESSION["lang"])]);
+        if ($_SESSION["search"]["result"]) {
+            echo('<table>');
+            echo('<thead>');
+            echo('<tr>');
+            for ($i = 0; $i < count($header["search"]); $i++) {
+                switch ($i) {
+                    case 1:
+                    case 3:
+                    case 4:
+                    case 5:
+                        echo('<th class="extend"><pre>'.$header["search"][$i].'</pre></th>');
+                        break;
+                    default:
+                        echo('<th><pre>'.$header["search"][$i].'</pre></th>');
+                        break;
                 }
-                echo("<td><pre>".join(", ", $jobsName)."</pre></td>");
-            } else {
-                echo('<td>N/A</td>');
             }
-            echo("<td><pre>".$result["capability"]."</pre></td>");
-            echo("<td><pre>".$result["numberOfMissions"]."</pre></td>");
-            echo("<td><pre>".$result["note"]."</pre></td>");
-            // I'm a star !!
-            if ($result["star"]) {
-                echo('<td>');
-                $missingStar = 5 - $result["star"];
-                for ($i = 0; $i < $result["star"]; $i++) {
-                    echo('<i class="fa fa-star star checked"></i>');
+            echo('</tr>');
+            echo('</thead>');
+            foreach ($_SESSION["search"]["result"] as $result) {
+                echo('<tbody>');
+                echo('<tr>');
+                echo('<td><pre>'.$result["lastname"].'</pre></td>');
+                echo('<td class="extend"><pre>'.$result["firstname"].'</pre></td>');
+                // jobs
+                if (count($result["jobs"]) > 0) {
+                    $jobsName = array();
+                    for ($i = 0; $i < count($result["jobs"]); $i++) {
+                        array_push($jobsName, $result["jobs"][$i]["jobCategoryName".ucwords($_SESSION["lang"])]);
+                    }
+                    echo('<td><pre>'.join(", ", $jobsName).'</pre></td>');
+                } else {
+                    echo('<td>N/A</td>');
                 }
-                if ($missingStar) {
-                    for ($i = 0; $i < $missingStar; $i++) {
-                        echo('<i class="fa fa-star star unchecked"></i>');
+                echo('<td class="extend"><pre>'.$result["capability"].'</pre></td>');
+                echo('<td class="extend"><pre>'.$result["numberOfMissions"].'</pre></td>');
+                echo('<td class="extend"><pre>'.$result["note"].'</pre></td>');
+                // I'm a star !!
+                if ($result["star"]) {
+                    echo('<td><pre>');
+                    $missingStar = 5 - $result["star"];
+                    for ($i = 0; $i < $result["star"]; $i++) {
+                        echo('<i class="fa fa-star star checked"></i>');
+                    }
+                    if ($missingStar) {
+                        for ($i = 0; $i < $missingStar; $i++) {
+                            echo('<i class="fa fa-star star unchecked"></i>');
+                        }
                     }
+                    echo('</pre></td>');
+                } else {
+                    echo('<td>N/A</td>');
                 }
-                echo("</td>");
-            } else {
-                echo('<td>N/A</td>');
+                // Si c'est une recherche on ajoute le bouton plus d'info,
+                // pour plus d'info avec une recherche par Id.
+                echo('<td class="noBorder">
+                        <form action="/Core/wrapper.php" method="post">
+                            <input type="hidden" name="moreInfoProId" value="'.$result["userId"].'">
+                            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["moreInfo"].'">
+                        </form>
+                    </td>
+                </tr>');
             }
-            // Si c'est une recherche on ajoute le bouton plus d'info,
-            // pour plus d'info avec une recherche par Id.
-            echo('<td>
-                      <form action="/Core/wrapper.php" method="post">
-                      <input type="hidden" name="moreInfoProId" value="'.$result["userId"].'">
-                      <input type="submit" value="'.$text[basename(__FILE__, ".php")]["moreInfo"].'">
-                      </form>
-                  </td>
-              </tr>');
+            echo('</tbody>');
+            echo('</table>');
+        } else {
+            echo('<p>'.$text[basename(__FILE__, ".php")]["noResult"].'</p>');
         }
-        echo("</table>");
 
     // Sinon c'est un "Plus d'info".
     } else {
-        echo('<tr>
-                  <th><pre>'.$header["moreInfos"][0].'</pre></th>
-                  <td><pre>'.$_SESSION["search"]["result"][0]["lastname"].'</pre></td>
-              </tr>
-              <tr>
-                  <th><pre>'.$header["moreInfos"][1].'</pre></th>
-                  <td><pre>'.$_SESSION["search"]["result"][0]["firstname"].'</pre></td>
-              </tr>');
+        echo('<table>
+              <tbody>
+                  <tr>
+                      <th><pre>'.$header["moreInfos"][0].'</pre></th>
+                      <td><pre>'.$_SESSION["search"]["result"][0]["lastname"].'</pre></td>
+                  </tr>
+                  <tr>
+                      <th><pre>'.$header["moreInfos"][1].'</pre></th>
+                      <td><pre>'.$_SESSION["search"]["result"][0]["firstname"].'</pre></td>
+                  </tr>');
         // jobs
         if (count($_SESSION["search"]["result"][0]["jobs"]) > 0) {
             $jobsName = array();
@@ -162,11 +185,14 @@ if (isset($_SESSION["search"])) {
                   <th><pre>'.$header["moreInfos"][9].'</pre></th>
                   <td><pre>'.$_SESSION["search"]["result"][0]["city"].'</pre></td>
               </tr>
-          </table>
-          <form action="/Core/wrapper.php" method="post">
-              <input type="hidden" name="mandateProId" value="'.$_SESSION["search"]["result"][0]["userId"].'">
-              <input type="submit" value="'.$text[basename(__FILE__, ".php")]["mandate"].'">
-          </form>');
+              </tr>
+           </tbody>
+        </table>
+        <form id="formMandate" action="/Core/wrapper.php" method="post">
+            <input type="hidden" name="mandateProId" value="'.$_SESSION["search"]["result"][0]["userId"].'">
+            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["mandate"].'">
+        </form>
+        </table>');
     }
 }
 
diff --git a/Templates/Includes/incl_index_slideshow.php b/Template/Include/incl_index_slideshow.php
index 261fd2e..98357f7 100644
--- a/Templates/Includes/incl_index_slideshow.php
+++ b/Template/Include/incl_index_slideshow.php
@@ -10,22 +10,16 @@
 require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
 
 // ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Separateur -->
-<div id="separator1" class="separator"></div>');
-
-// ****************************************************************************
 // SLIDESHOW
 // ****************************************************************************
 echo('<!-- Slideshow -->
-<section id="slides">
+<section id="secSlides">
     <p id="slide_0" class="show_block">'.$text[basename(__FILE__, ".php")]["slide1"].'</p>
     <p id="slide_1">'.$text[basename(__FILE__, ".php")]["slide2"].'</p>
     <p id="slide_2">'.$text[basename(__FILE__, ".php")]["slide3"].'</p>
     <!-- Indicateur de slide actuellement en cour -->
     <div id="slideDots">
-        <i id="slideDot_0" class="fas fa-circle slideSelected"></i>
+        <i id="slideDot_0" class="fas fa-circle slideDotSelected"></i>
         <i id="slideDot_1" class="fas fa-circle"></i>
         <i id="slideDot_2" class="fas fa-circle"></i>
     </div>
diff --git a/Template/Include/incl_table_myMission.php b/Template/Include/incl_table_myMission.php
new file mode 100644
index 0000000..504abac
--- /dev/null
+++ b/Template/Include/incl_table_myMission.php
@@ -0,0 +1,202 @@
+<?php
+
+// ############################################################################
+// #                                                                          #
+// # Description: Tableau correspondant aux missions effectuées               #
+// #              par l'utilisateur.                                          #
+// #                                                                          #
+// ############################################################################
+
+// Import des textes en fonction de la langue définie dans la variable "lang" de la session.
+require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
+// Import des en-tête des tables.
+require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/table.php");
+// Import des metodes de la base de donnée pour les recherches.
+require_once(dirname( __FILE__ )."./../../Database/meth_dbsearch.php");
+require_once(dirname( __FILE__ )."./../../Database/meth_dbmission.php");
+
+// Instanciation de la bdd avec les méthodes de recherche.
+$dbsearch  = new DbSearch;
+$dbmission = new DbMission;
+$missionStatus = [
+    "pending"   => [],
+    "ongoing"   => [],
+    "completed" => []
+];
+
+// Recherches des missions avec l'id de l'utilisateur actuellement connecté.
+switch ($_SESSION["userStatus"]) {
+    case 1:
+        $result = $dbmission->get_mission_by_proid($_SESSION["userId"]);
+        for ($i = 0; $i < count($result); $i++) {
+            $result[$i]["jobCategoryId"] = $dbsearch->get_job_by_jobid($result[$i]["jobCategoryId"]);
+        }
+        break;
+    case 2:
+        $result = $dbmission->get_mission_by_clientid($_SESSION["userId"]);
+        for ($i = 0; $i < count($result); $i++) {
+            $result[$i]["jobCategoryId"] = $dbsearch->get_job_by_jobid($result[$i]["jobCategoryId"]);
+        }
+        break;
+    default:
+        break;
+}
+
+// Puis on dispatch les missions dans leur categorie
+for ($i = 0; $i < count($result); $i++) {
+    if (!$result[$i]["acceptedByPro"]
+    ) {
+        array_push($missionStatus["pending"], $result[$i]);
+    } elseif (!$result[$i]["validatedByPro"] 
+              || !$result[$i]["validatedByClient"]
+    ) {
+        array_push($missionStatus["ongoing"], $result[$i]);
+    } else {
+        array_push($missionStatus["completed"], $result[$i]);
+    }
+}
+
+// ****************************************************************************
+// DIV PRINCIPALE
+// ****************************************************************************
+echo('<!-- Mes missions -->
+<main id="mainMyMission">');
+
+// ****************************************************************************
+// BOUTTONS DE NAVIGATION
+// ****************************************************************************
+echo('<div id="myMissionButtons">
+    <button onclick="show(\'mainMyMission\', \'section\', \'secPending\',  \'show_block\')">'.$text[basename(__FILE__, ".php")]["pendingMission"].'</button>
+    <button onclick="show(\'mainMyMission\', \'section\', \'secOngoing\',  \'show_block\')">'.$text[basename(__FILE__, ".php")]["ongoingMission"].'</button>
+    <button onclick="show(\'mainMyMission\', \'section\', \'secCompleted\',\'show_block\')">'.$text[basename(__FILE__, ".php")]["completedMission"].'</button>
+</div>'.PHP_EOL);
+
+// ****************************************************************************
+// TABLEAU DES MISSIONS EN ATTENTE
+// ****************************************************************************
+if ($missionStatus["pending"]) {
+    echo('<section id="secPending">
+        <table>
+            <!-- En-tête -->
+            <tr>'.PHP_EOL);
+    foreach($header["pendingMissions"] as $columnHeader) {
+        echo("            <th>".$columnHeader."</th>".PHP_EOL);
+    }
+    echo("        </tr>".PHP_EOL);
+    foreach ($missionStatus["pending"] as $rows) {
+        echo('        <!-- Missions -->
+            <tr>
+                <td><pre>'.$rows["date"].'</pre></td>
+                <td><pre>'.$rows["lastname"].'</pre></td>
+                <td><pre>'.$rows["jobCategoryId"][0]["jobCategoryName".ucwords($_SESSION["lang"])].'</pre></td>
+                <td><pre>'.$rows["subject"].'</pre></td>');
+        if ($_SESSION["userId"] == $rows["proId"]) {
+            echo('        <td class="noBorder">
+                <form action="/Core/wrapper.php" method="post">
+                <input type="hidden" name="acceptedMissionId" value="'.$rows["missionId"].'">
+                <input type="submit" value="'.$text[basename(__FILE__, ".php")]["accept"].'">
+                </form>
+            </td>');
+        }
+        echo('            </tr>'.PHP_EOL);
+    }
+    echo('    </table>
+    </section>');
+} else {
+    echo('<section id="secPending">
+        <p>'.$text[basename(__FILE__, ".php")]["noPending"].'</p>
+    </section>');
+}
+
+// ****************************************************************************
+// TABLEAU DES MISSIONS EN COURS
+// ****************************************************************************
+if ($missionStatus["ongoing"]) {
+    echo('<section id="secOngoing">
+        <table>
+            <!-- En-tête -->
+            <tr>'.PHP_EOL);
+    foreach($header["ongoingMissions"] as $columnHeader) {
+        echo("        <th>".$columnHeader."</th>".PHP_EOL);
+    }
+    echo("            </tr>".PHP_EOL);
+    foreach ($missionStatus["ongoing"] as $rows) {
+        echo('        <!-- Missions -->
+            <tr>
+                <td><pre>'.$rows["acceptedByPro"].'</pre></td>
+                <td><pre>'.$rows["lastname"].'</pre></td>
+                <td><pre>'.$rows["jobCategoryId"][0]["jobCategoryName".ucwords($_SESSION["lang"])].'</pre></td>
+                <td><pre>'.$rows["subject"].'</pre></td>
+                <td><pre>'.$rows["validatedByClient"].'</pre></td>
+                <td><pre>'.$rows["validatedByPro"].'</pre></td>');
+        if (!$rows["validatedByClient"] && $_SESSION["userStatus"] == 2 
+            || (!$rows["validatedByPro"] && $_SESSION["userStatus"] == 1)
+        ) {
+            echo('            <td class="noBorder">
+                    <form action="/Core/wrapper.php" method="post">
+                    <input type="hidden" name="validatedMissionId" value="'.$rows["missionId"].'">
+                    <input type="submit" value="'.$text[basename(__FILE__, ".php")]["validate"].'">
+                    </form>
+                </td>');
+        }
+        echo('        </tr>'.PHP_EOL);
+    }
+    echo('    </table>
+    </section>');
+} else {
+    echo('<section id="secOngoing">
+        <p>'.$text[basename(__FILE__, ".php")]["noOngoing"].'</p>
+    </section>');
+}
+
+// ****************************************************************************
+// TABLEAU DES MISSIONS TERMINEES
+// ****************************************************************************
+if ($missionStatus["completed"]) {
+    echo('<section id="secCompleted">
+        <table>
+            <!-- En-tête -->
+            <tr>'.PHP_EOL);
+    foreach($header["completedMissions"] as $columnHeader) {
+        echo("            <th>".$columnHeader."</th>".PHP_EOL);
+    }
+    echo("        </tr>".PHP_EOL);
+    foreach ($missionStatus["completed"] as $rows) {
+        echo('        <!-- Missions -->
+            <tr>
+                <td><pre>'.$rows["date"].'</pre></td>
+                <td><pre>'.$rows["acceptedByPro"].'</pre></td>
+                <td><pre>'.$rows["validatedByClient"].'</pre></td>
+                <td><pre>'.$rows["validatedByPro"].'</pre></td>
+                <td><pre>'.$rows["lastname"].'</pre></td>
+                <td><pre>'.$rows["jobCategoryId"][0]["jobCategoryName".ucwords($_SESSION["lang"])].'</pre></td>
+                <td><pre>'.$rows["subject"].'</pre></td>');
+        if ($rows["review"]) {
+            echo('<td><pre>'.$rows["review"].'</pre></td>');
+        } else {
+            echo('<td><pre>N/A</pre></td>');
+        }
+        if ($rows["note"]) {
+            echo('<td><pre>'.$rows["note"].'</pre></td>');
+        } else {
+            echo('<td><pre>N/A</pre></td>');
+        }
+            echo('</tr>'.PHP_EOL);
+    }
+    echo('    </table>
+    </section>');
+} else {
+    echo('<section id="secCompleted">
+        <p>'.$text[basename(__FILE__, ".php")]["noCompleted"].'</p>
+    </section>');
+}
+
+echo('<!-- Espace vide si le tableau est petit -->
+<div class="spacer"></div>');
+
+// ****************************************************************************
+// FIN DIV PRINCIPALE
+// ****************************************************************************
+echo('</main>'.PHP_EOL);
+
+?>
\ No newline at end of file
diff --git a/Templates/admin.php b/Template/admin.php
index fb4eeb0..a302006 100644
--- a/Templates/admin.php
+++ b/Template/admin.php
@@ -30,16 +30,17 @@ if (!isset($_SESSION["loggedIn"], $_SESSION["userStatus"])
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/admin.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_form_admin.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php"); ?>
-    <script src="/Statics/Js/main.js"></script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_form_admin.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php"); ?>
+    <script src="/Static/Js/main.js"></script>
     <script>show('mainAdmin', 'section', 'secAdminJobs', 'show_flex')</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Templates/autoLogin.php b/Template/autoLogin.php
index 9395e13..9395e13 100644
--- a/Templates/autoLogin.php
+++ b/Template/autoLogin.php
diff --git a/Templates/login.php b/Template/login.php
index 5c8f71a..fe0aee4 100644
--- a/Templates/login.php
+++ b/Template/login.php
@@ -22,15 +22,16 @@ $_SESSION["src"] = basename(__FILE__, ".php");
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/login.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("<title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_form_login.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php"); ?>
-    <script src="/Statics/Js/main.js"></script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_form_login.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php"); ?>
+    <script src="/Static/Js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Templates/logout.php b/Template/logout.php
index f7f9d85..f7f9d85 100644
--- a/Templates/logout.php
+++ b/Template/logout.php
diff --git a/Templates/message.php b/Template/message.php
index 31f2a9b..b28e067 100644
--- a/Templates/message.php
+++ b/Template/message.php
@@ -26,16 +26,17 @@ if (!isset($_SESSION["message"])) {
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/message.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_message.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php"); ?>
-    <script src="/Statics/Js/main.js"></script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_message.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php"); ?>
+    <script src="/Static/Js/main.js"></script>
 </body>
 </html>
 <?php unset($_SESSION["messageNumber"]); ?>
diff --git a/Templates/mission.php b/Template/mission.php
index 59ab34a..0fa5a01 100644
--- a/Templates/mission.php
+++ b/Template/mission.php
@@ -16,7 +16,7 @@ if (!isset($_SESSION["loggedIn"], $_SESSION["userStatus"])
 ) {
     $messageNumber = 9;
     $_SESSION["messageNumber"] = $messageNumber;
-    header("Location: /Templates/message.php");
+    header("Location: /Template/message.php");
     die();
 }
 
@@ -33,15 +33,16 @@ $_SESSION["src"] = basename(__FILE__, ".php");
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/mission.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_form_mission.php"); ?> 
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php"); ?>
-    <script src="/Statics/Js/main.js"></script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_form_mission.php"); ?> 
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php"); ?>
+    <script src="/Static/Js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Templates/myMission.php b/Template/myMission.php
index 20d8bb7..d87e02d 100644
--- a/Templates/myMission.php
+++ b/Template/myMission.php
@@ -33,16 +33,17 @@ $_SESSION["src"] = basename(__FILE__, ".php");
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/myMission.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_table_myMission.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php"); ?>
-    <script src="/Statics/Js/main.js"></script>
-    <script>show('mainMyMission', 'table', 'pendingTable', 'show_table')</script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_table_myMission.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php"); ?>
+    <script src="/Static/Js/main.js"></script>
+    <script>show('mainMyMission', 'section', 'secPending', 'show_block')</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Templates/register.php b/Template/register.php
index 86a60b0..9e64b4b 100644
--- a/Templates/register.php
+++ b/Template/register.php
@@ -22,15 +22,16 @@ $_SESSION["src"] = basename(__FILE__, ".php");
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/register.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_form_register.php")?> 
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php");?>
-    <script src="/Statics/Js/main.js"></script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_form_register.php")?> 
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php");?>
+    <script src="/Static/Js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Templates/userInfo.php b/Template/userInfo.php
index 50b4928..63ecee7 100644
--- a/Templates/userInfo.php
+++ b/Template/userInfo.php
@@ -31,15 +31,16 @@ $_SESSION["src"] = basename(__FILE__, ".php");
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/userInfo.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_navbar.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Includes/incl_form_userInfo.php")?> 
-<?php require_once(dirname( __FILE__ )."./Includes/incl_global_footer.php");?>
-    <script src="/Statics/Js/main.js"></script>
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_navbar.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Include/incl_form_userInfo.php")?> 
+<?php require_once(dirname( __FILE__ )."./Include/incl_global_footer.php");?>
+    <script src="/Static/Js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Templates/Includes/incl_global_navbar.php b/Templates/Includes/incl_global_navbar.php
deleted file mode 100644
index 899fa90..0000000
--- a/Templates/Includes/incl_global_navbar.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-// ############################################################################
-// #                                                                          #
-// # Description: La navbar                                                   #
-// #                                                                          #
-// ############################################################################
-
-// Switch -> https://www.php.net/manual/fr/control-structures.switch.php
-// https://stackoverflow.com/questions/6330114/do-you-need-break-in-switch-when-return-is-used
-
-// Import des textes en fonction de la langue définie dans la variable "lang" de la session.
-require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
-
-// Navbar avec titre et bouttons de navigations en fonction du type de compte
-echo('<!-- Navbar -->
-<nav>
-    <!-- Titre -->
-    <a id="navTitle" href="/"><h2>'.$text[basename(__FILE__, ".php")]["h2"].'</h2></a>
-    <!-- Espace vide -->
-    <div class=spacer></div>
-    <!-- Liste de lien pour la navigation -->
-    <ul>
-        <a href="/index.php#separator2"><li><i class="fas fa-search"></i> '.$text[basename(__FILE__, ".php")]["btnSearch"].'</li></a>'.PHP_EOL);
-
-// Affichage des éléments en fonction de si l'utilisateur est connecté ou non et de ses fonctions.
-if (isset($_SESSION["loggedIn"], $_SESSION["userStatus"]) 
-    && $_SESSION["loggedIn"] == "1"
-) {
-    switch ($_SESSION["userStatus"]) {
-        case 0:
-            $status = 'Admin';
-            echo('        <a href="/Templates/admin.php"><li><i class="fas fa-cog"></i> '.$text[basename(__FILE__, ".php")]["btnAdmin"].'</li></a>'.PHP_EOL);
-            break;
-        case 1:
-            $status = 'Pro';
-            echo('        <a href="/Templates/myMission.php"><li><i class="fas fa-tasks"></i> '.$text[basename(__FILE__, ".php")]["btnMyMission"].'</li></a>'.PHP_EOL);
-            echo('        <a href="/Templates/userInfo.php"><li><i class="fas fa-user"></i> '.$text[basename(__FILE__, ".php")]["btnInfos"].'</li></a>');
-            break;
-        case 2:
-            $status = 'Client';
-            echo('        <a href="/Templates/myMission.php"><li><i class="fas fa-tasks"></i> '.$text[basename(__FILE__, ".php")]["btnMyMission"].'</li></a>'.PHP_EOL);
-            echo('        <a href="/Templates/userInfo.php"><li><i class="fas fa-user"></i> '.$text[basename(__FILE__, ".php")]["btnInfos"].'</li></a>');
-            break;
-    }
-    echo('        <a href="/Templates/logout.php"><li><i class="fas fa-sign-out-alt"></i> '.$text[basename(__FILE__, ".php")]["btnLogout"].'</li></a>'.PHP_EOL);
-    echo('        <li>'.$_SESSION["email"].'<br>'.$status.'</li>'.PHP_EOL);
-} else {
-    echo('        <a href="/Templates/login.php"><li><i class="fas fa-sign-in-alt"></i> '.$text[basename(__FILE__, ".php")]["btnLogin"].'</li></a>
-        <a href="/Templates/register.php"><li><i class="fas fa-user-plus"></i> '.$text[basename(__FILE__, ".php")]["btnRegister"].'</li></a>'.PHP_EOL);
-}
-echo('    </ul>'.PHP_EOL);
-
-// Affichage du drapeau de la langue actuellement sélectionnée.
-$flags = [
-    "en" => "gb uk",
-    "fr" => "fr"
-];
-echo('    <!-- Choix de la langue -->
-    <form action="/../Core/wrapper.php" method="post" id="navFormLang">
-        <label>
-            <i class="'.$flags[$_SESSION["lang"]].' flag"></i>'.$text[basename(__FILE__, ".php")]["lang"].'
-            <select name="langSel" id="navSelLang" required>
-                <option value="" selected>'.$text[basename(__FILE__, ".php")]["btnLang"].'</option>
-                <option value="en">English</option>
-                <option value="fr">Français</option>
-            </select>
-        </label>
-    </form>
-</nav>'.PHP_EOL);
-
-?>
\ No newline at end of file
diff --git a/Templates/Includes/incl_table_myMission.php b/Templates/Includes/incl_table_myMission.php
deleted file mode 100644
index 5e0a7a8..0000000
--- a/Templates/Includes/incl_table_myMission.php
+++ /dev/null
@@ -1,183 +0,0 @@
-<?php
-
-// ############################################################################
-// #                                                                          #
-// # Description: Tableau correspondant aux missions effectuées               #
-// #              par l'utilisateur.                                          #
-// #                                                                          #
-// ############################################################################
-
-// Import des textes en fonction de la langue définie dans la variable "lang" de la session.
-require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/text.php");
-// Import des en-tête des tables.
-require_once(dirname( __FILE__ )."./".$_SESSION["lang"]."/table.php");
-// Import des metodes de la base de donnée pour les recherches.
-require_once(dirname( __FILE__ )."./../../Database/meth_dbsearch.php");
-require_once(dirname( __FILE__ )."./../../Database/meth_dbmission.php");
-
-// Instanciation de la bdd avec les méthodes de recherche.
-$dbsearch  = new DbSearch;
-$dbmission = new DbMission;
-$missionStatus = [
-    "pending"   => [],
-    "ongoing"   => [],
-    "completed" => []
-];
-
-// Recherches des missions avec l'id de l'utilisateur actuellement connecté.
-switch ($_SESSION["userStatus"]) {
-    case 1:
-        $result = $dbmission->get_mission_by_proid($_SESSION["userId"]);
-        for ($i = 0; $i < count($result); $i++) {
-            $result[$i]["jobCategoryId"] = $dbsearch->get_job_by_jobid($result[$i]["jobCategoryId"]);
-        }
-        break;
-    case 2:
-        $result = $dbmission->get_mission_by_clientid($_SESSION["userId"]);
-        for ($i = 0; $i < count($result); $i++) {
-            $result[$i]["jobCategoryId"] = $dbsearch->get_job_by_jobid($result[$i]["jobCategoryId"]);
-        }
-        break;
-    default:
-        break;
-}
-
-// Puis on dispatch les missions dans leur categorie
-for ($i = 0; $i < count($result); $i++) {
-    if (!$result[$i]["acceptedByPro"]
-    ) {
-        array_push($missionStatus["pending"], $result[$i]);
-    } elseif (!$result[$i]["validatedByPro"] 
-              || !$result[$i]["validatedByClient"]
-    ) {
-        array_push($missionStatus["ongoing"], $result[$i]);
-    } else {
-        array_push($missionStatus["completed"], $result[$i]);
-    }
-}
-
-// ****************************************************************************
-// SEPARATEUR
-// ****************************************************************************
-echo('<!-- Separateur -->
-<div class="separator"></div>');
-
-// ****************************************************************************
-// DIV PRINCIPALE
-// ****************************************************************************
-echo('<!-- Mes missions -->
-<main id="mainMyMission">');
-
-// ****************************************************************************
-// BOUTTONS DE NAVIGATION
-// ****************************************************************************
-echo('    <div id="missionButtons">
-        <button onclick="show(\'mainMyMission\', \'table\', \'pendingTable\', \'show_table\')"><h2>'.$text[basename(__FILE__, ".php")]["pendingMission"].'</h2></button>
-        <button onclick="show(\'mainMyMission\', \'table\', \'ongoingTable\', \'show_table\')"><h2>'.$text[basename(__FILE__, ".php")]["ongoingMission"].'</h2></button>
-        <button onclick="show(\'mainMyMission\', \'table\', \'completedTable\', \'show_table\')"><h2>'.$text[basename(__FILE__, ".php")]["completedMission"].'</h2></button>
-    </div>'.PHP_EOL);
-
-// ****************************************************************************
-// TABLEAU DES MISSIONS EN ATTENTE
-// ****************************************************************************
-echo('    <table id="pendingTable">
-        <!-- En-tête -->
-        <tr>'.PHP_EOL);
-foreach($header["pendingMissions"] as $columnHeader) {
-    echo("            <th>".$columnHeader."</th>".PHP_EOL);
-}
-echo("        </tr>".PHP_EOL);
-foreach ($missionStatus["pending"] as $rows) {
-    echo('        <!-- Missions -->
-        <tr>
-            <td><pre>'.$rows["date"].'</pre></td>
-            <td><pre>'.$rows["lastname"].'</pre></td>
-            <td><pre>'.$rows["jobCategoryId"][0]["jobCategoryName".ucwords($_SESSION["lang"])].'</pre></td>
-            <td><pre>'.$rows["subject"].'</pre></td>');
-    if ($_SESSION["userId"] == $rows["proId"]) {
-        echo('        <td>
-            <form action="/Core/wrapper.php" method="post">
-            <input type="hidden" name="acceptedMissionId" value="'.$rows["missionId"].'">
-            <input type="submit" value="'.$text[basename(__FILE__, ".php")]["accept"].'">
-            </form>
-        </td>');
-    }
-    echo('            </tr>'.PHP_EOL);
-}
-echo('    </table>');
-
-// ****************************************************************************
-// TABLEAU DES MISSIONS EN COURS
-// ****************************************************************************
-echo('    <table id="ongoingTable">
-        <!-- En-tête -->
-        <tr>'.PHP_EOL);
-foreach($header["ongoingMissions"] as $columnHeader) {
-    echo("        <th>".$columnHeader."</th>".PHP_EOL);
-}
-echo("            </tr>".PHP_EOL);
-foreach ($missionStatus["ongoing"] as $rows) {
-    echo('        <!-- Missions -->
-        <tr>
-            <td><pre>'.$rows["acceptedByPro"].'</pre></td>
-            <td><pre>'.$rows["lastname"].'</pre></td>
-            <td><pre>'.$rows["jobCategoryId"][0]["jobCategoryName".ucwords($_SESSION["lang"])].'</pre></td>
-            <td><pre>'.$rows["subject"].'</pre></td>
-            <td><pre>'.$rows["validatedByClient"].'</pre></td>
-            <td><pre>'.$rows["validatedByPro"].'</pre></td>');
-    if (!$rows["validatedByClient"] && $_SESSION["userStatus"] == 2 
-        || (!$rows["validatedByPro"] && $_SESSION["userStatus"] == 1)
-    ) {
-        echo('            <td>
-                <form action="/Core/wrapper.php" method="post">
-                <input type="hidden" name="validatedMissionId" value="'.$rows["missionId"].'">
-                <input type="submit" value="'.$text[basename(__FILE__, ".php")]["validate"].'">
-                </form>
-            </td>');
-    }
-    echo('        </tr>'.PHP_EOL);
-}
-echo('    </table>');
-
-// ****************************************************************************
-// TABLEAU DES MISSIONS TERMINEES
-// ****************************************************************************
-echo('    <table id="completedTable">
-        <!-- En-tête -->
-        <tr>'.PHP_EOL);
-foreach($header["completedMissions"] as $columnHeader) {
-    echo("            <th>".$columnHeader."</th>".PHP_EOL);
-}
-echo("        </tr>".PHP_EOL);
-foreach ($missionStatus["completed"] as $rows) {
-    echo('        <!-- Missions -->
-        <tr>
-            <td><pre>'.$rows["date"].'</pre></td>
-            <td><pre>'.$rows["acceptedByPro"].'</pre></td>
-            <td><pre>'.$rows["validatedByClient"].'</pre></td>
-            <td><pre>'.$rows["validatedByPro"].'</pre></td>
-            <td><pre>'.$rows["lastname"].'</pre></td>
-            <td><pre>'.$rows["jobCategoryId"][0]["jobCategoryName".ucwords($_SESSION["lang"])].'</pre></td>
-            <td><pre>'.$rows["subject"].'</pre></td>');
-    if ($rows["review"]) {
-        echo('<td><pre>'.$rows["review"].'</pre></td>');
-    } else {
-        echo('<td><pre>N/A</pre></td>');
-    }
-    if ($rows["note"]) {
-        echo('<td><pre>'.$rows["note"].'</pre></td>');
-    } else {
-        echo('<td><pre>N/A</pre></td>');
-    }
-        echo('</tr>'.PHP_EOL);
-}
-echo('    </table>
-<!-- Espace vide si le tableau est petit -->
-<div class="spacer"></div>');
-
-// ****************************************************************************
-// FIN DIV PRINCIPALE
-// ****************************************************************************
-echo('</main>'.PHP_EOL);
-
-?>
\ No newline at end of file
diff --git a/index.php b/index.php
index a2f4053..0a34e50 100644
--- a/index.php
+++ b/index.php
@@ -29,7 +29,7 @@ $_SESSION["src"] = basename(__FILE__, ".php");
 // Si le cookie auto-login est présent et que l'utilisateur n'est pas connecté
 // alors on va tenter de le faire et on le redirige donc vers le wrapper.
 if (isset($_COOKIE["autoLogin"]) && $_SESSION["loggedIn"] == false) {
-    header("Location: /Templates/autoLogin.php");
+    header("Location: /Template/autoLogin.php");
     die();
 }
 
@@ -43,18 +43,20 @@ if (isset($_COOKIE["autoLogin"]) && $_SESSION["loggedIn"] == false) {
 <?php echo('<html lang="'.$_SESSION["lang"].'">'.PHP_EOL); ?>
 <!-- Balise contenant les metadata -->
 <head>
-<?php require_once(dirname( __FILE__ )."./Templates/Includes/incl_global_header.php"); ?>
-<?php require_once(dirname( __FILE__ )."./Templates/Includes/".$_SESSION["lang"]."/title.php"); ?>
+<?php require_once(dirname( __FILE__ )."./Template/Include/incl_global_header.php"); ?>
+<?php echo('        <link href="/Static/Css/slideshow.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php echo('        <link href="/Static/Css/search.css" rel="stylesheet">'.PHP_EOL); ?>
+<?php require_once(dirname( __FILE__ )."./Template/Include/".$_SESSION["lang"]."/title.php"); ?>
 <?php echo("        <title>".$title[basename(__FILE__, ".php")]."</title>".PHP_EOL); ?>
 </head>
 <!-- Balise principale contenant le corps du document HTML -->
 <body>
-<?php require_once("./Templates/Includes/incl_global_navbar.php"); ?>
-<?php require_once("./Templates/Includes/incl_index_slideshow.php"); ?>
-<?php require_once("./Templates/Includes/incl_index_search.php");?>      
-<?php require_once("./Templates/Includes/incl_global_footer.php"); ?>
-    <script src="/Statics/Js/main.js"></script>
-    <script src="/Statics/Js/index.js"></script>
+<?php require_once("./Template/Include/incl_global_navbar.php"); ?>
+<?php require_once("./Template/Include/incl_index_slideshow.php"); ?>
+<?php require_once("./Template/Include/incl_index_search.php");?>      
+<?php require_once("./Template/Include/incl_global_footer.php"); ?>
+    <script src="/Static/Js/main.js"></script>
+    <script src="/Static/Js/index.js"></script>
     <!-- Activation du slider -->
     <script>slideshow_start();</script>
 </body>