diff --git a/config/config.php b/config/config.php
index 322a129..13c4fe2 100644
--- a/config/config.php
+++ b/config/config.php
@@ -12,7 +12,8 @@ $base  = '';
 $login = '';
 $mdp   = '';
 
-$racine='/~lebeaulato/WF-Website'; // /~kekentin/WF/WF-Website
+$racine='/~kemondejar/WF-Website'; // /~kekentin/WF/WF-Website
+//$racine='/WF-Website';
 
 
 //Vues
@@ -24,7 +25,7 @@ $vues['login']  = 'vue/login.php';
 $vues['signin']  = 'vue/signin.php';
 $vues['search']  = 'vue/search.php';
 $vues['favorite']  = 'vue/favorits.php';
-
+$vues['create']  = 'vue/create.php';
 $vues['quiz']  = 'vue/quiz.php';
 $vues['endQuiz']  = 'vue/endQuiz.php';
 $vues['submitQuote']  = 'vue/submitQuote.php';
diff --git a/images/Vector.png b/images/Vector.png
new file mode 100644
index 0000000..c07ee25
Binary files /dev/null and b/images/Vector.png differ
diff --git a/images/VectorCoeur.png b/images/VectorCoeur.png
new file mode 100644
index 0000000..18e6909
Binary files /dev/null and b/images/VectorCoeur.png differ
diff --git a/index.php b/index.php
index cdbd6fb..33bc65b 100644
--- a/index.php
+++ b/index.php
@@ -15,7 +15,8 @@ if(!isset($_SESSION['theme'])){
 require_once __DIR__ . '/config/config.php';
 require __DIR__ . '/vendor/autoload.php';
 
-$co = new \Gateway\Connection('pgsql:host=localhost;dbname=dbkekentin;', 'kekentin', 'passwd');// ('pgsql:host=localhost;dbname=dbkekentin;', 'kekentin', 'passwd')
+//$co = new \Gateway\Connection('pgsql:host=localhost;dbname=postgres;', 'postgres', 'sucepute');
+$co = new \Gateway\Connection('pgsql:host=localhost;dbname=dbkekentin;', 'kekentin', 'passwd');
 
 //twig
 $loader = new \Twig\Loader\FilesystemLoader('vue/templates');
@@ -24,7 +25,7 @@ $twig   = new \Twig\Environment($loader, [
 ]);
 
 global $racine;
-$twig->addGlobal('racine',$racine); // /~kekentin/WF/WF-Website
+$twig->addGlobal('racine',$racine);
 
 
 
diff --git a/public/script/theme-toggle.js b/public/script/theme-toggle.js
index e10cd94..2b335e5 100644
--- a/public/script/theme-toggle.js
+++ b/public/script/theme-toggle.js
@@ -45,6 +45,8 @@ function toggleTheme() {
             favicon.href = 'images/iconeSombre.ico'; // Favicon pour le mode sombre
             localStorage.setItem('theme', 'dark'); // Enregistre le thème sombre dans localStorage
         }
+        // Attribue la même classe que juste avant à l'icône de thème sombre
+        themeIcon.className = themeIcon.className;
     } else {
         console.error("Impossible de trouver l'icône ou le favicon.");
     }
diff --git a/public/styles/style.css b/public/styles/style.css
index 861caed..c265563 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -1,4 +1,5 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap'); */
+@import url(./styleScroll.css);
 :root {
     --main-dark-background-color: #120B1D;
     --main-dark-text-color : #ffffff;
@@ -6,13 +7,17 @@
     --main-dark-other-color : #000000;
 
     --main-light-background-color: #ffffff;
+    /*--main-light-background-color: #ffffff;*/
     --main-light-text-color : #000000;
-    --main-light-gradient : linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
-    --main-light-other-color : #d2d2d8;
+    --main-light-gradient : linear-gradient(90deg, #78b3eb, #64c1ff);
+    /*--main-light-gradient : linear-gradient(-90deg, #f3e0f7, #dd9aff);*/
+    /*--main-light-gradient : linear-gradient(45deg, #73CFF6, #DE95CA);*/
+    --main-light-other-color : #f8eaff;
+    /*--main-light-other-color : #f8eaff;*/
+    /*--main-light-other-color : #d2d2d8;*/
 }   
 
 /* Général */
-
 body{
     font-family: "Lemon", serif;
     margin : 0%;
@@ -29,6 +34,30 @@ body.dark-mode .header{
     background-color: var(--main-dark-other-color);
 }
 
+.dark-mode::-webkit-scrollbar-track {
+    background: var(--main-dark-background-color);
+    border-radius: 8px; 
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
+    position: relative;
+}
+
+.dark-mode::-webkit-scrollbar-thumb {
+    background: var(--main-dark-gradient);
+    border-radius: 10px;
+    border: 2px solid var(--main-dark-other-color);
+    box-shadow: 0 0 10px rgba(106, 0, 255, 0.4);
+    position: relative;
+}
+
+.dark-mode::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #7d00ff, #4b00aa);
+    box-shadow: 0 0 15px rgba(125, 0, 255, 0.7), 0 0 30px rgba(125, 0, 255, 0.5);
+    transform: scale(1.1);
+}
+
+.dark-mode .theme-icon:hover, .dark-mode .nav a:hover {
+    filter: brightness(0) saturate(100%) invert(16%) sepia(27%) saturate(7439%) hue-rotate(259deg) brightness(83%) contrast(110%);
+}
 
 /* Light mode */
 
@@ -45,6 +74,30 @@ body.light-mode .header img{
     filter: invert(100%);
 }
 
+.light-mode::-webkit-scrollbar-track {
+    background: var(--main-light-background-color); 
+    border-radius: 8px; 
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
+    position: relative;
+}
+
+.light-mode::-webkit-scrollbar-thumb {
+    background: var(--main-light-gradient);
+    border-radius: 10px; 
+    border: 2px solid var(--main-light-other-color);
+    box-shadow: 0 0 10px rgba(255, 182, 193, 0.4);
+    position: relative;
+}
+
+.light-mode::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #a0e4ff, #f7cce6); 
+    box-shadow: 0 0 15px rgba(160, 228, 255, 0.7), 0 0 30px rgba(247, 204, 230, 0.5);
+    transform: scale(1.1);
+}
+
+.light-mode .theme-icon:hover, .light-mode .nav a:hover {
+    filter: brightness(0) saturate(100%) invert(84%) sepia(88%) saturate(6613%) hue-rotate(276deg) brightness(89%) contrast(95%);
+}
 
 /* écran par défaut */
 
@@ -63,6 +116,11 @@ body{
     height: 10vh;
 }
 
+::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+}
+
 #theme-icon{
     height : 5vh
 }
@@ -86,10 +144,19 @@ body{
     width: 20%;
 }
 
+.logo:hover{
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out;
+}
+
 .logo img{
     height : 10vh;
 }
 
+.iconUser{
+    margin-right: 5px;
+}
+
 .user {
     display: flex;
     flex-direction: row;
diff --git a/public/styles/styleAccueil.css b/public/styles/styleAccueil.css
index 2208f14..0770632 100644
--- a/public/styles/styleAccueil.css
+++ b/public/styles/styleAccueil.css
@@ -5,12 +5,13 @@
 /* Citation du jour */
 
 .citation-du-jour {
-    width: 97.5vw;  
+    width: 96.66vw;  
     padding: 0;
     margin-left: 1.25vw;
     overflow: hidden;
     margin-bottom: 20px;
     height: 150px;
+    transition: transform 0.3s ease;
 }
 
 /* dark-mode */
@@ -24,3 +25,9 @@ body.dark-mode .citation-du-jour {
 body.light-mode .citation-du-jour {
     background: var(--main-light-gradient); 
 }
+
+.citation-du-jour:hover {
+    transform: scale(1.02);
+    z-index: 5;
+    position: relative;
+}
\ No newline at end of file
diff --git a/public/styles/styleCreate.css b/public/styles/styleCreate.css
new file mode 100644
index 0000000..e169897
--- /dev/null
+++ b/public/styles/styleCreate.css
@@ -0,0 +1 @@
+@import url(./style.css); /* Import de style.css */
\ No newline at end of file
diff --git a/public/styles/styleEndQuiz.css b/public/styles/styleEndQuiz.css
index 81c9892..b1de2e1 100644
--- a/public/styles/styleEndQuiz.css
+++ b/public/styles/styleEndQuiz.css
@@ -10,6 +10,10 @@ body.dark-mode .resultat {
     background-color: var(--main-dark-other-color);
 }
 
+body.dark-mode .suiv img{
+    filter: invert(100%);
+}
+
 /* ====== LIGHT MODE ====== */
 
 body.light-mode h1, body.light-mode h2, body.light-mode p {
@@ -20,10 +24,6 @@ body.light-mode .resultat {
     background-color: var(--main-light-other-color);
 }
 
-body.light-mode .suiv img{
-    filter: invert(100%);
-}
-
 /* ====== ECRAN DEFAUT ====== */
 
 h1 {
@@ -48,7 +48,7 @@ h1 {
 }
 
 .suiv img {
-    width: 1vh;
+    width: 7vh;
 }
 
 /* ====== ECRAN TABLETTE ====== */
diff --git a/public/styles/styleProfil.css b/public/styles/styleProfil.css
index e956e20..abca93f 100644
--- a/public/styles/styleProfil.css
+++ b/public/styles/styleProfil.css
@@ -35,12 +35,10 @@ body.light-mode .inputPasswd{
 }
 
 body.dark-mode .saveButtonPasswd {
-	background: var(--main-dark-gradient); 
-	color : var(--main-dark-text-color);
+	background: var(--main-dark-gradient);
+	color: var(--main-dark-text-color);
 }
 
-
-
 /* ====== LIGHT MODE ====== */
 body.light-mode h1{
 	color : var(--main-light-text-color);
@@ -74,11 +72,10 @@ body.light-mode .inputPasswd{
 }
 
 body.light-mode .saveButtonPasswd {
-	background: var(--main-light-gradient); 
-	color : var(--main-light-text-color);
+	background: var(--main-light-gradient);
+	color: var(--main-light-text-color);
 }
 
-
 /* ====== ECRAN DEFAUT ====== */
 
 h1{
@@ -115,12 +112,12 @@ p{
 
 .login{
 	width: 30vw;
-	height: 77vh;
+	/*height: 78vh;*/
 	margin: auto;
 	margin-top: 17vh;
 	border-radius: 25px;
 	padding-top: 1px;
-	padding-bottom: 1%;
+	padding-bottom: 2%;
 }
 
 .imgModify{
@@ -141,13 +138,19 @@ p{
 }
 
 .saveButtonPasswd {
-	font-family: "Lemon", serif;
-	border: none;
-	padding: 1%;
+	display: block;
+	margin: auto;
+	padding: 1vh;;
+	margin-top: 1vh;
 	border-radius: 25px;
-	width: 55%;
-	font-size: 15px;
-	margin-top: 5%;
+	border: none;
+}
+
+.ChangeImg{
+	display: block;
+	margin: auto;
+	background: transparent;
+	border: none;
 }
 
 .buttonSudmiteDiv{
diff --git a/public/styles/styleQuiz.css b/public/styles/styleQuiz.css
index 85e277a..8b837e3 100644
--- a/public/styles/styleQuiz.css
+++ b/public/styles/styleQuiz.css
@@ -14,10 +14,6 @@ body.dark-mode .answer {
     color: var(--main-dark-text-color);
 }
 
-body.dark-mode .answer:hover {
-    background: #1b0048;
-}
-
 body.dark-mode .submit-button {
     text-align: center;
     margin-top: 80px;
@@ -51,10 +47,6 @@ body.light-mode .answer {
     color: var(--main-light-text-color);
 }
 
-body.light-mode .answer:hover {
-    background: #7c7c7c;
-}
-
 /* ====== ECRAN DEFAUT ====== */
 
 h1, h2, p {
@@ -90,6 +82,11 @@ h1, h2, p {
     cursor: pointer;
 }
 
+.answer:hover {
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out;
+}
+
 #timer{
     width: 20vw;
     display: block;
diff --git a/public/styles/styleQuote.css b/public/styles/styleQuote.css
index de94f79..cdb801c 100644
--- a/public/styles/styleQuote.css
+++ b/public/styles/styleQuote.css
@@ -4,76 +4,60 @@
 
 body.dark-mode .card {
     background-color: var(--main-dark-other-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-
-body.dark-mode .card-content {
-    color: var(--main-dark-text-color);
-}
-
-
-body.dark-mode .likes {
-    font-size: 20px;
+body.dark-mode .card-content,
+body.dark-mode .likes,
+body.dark-mode .like-icon,
+body.dark-mode .share-icon,
+body.dark-mode .likeLien {
     color: var(--main-dark-text-color);
 }
 
-body.dark-mode .like-icon {
-    color: var(--main-dark-text-color);
-    cursor: pointer;
-}
-
+body.dark-mode .like-icon,
 body.dark-mode .share-icon {
-    color: var(--main-dark-text-color);
     cursor: pointer;
 }
 
-body.dark-mode .commentaire{
-    background-color:  var(--main-dark-other-color);
-}
-
-body.dark-mode .likeLien{
-    color: var(--main-dark-text-color);
+body.dark-mode .commentaire {
+    background-color: var(--main-dark-other-color);
 }
 
 /* ====== LIGHT MODE ====== */
 
 body.light-mode .card {
     background-color: var(--main-light-other-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-body.light-mode .card-content {
+body.light-mode .card-content,
+body.light-mode .likes,
+body.light-mode .like-icon,
+body.light-mode .share-icon,
+body.light-mode .likeLien {
     color: var(--main-light-text-color);
 }
 
-
-body.light-mode .likes {
-    font-size: 20px;
-    color: var(--main-light-text-color);
-}
-
-body.light-mode .like-icon {
-    color: var(--main-light-text-color);
-    cursor: pointer;
-}
-
+body.light-mode .like-icon,
 body.light-mode .share-icon {
-    color: var(--main-light-text-color);
     cursor: pointer;
 }
 
-body.light-mode .commentaire{
+body.light-mode .commentaire {
     background-color: var(--main-light-other-color);
 }
 
-body.light-mode .likeLien{
-    color: var(--main-light-text-color);
+body.light-mode .like-icon-none img {
+    filter: invert(100%);
 }
 
 /* ====== DEFAULT ====== */
 
-.central_container{
+.central_container {
     display: flex;
     justify-content: space-around;
+    padding: 2vh;
 }
 
 .card {
@@ -83,9 +67,10 @@ body.light-mode .likeLien{
     height: 70vh;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
-.commentaire{
+.commentaire {
     margin-top: 5vh;
     border-radius: 15px;
     width: 25vw;
@@ -93,7 +78,7 @@ body.light-mode .likeLien{
     display: flex;
     padding: 1vh;
     flex-direction: column;
-    flex-wrap: nowrap;
+    overflow: hidden;
 }
 
 .infoQuote {
@@ -101,6 +86,7 @@ body.light-mode .likeLien{
     font-size: 25px;
     line-height: 40px;
 }
+
 .card-image {
     border-radius: 10px;
     width: 20vw;
@@ -115,17 +101,18 @@ body.light-mode .likeLien{
     font-style: italic;
 }
 
-.comAdd{
-    width : 20vw;
-    height : 4vh;
+.comAdd {
+    width: 21vw;
+    height: 5vh;
     padding-left: 1vh;
     border: none;
     border-radius: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.btn{
-    width : 2vw;
-    height : 4vh;
+.btn {
+    width: 5vh;
+    height: 5vh;
     padding-left: 1vh;
     border: none;
     border-radius: 50px;
@@ -133,108 +120,153 @@ body.light-mode .likeLien{
     background-image: url(../images/icons8-envoyer-24.png);
     background-repeat: no-repeat;
     background-position: center;
+    cursor: pointer;
 }
 
-.formulaire{
-    display : flex;
+.formulaire {
+    display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
-.comment_section{
+.comment_section {
     margin-top: 2vh;
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
-    height: 55vh;
+    overflow-y: auto;
+    height: 95%;
+}
+
+.comment_section::-webkit-scrollbar {
+    width: 8px;
+}
+
+.comment_section::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 8px;
 }
 
-.com{
+.comment_section::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 8px;
+    border: 2px solid #f1f1f1;
+}
+
+.comment_section::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+}
+
+.com {
     background-color: #fff;
     color: black;
     display: flex;
     font-family: "Lemon", sans-serif;
     flex-direction: column;
-    margin-top: 1vh;
     margin-bottom: 1vh;
     border-radius: 20px;
-    padding : 2%;
+    padding: 2%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.date{
+.date {
     margin-bottom: 0.5vh;
     font-size: small;
+    color: #888;
 }
 
-.icons{
+.icons {
     margin: 2vh;
+    display: flex;
+    justify-content: space-around;
 }
 
-.like-icon{
-    font-size: 50px;
+.like-icon,
+.like-icon-none {
+    height: 5vh;
     margin-bottom: 2vh;
 }
 
-.share-icon{
+.like-icon img,
+.like-icon-none img {
+    height: 5vh;
+    width: 5vh;
+}
+
+.share-icon {
     font-size: 50px;
 }
 
-.part1{
+.part1,
+.part2 {
     display: flex;
 }
 
-.part2{
-    display: flex;
+.part2 {
     justify-content: space-between;
 }
 
-.likes{
-    align-self: self-end;
+.likes {
+    align-self: flex-end;
     padding: 2vh;
 }
 
-.infoQuote{
-    margin: 2vh;
+.infoQuote {
+    margin-bottom: 2vh;
     height: 31vh;
 }
 
-.userName{
+.userName {
     font-size: large;
     display: inline-block;
 }
 
-.infCom{
+.infCom {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 1vh;
+    margin-bottom: -5px;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+    object-fit: cover;
+    border: #000 solid 1.5px;
 }
 
-.comAdd :focus {
-    outline: none; /* Supprime la bordure bleue */
-    box-shadow: none; /* Supprime également toute ombre ajoutée */
+.imgIcones {
+    display: flex;
+    align-items: center;
+}
+
+.comAdd:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
-.likeLien{
+.likeLien {
     text-decoration: none;
 }
 
-.card-content{
+.card-content {
     margin-left: 20px;
     flex: 1;
 }
 
-@media (max-width: 834px) or (max-aspect-ratio : 1/1){
-    .central_container{
+@media (max-width: 834px), (max-aspect-ratio: 1/1) {
+    .central_container {
         flex-direction: column;
     }
 
     .card {
-        margin : auto;
+        margin: auto;
         margin-bottom: 1vh;
         width: 85vw;
         height: 50vh;
     }
 
-    .commentaire{
+    .commentaire {
         margin-top: 1vh;
         margin: auto;
         width: 83vw;
@@ -242,7 +274,6 @@ body.light-mode .likeLien{
     }
 
     .infoQuote {
-        list-style: none;
         font-size: 20px;
         line-height: 30px;
     }
@@ -256,45 +287,47 @@ body.light-mode .likeLien{
         font-size: 25px;
     }
 
-    .btn{
-        width : 5vw;
-        height : 5vw;
+    .btn {
+        width: 5vh;
+        height: 5vh;
     }
-    
-    .com{
-        display: flex;
-        flex-direction: column;
+
+    .com {
         margin-top: 0.5vh;
         margin-bottom: 0.5vh;
-        padding : 2vh;
+        padding: 2vh;
     }
-    
-    .icons{
+
+    .icons {
         margin: 2vh;
     }
-    
-    .like-icon{
-        font-size: 35px;
-        margin-bottom: 2vh;
+
+    .like-icon,
+    .like-icon-none {
+        height: 3vh;
+    }
+
+    .like-icon img,
+    .like-icon-none img {
+        height: 3vh;
+        width: 3vh;
     }
-    
-    .share-icon{
+
+    .share-icon {
         font-size: 35px;
     }
 
-    .likes{
-        align-self: self-end;
+    .likes {
         padding: 2vh;
     }
-    
-    .infoQuote{
+
+    .infoQuote {
         margin: 2vh;
         height: 21vh;
     }
 
-    #content{
+    #content {
         width: 75vw;
         height: 5vw;
     }
-    
-}
\ No newline at end of file
+}
diff --git a/public/styles/styleQuoteLittle.css b/public/styles/styleQuoteLittle.css
index 6c90df5..e285d3f 100644
--- a/public/styles/styleQuoteLittle.css
+++ b/public/styles/styleQuoteLittle.css
@@ -25,6 +25,12 @@ body.light-mode .citation-container{
 
 /* écran par défaut */
 
+a.link-citation:hover {
+    transform: scale(1.02);
+    z-index: 5;
+    position: relative;
+}
+
 .suggestions-container {
     display: flex;
     flex-wrap: wrap;
@@ -35,8 +41,9 @@ body.light-mode .citation-container{
 
 a.link-citation {
     text-decoration: none;
-    width: 47.5%;
+    width: 47.5vw;
     height: 100%;
+    transition: transform 0.3s ease;
 }
 
 .citation-container {
@@ -103,7 +110,7 @@ h2 {
 
 /* écran tablette*/
 
-@media (max-width: 1638px){
+@media (max-width: 780px){
     .suggestions-container {
         flex-direction: column;
         width: 100%;
diff --git a/public/styles/styleScroll.css b/public/styles/styleScroll.css
new file mode 100644
index 0000000..8bf985a
--- /dev/null
+++ b/public/styles/styleScroll.css
@@ -0,0 +1,54 @@
+/* Scrollbar globale */
+::-webkit-scrollbar {
+    width: 14px; /* Largeur de la barre verticale */
+    height: 14px; /* Hauteur de la barre horizontale */
+}
+
+/* Track (fond de la scrollbar) */
+::-webkit-scrollbar-track {
+    background: linear-gradient(180deg, #2a2b4d, #1e1e3f); /* Fond violet sombre */
+    border-radius: 8px; /* Coins arrondis */
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); /* Ombre interne pour profondeur */
+    position: relative;
+}
+
+/* Ajouter un motif discret sur le track */
+::-webkit-scrollbar-track:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><text x="0" y="10" fill="%23ffffff33" font-size="12" font-family="serif">✦</text></svg>');
+    background-repeat: repeat;
+    opacity: 0.3; /* Motif semi-transparent */
+}
+
+/* Thumb (curseur) */
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #6a00ff, #3b0088); /* Dégradé violet-bleu */
+    border-radius: 10px; /* Coins arrondis pour élégance */
+    border: 2px solid #1e1e3f; /* Bord sombre pour contraste */
+    box-shadow: 0 0 10px rgba(106, 0, 255, 0.4); /* Lumière douce */
+    position: relative;
+}
+
+/* Ajouter un motif mystique sur le thumb */
+::-webkit-scrollbar-thumb:before {
+    content: '❂'; /* Symbole mystique */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.5); /* Couleur subtile */
+    font-family: 'Fantasy', sans-serif; /* Style runique */
+}
+
+/* Effet lumineux au survol */
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #7d00ff, #4b00aa); /* Dégradé plus lumineux */
+    box-shadow: 0 0 15px rgba(125, 0, 255, 0.7), 0 0 30px rgba(125, 0, 255, 0.5); /* Lumière amplifiée */
+    transform: scale(1.1); /* Légère croissance au survol */
+}
\ No newline at end of file
diff --git a/public/styles/styleSubmitQuote.css b/public/styles/styleSubmitQuote.css
index 98ee5cd..b99085b 100644
--- a/public/styles/styleSubmitQuote.css
+++ b/public/styles/styleSubmitQuote.css
@@ -1,48 +1,42 @@
 @import url(./style.css);
 
-@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
-
-body, html {
-    height: 100%;
-    overflow: hidden;
-}
 
 /* ====== DARK MODE ====== */
+
 body.dark-mode h1, body.dark-mode h2, body.dark-mode p {
-    color: white;
-    font-family: "Lemon", serif;
-    text-align: center;
+    color: var(--main-dark-text-color);
 }
 
-
-/* ====== LIGHT MODE ====== */
-body.light-mode h1, body.light-mode h2, body.light-mode p {
-    color: black;
-    font-family: "Lemon", serif;
-    text-align: center;
+body.dark-mode #box{
+    background: var(--main-dark-other-color);
 }
 
 
-/* ====== OTHER ====== */
+/* ====== LIGHT MODE ====== */
 
+body.light-mode h1, body.light-mode h2, body.light-mode p {
+    color: var(--main-light-text-color);
+}
 
+body.light-mode #box{
+    background: var(--main-light-other-color);
+}
 
+/* ====== ECRAN DEFAULT ====== */
 
-#form {
-    width: 80%;
-    height: 83%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+h1, h2{
+    font-family: "Lemon", serif;
+    text-align: center;
 }
 
-body.dark-mode #box {
-    background-color: #1b0048;
-    padding: 20px;
-    width: 50%;
+#box {
+    display: flex;
+    flex-direction: column;
+    height: 60vh;
+    width: 60vw;
     margin: auto;
-    border-radius: 15px;
-    border: 1px solid #6100ff;
+    padding: 2%;
+    border-radius: 25px;
 }
 
 
diff --git a/src/Controleur/FrontControler.php b/src/Controleur/FrontControler.php
index ab3cb62..e38d0c8 100644
--- a/src/Controleur/FrontControler.php
+++ b/src/Controleur/FrontControler.php
@@ -16,7 +16,7 @@ Class FrontControler{
         global $twig,$racine;
 
         $this->listAction = ['visitor' => array('accueil','search','quote','login','signin','validlogin','validsignin'),
-                             'user' => array('quiz','commentary','logout','addComment','favorite','profil','addFav','supFav','changedata', 'submit', 'validsubmit'),
+                             'user' => array('quiz','commentary','logout','addComment','favorite','profil','addFav','supFav','changedata', 'submit', 'validsubmit', 'add'),
                              'admin' => array('null')];
 
         $dVueEreur = [];
@@ -53,6 +53,7 @@ Class FrontControler{
         $router->map('GET|POST', '/changedata', 'UserControler','changedata');
         $router->map('GET|POST', '/submit', 'UserControler', 'submit');
         $router->map('GET|POST', '/validsubmit', 'UserControler', 'validsubmit');
+        $router->map('GET|POST', '/add', 'UserControler', 'add');
 
 
         $match = $router->match();
diff --git a/src/Controleur/UserControler.php b/src/Controleur/UserControler.php
index 546840d..2c437e9 100644
--- a/src/Controleur/UserControler.php
+++ b/src/Controleur/UserControler.php
@@ -28,6 +28,8 @@ class UserControler {
     private UserModel $uMod;
     private QuoteModel $qMod;
     private QuestionModel $mdl;
+    private CharacterModel $caMod;
+    private SourceModel $srcMod;
 
     public function __construct() {
         global $co;
@@ -35,6 +37,8 @@ class UserControler {
         $this->uMod = new UserModel(new UserGateway($co));
         $this->qMod = new QuoteModel(new QuoteGateway($co));
         $this -> mdl = new QuestionModel(new QuestionGateway($co));
+        $this -> caMod = new CharacterModel(new CharacterGateway($co));
+        $this->srcMod = new SourceModel(new SourceGateway($co));
     }
     
     public function profil() {
@@ -121,6 +125,7 @@ class UserControler {
         if ($_SESSION['no_question'] >= $total_questions) {
             $_SESSION['no_question'] = 0;
             $this->endQuiz($id_quiz, $score);
+            $_SESSION['score'] = 0;
         }
         else header("Location: ".$racine."/quiz/$id_quiz"); ///~kekentin/WF/WF-Website
 
@@ -167,7 +172,6 @@ class UserControler {
             $answer = explode('-', $answerd)[0];
             $id = (int) explode('-', $answerd)[1];
         }
-
         $res = $this->mdl->getQuestion($id);
         return $answer == $res->getCanswer();
     }
@@ -320,6 +324,8 @@ class UserControler {
     public function submit() : void
     {
         global $vues;
+        $p = $this->caMod->getAllPerso();
+        $s = $this->srcMod->getAllSources();
         require_once $vues['submitQuote'];
     }
 
@@ -335,7 +341,7 @@ class UserControler {
         {
             $content = $_POST['content'] ?? null;
             $character = $_POST['character'] ?? null;
-            $source  = $_POST['source'] ?? null;
+            $source  = $_POST['src'] ?? null;
             //$img = $_POST['img'] ?? null;
 
             $errors = [null, null];
@@ -343,12 +349,12 @@ class UserControler {
             $gw = new CharacterGateway($co);
             $mdl = new CharacterModel($gw);
 
-            $character = $mdl -> getCharacterByName($character);
+            $character = $mdl -> getCharacterById($character);
 
             $gw = new SourceGateway($co);
             $mdl = new SourceModel($gw);
 
-            $source = $mdl -> getSourceByTitle($source);
+            $source = $mdl -> getSourceById($source);
 
             if (!$character)
                 $errors[0] = "Personnage inexistant";
@@ -357,16 +363,16 @@ class UserControler {
             if ($errors[0] || $errors[1])
             {
                 global $twig;
-                echo $twig->render("submitQuote.html.twig", ['errors' => $errors]);
+                $this->submit();
                 exit();
             }
 
             $gw = new QuoteGateway($co);
             $mdl = new QuoteModel($gw);
 
-            $mdl -> insert4User($content, '/imgPath', 'fr', $this -> getIdOfUser(), $source->getIdSource(), $character->getIdCharacter());
+            //$mdl -> insert4User($content, '/imgPath', 'fr', $this -> getIdOfUser(), $source->getIdSource(), $character->getIdCharacter());
 
-            return [$content, $_POST['character'], $_POST['source']];
+            return [$content, $_POST['character'], $_POST['src']];
         }
         return null;
     }
@@ -378,7 +384,29 @@ class UserControler {
      */
     public function validsubmit() : void
     {
-        $recap = $this -> toSubmit();
+        if($_POST['src'] == 'other' && $_POST['character'] == 'other'){
+            global $vues;
+            $src = true;
+            $char = true;
+            require_once $vues['create'];
+            exit();
+        }
+        elseif($_POST['src'] == 'other'){
+            global $vues;
+            $src = true;
+            $char = false;
+            require_once $vues['create'];
+            exit();
+        }
+        elseif($_POST['character'] == 'other'){
+            global $vues;
+            $src = false;
+            $char = true;
+            require_once $vues['create'];
+            exit();
+        }
+        if($_POST)
+            $recap = $this -> toSubmit();
         if ($recap)
         {
             $this -> recapSubmitQuote($recap);
@@ -412,4 +440,70 @@ class UserControler {
         }
         return null;
     }
+
+    public function add(){
+        global $vues;
+        var_dump($_POST);
+        $error = [];
+        if($_POST['req'] == "both"){
+            $src = true;
+            $char = true;
+        }
+        elseif($_POST['req'] == "src"){
+            $src = true;
+            $char = false;
+            $type = array("Movie","Serie","VideoGame","Anime");
+            if(Verification::verifNotNull($_POST["titre"])){
+                $_POST["titre"] = Verification::verifChar($_POST["titre"]);
+                if($this->srcMod->existSource($_POST["titre"],$_POST["type"])){
+                    $error[] = "La source existe déja";
+                }
+            }
+            else{
+                $error[] = "Le titre doit être définit";
+            }
+            if(Verification::verifNotNull($_POST["date"])){
+                $src = true;
+                $char = false;
+                $_POST["date"] = Verification::verifChar($_POST["date"]);
+                if(intval($_POST["date"],10) < 1850 or intval($_POST["date"],10) > date( "Y", time() )){
+                    $error[] = "La date est invalide";
+                }
+            }
+            else{
+                $error[] = "La date doit être définit";
+            }
+            if(Verification::verifNotNull($_POST["type"])){
+                $_POST["type"] = Verification::verifChar($_POST["type"]);
+                if(!in_array($_POST["type"],$type)){
+                    $error[] = "Le type indiquer est inexistant";
+                }
+            }
+            else{
+                $error[] = "Le type doit être définit";
+            }
+        }
+        elseif($_POST['req'] == "char"){
+            $src = false;
+            $char = true;
+            if(Verification::verifNotNull($_POST[""])){
+            
+            }
+        }
+        if($error == []){
+            if($_POST['req'] == "both"){
+
+            }
+            elseif($_POST['req'] == "src"){
+                $this->srcMod->createSource($_POST["titre"], $_POST["date"], $_POST["type"]);
+            }
+            elseif($_POST['req'] == "char"){
+
+            }
+        }
+        else{
+            require_once($vues["create"]);
+            var_dump($error);
+        }
+    }
 }
diff --git a/src/Entity/characterEntity.php b/src/Entity/CharacterEntity.php
similarity index 100%
rename from src/Entity/characterEntity.php
rename to src/Entity/CharacterEntity.php
diff --git a/src/Entity/CommentaryEntity.php b/src/Entity/CommentaryEntity.php
index eb8eb8f..b6f6528 100644
--- a/src/Entity/CommentaryEntity.php
+++ b/src/Entity/CommentaryEntity.php
@@ -7,18 +7,20 @@ class CommentaryEntity {
     private string $comment;
     private string $date;
     private string $user;
+    private string $img;
 
     /**
      * @param int $id_comment
      * @param string $comment
      * @param string $date
      */
-    public function __construct(int $id_comment, string $comment, string $date, string $user)
+    public function __construct(int $id_comment, string $comment, string $date, string $user, string $img)
     {
         $this->id_comment = $id_comment;
         $this->comment = $comment;
         $this->date = $date;
         $this->user = $user;
+        $this->img = $img;
     }
 
     /**
@@ -85,6 +87,21 @@ class CommentaryEntity {
         $this->user = $user;
     }
 
+    /**
+     * @return string $img
+     */
+    public function getImg(): string
+    {
+        return $this->img;
+    }
 
+    /**
+     * @param string $img
+     */
+    public function setImg(int $img): void
+    {
+        $this->img = $img;
+    }
+    
 }
 ?>
\ No newline at end of file
diff --git a/src/Enum/TypeSourceEnum.php b/src/Enum/TypeSourceEnum.php
index dbc5bfa..4a20ac1 100644
--- a/src/Enum/TypeSourceEnum.php
+++ b/src/Enum/TypeSourceEnum.php
@@ -5,5 +5,5 @@ enum TypeSourceEnum : string {
     case Movie = 'movie';
     case VideoGame = 'video-game';
     case Anime = 'anime';
-    case TV = 'tv';
+    case Serie = 'serie';
 }
\ No newline at end of file
diff --git a/src/Gateway/CharacterGateway.php b/src/Gateway/CharacterGateway.php
index f09cbc1..9d4c1b7 100644
--- a/src/Gateway/CharacterGateway.php
+++ b/src/Gateway/CharacterGateway.php
@@ -39,7 +39,7 @@ class CharacterGateway extends Gateway
 
     public function findAll() : array
     {
-        $query = "SELECT * FROM caracter";
+        $query = "SELECT * FROM caracter ORDER BY caracter ASC";
         $this -> co -> executeQuery($query);
         return $this -> co -> getResults();
     }
diff --git a/src/Gateway/CommentaryGateway.php b/src/Gateway/CommentaryGateway.php
index 0885ec1..5400543 100644
--- a/src/Gateway/CommentaryGateway.php
+++ b/src/Gateway/CommentaryGateway.php
@@ -8,9 +8,13 @@ class CommentaryGateway  extends Gateway{
         $query = "Select id_comment from Commentary;";
         $this -> co -> executeQuery($query);
         $res = $this -> co -> getResults();
+        $tab = null;
         foreach($res as $r){
             $tab[] = $r["id_comment"];
         }
+        if($tab == null){
+            return 1;
+        }
         $id=1;
         while(in_array($id,$tab)){$id=$id+1;}
         return $id;
@@ -37,7 +41,7 @@ class CommentaryGateway  extends Gateway{
     }
 
     public function findByQuote(int $id) : array{
-        $query="SELECT c.id_comment, c.dateC, c.comment, u.username FROM Commentary c JOIN Users u ON u.id_user = c.users WHERE quote = :idQuote ORDER BY c.datec DESC";
+        $query="SELECT c.id_comment, c.dateC, c.comment, u.username, i.imgPath FROM Commentary c JOIN Users u ON u.id_user = c.users JOIN Image i ON i.id_img = u.img WHERE quote = :idQuote ORDER BY c.datec DESC";
         $this -> co -> executeQuery($query, array("idQuote" => array($id,PDO::PARAM_STR)));
         return $res = $this -> co -> getResults();
     }
diff --git a/src/Gateway/SourceGateway.php b/src/Gateway/SourceGateway.php
index ed540b3..402d30b 100644
--- a/src/Gateway/SourceGateway.php
+++ b/src/Gateway/SourceGateway.php
@@ -16,7 +16,7 @@ class SourceGateway extends Gateway{
         return $this -> co -> executeQuery($query, [
             "title" => array($s->getTitle(), PDO::PARAM_STR),
             "date" => array($s->getDate(), PDO::PARAM_STR),
-            "type" => array($s->getType(), PDO::PARAM_STR)
+            #"type" => array($s->getType(), PDO::PARAM_STR)
         ]);
     }
 
@@ -24,24 +24,15 @@ class SourceGateway extends Gateway{
     {
         $query = "SELECT * FROM Source WHERE id_source = :id";
 
-        $this -> co -> executeQuery($query, array("id_source" => array($id, PDO::PARAM_INT)));
+        $this -> co -> executeQuery($query, array("id" => array($id, PDO::PARAM_INT)));
         return $res = $this -> co -> getResults();
     }
 
     public function findByTitle(string $t) : array
     {
         $query = "SELECT * FROM Source WHERE title = :t";
-
         $this -> co -> executeQuery($query, ["t" => array($t, PDO::PARAM_STR)]);
         return $res = $this -> co -> getResults();
-
-        // if ($res)
-        //     return new sourceEntity(
-        //         $res["id_source"],
-        //         $res["title"],
-        //         $res["date"]
-        //     );
-        // return null;
     }
 
     public function findByDate(string $d) : array
@@ -64,22 +55,9 @@ class SourceGateway extends Gateway{
 
     public function findAll() : array
     {
-        $query = "SELECT * FROM Source";
-
+        $query = "SELECT * FROM Source ORDER BY title ASC";
         $this -> co -> executeQuery($query);
-        $res = $this -> co -> getResults();
-
-        $sources = [];
-
-        foreach ($res as $source) {
-            $sources[] = new sourceEntity(
-                $source["id_source"],
-                $source["title"],
-                $source["date"],
-                TypeSourceEnum::Movie//$res["source"]
-            );
-        }
-        return $sources;
+        return $this -> co -> getResults();
     }
 
     public function delete(int $id) : bool
diff --git a/src/Model/CharacterModel.php b/src/Model/CharacterModel.php
index fa1e074..5259c60 100644
--- a/src/Model/CharacterModel.php
+++ b/src/Model/CharacterModel.php
@@ -19,11 +19,23 @@ class CharacterModel extends Model
         $c = $this -> gateway -> findById($id_character);
         if ($c)
             return new CharacterEntity(
+                $c[0]['id_caracter'],
+                $c[0]['caracter'],
+                $c[0]['id_img']
+            );
+        return null;
+    }
+
+    public function getAllPerso() :array{
+        $res = $this->gateway->findAll();
+        foreach($res as $c){
+            $charac[] = new CharacterEntity(
                 $c['id_caracter'],
                 $c['caracter'],
                 $c['id_img']
             );
-        return null;
+        }
+        return $charac;
     }
 
     public function getCharacterByName(string $name) : ?CharacterEntity
diff --git a/src/Model/CommentaryModel.php b/src/Model/CommentaryModel.php
index 0e947e9..c5e5a68 100644
--- a/src/Model/CommentaryModel.php
+++ b/src/Model/CommentaryModel.php
@@ -14,7 +14,7 @@ class CommentaryModel extends Model {
         $com = [];
         $res = $this->gateway->findByQuote($id);
         foreach ($res as $comments){
-            $com[] = new CommentaryEntity($comments["id_comment"], $comments["comment"], $comments["datec"], $comments["username"]);
+            $com[] = new CommentaryEntity($comments["id_comment"], $comments["comment"], $comments["datec"], $comments["username"], $comments["imgpath"]);
         }
         return $com;
     }
diff --git a/src/Model/sourceModel.php b/src/Model/SourceModel.php
similarity index 87%
rename from src/Model/sourceModel.php
rename to src/Model/SourceModel.php
index baf1c37..d43579b 100644
--- a/src/Model/sourceModel.php
+++ b/src/Model/SourceModel.php
@@ -76,11 +76,12 @@ class SourceModel extends Model
         $res =  $this -> gateway -> findAll();
         $src = [];
         foreach ($res as $sources) {
-            $src[] = new sourceEntity(
+            $src[] = new SourceEntity(
                 $sources["id_source"],
                 $sources["title"],
                 $sources["dates"],
-                TypeSourceEnum::from($sources["type"])
+                TypeSourceEnum::Movie
+                //TypeSourceEnum::from($sources["type"])
             );
         }
         return $src;
@@ -103,5 +104,9 @@ class SourceModel extends Model
         return false;
     }
 
+    public function existSource(string $name, string $type) : bool{
+        $q = $this -> getSourceByTitle($name);
+        return isset($q[0]);
+    }
 }
 
diff --git a/src/Verification/Verification.php b/src/Verification/Verification.php
index a849265..eef98ab 100644
--- a/src/Verification/Verification.php
+++ b/src/Verification/Verification.php
@@ -38,6 +38,10 @@ namespace Verification;
             }
             return $tabText;
         }
+
+        public static function verifNotNull($val) :bool{
+            return empty($var);
+        }
         
     }
 
diff --git a/vue/create.php b/vue/create.php
new file mode 100644
index 0000000..e0a16eb
--- /dev/null
+++ b/vue/create.php
@@ -0,0 +1,19 @@
+<?php
+global $twig;
+
+
+echo $twig->render('head.html.twig', [
+    'title' => "Quiz",
+    'style' => "public/styles/styleCreate.css",
+    'scripts' => array("public/script/theme-toggle.js")
+]);
+
+
+// Rendu du bandeau
+echo $twig->render('bandeau.html.twig');
+
+echo $twig->render('create.html.twig', [
+    'src' => $src,
+    'char' => $char
+]);
+?>
diff --git a/vue/submitQuote.php b/vue/submitQuote.php
index f36cb2c..f4d6595 100644
--- a/vue/submitQuote.php
+++ b/vue/submitQuote.php
@@ -12,7 +12,11 @@ echo $twig->render('head.html.twig', [
 // Rendu du bandeau
 echo $twig->render('bandeau.html.twig');
 
-echo $twig -> render("submitQuote.html.twig");
+echo $twig -> render("submitQuote.html.twig", array(
+    'valuesPerso' => $p,
+    'valuesSource' => $s,
+    'errors' => $errors ?? [],
+));
 ?>
 
 
diff --git a/vue/templates/bandeau.html.twig b/vue/templates/bandeau.html.twig
index b4997d5..72b8f7a 100644
--- a/vue/templates/bandeau.html.twig
+++ b/vue/templates/bandeau.html.twig
@@ -1,16 +1,16 @@
 <div class="header">
     <div class="nav">
         <a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
-        <img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
+        <img class='theme-icon' id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
         <a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
  
     </div>
     <div class="logo">
-        <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
+            <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
     </div>
 
     <div class="user">
         <a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search"  onmousedown="return false"></a>
-        <a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
+        <a class="iconUser" href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
     </div>
 </div>
\ No newline at end of file
diff --git a/vue/templates/create.html.twig b/vue/templates/create.html.twig
new file mode 100644
index 0000000..4eae2d1
--- /dev/null
+++ b/vue/templates/create.html.twig
@@ -0,0 +1,43 @@
+<div class="creation">
+    <form class="add" method="post" action="{{racine}}/add">
+        {% if src == true and char == true %}
+            <input type="hidden" id="req" name="req" value="both"/>
+        {% elseif src == true %}
+            <input type="hidden" id="req" name="req" value="src"/>
+        {% elseif char == true %}
+            <input type="hidden" id="req" name="req" value="src"/>
+        {% endif %}
+        {% if src == true %}
+            <h1>Source</h1>
+            <label for="titre">Titre de la source *</label>
+                <input type="text" class="champ" id="titre" name="titre" placeholder="Titre de la source" required/>
+            <label for="date">Année de sortie *</label>
+                <input type="number" id="date" name="date" min="1850" max="{{ "now"|date("Y") }}" required>
+            <label for="type">Type de source *</label>
+
+                <input type="radio" id="movie" name="type" value="Movie" checked>
+                <label for="movie">Film</label><br>
+
+                <input type="radio" id="serie" name="type" value="Serie">
+                <label for="serie">Serie</label>
+
+                <input type="radio" id="vg" name="type" value="VideoGame">
+                <label for="vg">Jeu Vidéo</label><br>
+
+                <input type="radio" id="anime" name="type" value="Anime">
+                <label for="anime">Anime</label>
+
+        {% endif %}
+        {% if char == true %}
+            <h1>Personnage</h1>
+            <label for="name">Nom de personnage *</label>
+                <input type="text" class="champ" id="name" name="name" placeholder="Nom du personnage" required/>
+
+            <label for="name">Image du personnage *</label>
+                <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" required/>
+            
+        {% endif %}
+        <input type="submit" class="btn" value="Soumettre"/>
+    </form>
+<body>
+<html>
\ No newline at end of file
diff --git a/vue/templates/profil.html.twig b/vue/templates/profil.html.twig
index dd641ac..ae4a1ee 100644
--- a/vue/templates/profil.html.twig
+++ b/vue/templates/profil.html.twig
@@ -3,8 +3,7 @@
         <h1>▶ Profil ◀</h1>
 
         <form method="post" action="{{ racine }}/changedata">
-            <img src="{{ srcImg }}" class="imageProfil" onmousedown="return false"/>
-            <button name="image" class="saveButtonPasswd" value="1" type="Submit">Changer l'image de profil</button>
+            <button name="image" class="ChangeImg" value="1" type="Submit"><img src="{{ srcImg }}" class="imageProfil" onmousedown="return false"/></button>
 
             {% if error_message is defined and error_message is not empty %}
                 <p style="color: red">{{ error_message }}</p>
@@ -18,7 +17,7 @@
             <p class="infoProfil" name="mdp" id="passwd"> <strong>Votre mot de passe</strong><img class='imgModify' src='{{ racine }}/images/modify.svg' onclick="editFieldPassWd('passwd')"/></p>
 
 
-
+            
             <div class="languageDiv">
                 <p class="languageTitle">Language :</p>
             </div>
@@ -27,7 +26,7 @@
         </form>
 
             <div class="createQuote">
-                <a href="{{racine}}/submit" class="createQuote">Ajouter une citation</a>
+                <a {#href="{{racine}}/submit"#} class="createQuote">Ajouter une citation</a>
             </div>
             
 
diff --git a/vue/templates/quote.html.twig b/vue/templates/quote.html.twig
index 276b83c..ffc43f9 100644
--- a/vue/templates/quote.html.twig
+++ b/vue/templates/quote.html.twig
@@ -9,9 +9,9 @@
 
             <div class="icons">
                 {% if fav == false %}
-                    <div class="like-icon"><a class="likeLien" href="{{racine}}/addFav/{{idQuote}}">♡</a></div>
+                    <div class="like-icon-none"><a class="likeLien" href="{{racine}}/addFav/{{idQuote}}"><img src="../images/Vector.png" alt="coeur vide"></a></div>
                 {% else %}
-                    <div class="like-icon"><a class="likeLien" href="{{racine}}/supFav/{{idQuote}}">❤️</a></div>
+                    <div class="like-icon"><a class="likeLien" href="{{racine}}/supFav/{{idQuote}}"><img src="../images/VectorCoeur.png" alt="coeur plein"></a></div>
                 {% endif %}
                 <div class="share-icon" onclick="copyCurrentUrl()">🔗</div>
             </div>
@@ -44,9 +44,12 @@
             {% for c in com %}
                 <div class="com">
                     <div class="infCom">
+                        <div class="imgIcones">
+                            <img class="avatar" src="{{c.img}}" alt="avatar">
                         <strong class="userName">
                             {{c.user}}
                         </strong>
+                        </div>
                         <div class="date">
                             {{ c.date }}
                         </div>
diff --git a/vue/templates/submitQuote.html.twig b/vue/templates/submitQuote.html.twig
index e0df0c2..d2882fc 100644
--- a/vue/templates/submitQuote.html.twig
+++ b/vue/templates/submitQuote.html.twig
@@ -1,38 +1,51 @@
-<h1>▶ Submit a Quote ◀</h1>
+<h1>Ajouter une citation</h1>
 
-<form id="form" method="post" action="/validsubmit">
+<form id="form" method="post" action="{{racine}}/validsubmit">
 
     <div id="box">
 
-        <div id="contentField">
+        <div class="part">
 
-            <p>Contenu *</p>
-            <input type="text" id="content" name="content" placeholder="Entrez le contenu de la citation" required/>
-        </div>
+            <div id="characterField">
 
-        <div id="characterField">
+                <div id="sourceField">
+                    <p>Source *</p>
+                <select name="src" id="src">
+                    <option value="">--Selectionner une source--</option>
+                    {% for val in valuesSource %}
+                        <option value="{{val.getIdSource()}}">{{val.title}}</option>
+                    {% endfor %}
+                     <option value="other">Autre</option>
+                </select>
 
-            <p>Personnage *</p>
-            <input type="text" id="character" name="character" placeholder="Entrez le/la personnage de la citation" required/>
-            {% if errors[0] is defined and errors[0] is not empty %}
-                <p style="color: red">{{ errors[0] }}</p>
-            {% endif %}
+                {% if errors[1] is defined and errors[1] is not empty %}
+                    <p style="color: red">{{ errors[1] }}</p>
+                {% endif %}
+                </div>
 
-        </div>
+                <p>Personnage *</p>
+                <select name="character" id="character">
+                    <option value="">--Selectionner un personnage--</option>
+                    {% for val in valuesPerso %}
+                        <option value="{{val.getIdCharacter()}}">{{val.name}}</option>
+                    {% endfor %}
+                     <option value="other">Autre</option>
+                </select>
 
-        <div id="sourceField">
+                {% if errors[0] is defined and errors[0] is not empty %}
+                    <p style="color: red">{{ errors[0] }}</p>
+                {% endif %}
 
-            <p>Source *</p>
-            <input type="text" id="source" name="source" placeholder="Entrez la source de la citation" required/>
-            {% if errors[1] is defined and errors[1] is not empty %}
-                <p style="color: red">{{ errors[1] }}</p>
-            {% endif %}
+            </div>
 
         </div>
+        <div class="part">
 
-        <div id="imageField">
-
-            <p>Image *</p>
+            <div id="contentField">
+                <p>Contenu *</p>
+                <textarea id="content" name="content" rows="5" cols="50" required>Ecrire une citation ...
+                </textarea>
+            </div>
 
         </div>