diff --git a/index.php b/index.php
index b625fbe..20ae47d 100644
--- a/index.php
+++ b/index.php
@@ -24,7 +24,7 @@ $twig   = new \Twig\Environment($loader, [
     'cache' => false,
 ]);
 
-$twig->addGlobal('racine','/~lebeaulato/WF-Website'); // /~kekentin/WF/WF-Website
+$twig->addGlobal('racine','/~kemondejar/WF-Website'); // /~kekentin/WF/WF-Website
 
 
 $cont = new Controleur\FrontControler($co);
diff --git a/public/styles/styleQuote.css b/public/styles/styleQuote.css
index 3b9c192..f9d5985 100644
--- a/public/styles/styleQuote.css
+++ b/public/styles/styleQuote.css
@@ -2,12 +2,8 @@
 
 /* ====== DARK MODE ====== */
 body.dark-mode .card {
-    position: relative;
+    /* position: relative; */
     background-color: black;
-    border-radius: 15px;
-    width: 60%;
-    display: flex;
-    margin-left: 5%;
     border: 2px solid transparent;
 }
 
@@ -20,38 +16,34 @@ body.dark-mode .card-content {
 
 
 body.dark-mode .likes {
-    margin-left: 85%;
     font-size: 20px;
     color: #fff;
 }
 
 body.dark-mode .like-icon {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 35px;
     color: #fff;
     cursor: pointer;
 }
 
 body.dark-mode .share-icon {
-    position: absolute;
-    top: 70px;
-    right: 10px;
-    font-size: 35px;
     color: #fff;
     cursor: pointer;
 }
 
+body.dark-mode .commentaire{
+    background-color: black;
+    border: 2px solid transparent;
+}
+
+body.dark-mode .likeLien{
+    color:white;
+}
+
 /* ====== LIGHT MODE ====== */
 
 body.light-mode .card {
-    position: relative;
+    /* position: relative; */
     background-color: white;
-    border-radius: 15px;
-    width: 60%;
-    display: flex;
-    margin-left: 5%;
     border: 2px solid black;
 }
 
@@ -63,48 +55,169 @@ body.light-mode .card-content {
 
 
 body.light-mode .likes {
-    margin-left: 85%;
     font-size: 20px;
     color: black;
 }
 
 body.light-mode .like-icon {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 35px;
     color: black;
     cursor: pointer;
 }
 
 body.light-mode .share-icon {
-    position: absolute;
-    top: 70px;
-    right: 10px;
-    font-size: 35px;
     color: black;
     cursor: pointer;
 }
 
+body.light-mode .commentaire{
+    background-color: #fff;
+    border: 2px solid black;
+}
+
+body.light-mode .likeLien{
+    color:black;
+}
+
 /* ====== DEFAULT ====== */
+
+.central_container{
+    display: flex;
+    justify-content: space-around;
+}
+
+.card {
+    margin-top: 5vh;
+    border-radius: 15px;
+    width: 70vw;
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.commentaire{
+    margin-top: 5vh;
+    border-radius: 15px;
+    width: 25vw;
+    height: 70vh;
+    display: flex;
+    padding: 1%;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
 .infoQuote {
     list-style: none;
     font-size: 25px;
     line-height: 40px;
-    margin-top: 35%;
-    margin-left: -45%;
-    margin-bottom: 20px;
 }
 .card-image {
     border-radius: 10px;
-    width: 310px;
-    height: 270px;
+    width: 20vw;
+    height: 35vh;
+    object-fit: cover;
 }
 
 .quote {
-    margin-top: 10px;
+    margin-top: 2vh;
     font-size: 35px;
     font-weight: bold;
     font-style: italic;
-    margin-bottom: 15px;
+}
+
+.comAdd{
+    width : 20vw;
+    height : 4vh;
+    padding-left: 1vh;
+    border: none;
+    border-radius: 20px;
+}
+
+.btn{
+    width : 2vw;
+    height : 4vh;
+    padding-left: 1vh;
+    border: none;
+    border-radius: 20px;
+    text-align: center;
+}
+
+.formulaire{
+    display : flex;
+    flex-direction: row;
+}
+
+.comment_section{
+    margin-top: 2vh;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    height: 55vh;
+}
+
+.com{
+    background-color: #fff;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    margin-top: 1vh;
+    margin-bottom: 1vh;
+    border-radius: 20px;
+    padding : 2%;
+}
+
+.date{
+    margin-bottom: 0.5vh;
+    font-size: small;
+}
+
+.icons{
+    margin: 2vh;
+}
+
+.like-icon{
+    font-size: 50px;
+    margin-bottom: 2vh;
+}
+
+.share-icon{
+    font-size: 50px;
+}
+
+.part1{
+    display: flex;
+}
+
+.part2{
+    display: flex;
+    justify-content: space-between;
+}
+
+.likes{
+    align-self: self-end;
+    padding: 2vh;
+}
+
+.infoQuote{
+    margin: 2vh;
+    height: 31vh;
+}
+
+.userName{
+    font-size: large;
+    display: inline-block;
+}
+
+.infCom{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1vh;
+}
+
+.comAdd :focus {
+    outline: none; /* Supprime la bordure bleue */
+    box-shadow: none; /* Supprime également toute ombre ajoutée */
+}
+
+.likeLien{
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/src/Controleur/FrontControler.php b/src/Controleur/FrontControler.php
index b4cddcd..1c9b8a9 100644
--- a/src/Controleur/FrontControler.php
+++ b/src/Controleur/FrontControler.php
@@ -13,13 +13,13 @@ Class FrontControler{
         global $twig;
 
         $this->listAction = ['visitor' => array('accueil','search','quote','login','signin','validlogin','validsignin'),
-                             'user' => array('quiz','commentary','logout','addComment','favorite','profil'),
+                             'user' => array('quiz','commentary','logout','addComment','favorite','profil','addFav','/supFav'),
                              'admin' => array('null')];
 
         $dVueEreur = [];
 
         $router = new \AltoRouter();
-        $router->setBasePath('/~lebeaulato/WF-Website'); ///~kekentin/WF/WF-Website
+        $router->setBasePath('/~kemondejar/WF-Website'); ///~kekentin/WF/WF-Website
 
         $router->map('GET', '/', 'VisitorControler','accueil');
 
@@ -44,6 +44,8 @@ Class FrontControler{
         $router->map('GET|POST', '/signin', 'VisitorControler','signin');
         $router->map('GET|POST', '/validlogin', 'VisitorControler','validlogin');
         $router->map('GET|POST', '/validsignin', 'VisitorControler','validsignin');
+        $router->map('GET|POST', '/addFav/[i:id]', 'UserControler','addFav');
+        $router->map('GET|POST', '/supFav/[i:id]', 'UserControler','supFav');
 
 
         $match = $router->match();
diff --git a/src/Controleur/UserControler.php b/src/Controleur/UserControler.php
index 6eb68ec..ca4a3fe 100644
--- a/src/Controleur/UserControler.php
+++ b/src/Controleur/UserControler.php
@@ -191,4 +191,17 @@ class UserControler {
         $mdl = new QuizModel($gw);
         return $mdl->getQuiz($id)->getNbQuestions();
     }
+
+    public function addFav(array $arg){
+        $id= $arg['id'] ?? 1;
+        $this->uMod->addFavorite($_SESSION["user"],$id);
+        header("Location: /~lebeaulato/WF-Website/quote/$id");
+        
+    }
+
+    public function supFav(array $arg){
+        $id= $arg['id'] ?? 1;
+        $this->uMod->supFavorite($_SESSION["user"],$id);
+        header("Location: /~lebeaulato/WF-Website/quote/$id");
+    }
 }
diff --git a/src/Controleur/VisitorControler.php b/src/Controleur/VisitorControler.php
index fea371b..1167483 100644
--- a/src/Controleur/VisitorControler.php
+++ b/src/Controleur/VisitorControler.php
@@ -22,7 +22,7 @@ Class VisitorControler {
     
     private UserGateway $gw;
 
-    private UserModel $mdl;
+    private UserModel $uMod;
 
     private array $errors;
 
@@ -36,8 +36,7 @@ Class VisitorControler {
         $this->qMod = new QuoteModel(new QuoteGateway($co));
         $this->cMod = new CommentaryModel(new CommentaryGateway($co));
         $this->sMod = new SearchModel(new QuoteGateway($co));
-        $this->gw = new UserGateway($co);
-        $this->mdl = new UserModel($this->gw);
+        $this->uMod = new UserModel(new UserGateway($co));
     }
 
     public function accueil(){
@@ -54,6 +53,7 @@ Class VisitorControler {
     public function quote(array $arg){
         global $vues;
         $id= $arg['idQuote'] ?? 1;
+        $f = $this->uMod->isFavorite($_SESSION["user"],$id);
         $q = $this->qMod->searchId($id);
         $c = $this->cMod->getComment($id);
         require_once $vues['quote'];
@@ -117,7 +117,7 @@ Class VisitorControler {
             $pseudo = $_POST['pseudo'] ?? null;
             $mdp = $_POST['mdp'] ?? null;
 
-            $user = $this -> mdl -> getUsername($pseudo);
+            $user = $this -> uMod -> getUsername($pseudo);
 
             if ($user)
             {
@@ -169,8 +169,8 @@ Class VisitorControler {
             $option = ['cost' => 12];
             $hmdp = password_hash($mdp, PASSWORD_BCRYPT, $option);
 
-            $isUserAlreadyUsed = $this -> mdl -> getUsername($pseudo);
-            $isEmailAlreadyUsed = $this -> mdl -> getEmail($email);
+            $isUserAlreadyUsed = $this -> uMod -> getUsername($pseudo);
+            $isEmailAlreadyUsed = $this -> uMod -> getEmail($email);
 
             if ($isUserAlreadyUsed and !$isEmailAlreadyUsed)  {
                 $errors[0] = "Pseudo déjà utilisé";
@@ -188,7 +188,7 @@ Class VisitorControler {
                 require_once $vues['signin'];   
                 exit();
             }
-            else echo $this->mdl->insertUser($pseudo, $email, $hmdp);
+            else echo $this->uMod->insertUser($pseudo, $email, $hmdp);
 
             $_SESSION["role"] = 'user';
             $_SESSION["user"] = $pseudo;
diff --git a/src/Entity/CommentaryEntity.php b/src/Entity/CommentaryEntity.php
index eec3c18..eb8eb8f 100644
--- a/src/Entity/CommentaryEntity.php
+++ b/src/Entity/CommentaryEntity.php
@@ -13,11 +13,12 @@ class CommentaryEntity {
      * @param string $comment
      * @param string $date
      */
-    public function __construct(int $id_comment, string $comment, string $date)
+    public function __construct(int $id_comment, string $comment, string $date, string $user)
     {
         $this->id_comment = $id_comment;
         $this->comment = $comment;
         $this->date = $date;
+        $this->user = $user;
     }
 
     /**
diff --git a/src/Gateway/UserGateway.php b/src/Gateway/UserGateway.php
index e6362b2..fe31192 100644
--- a/src/Gateway/UserGateway.php
+++ b/src/Gateway/UserGateway.php
@@ -137,5 +137,21 @@ Class UserGateway extends Gateway{
         return $result;
     }
 
+    public function inFavorite(string $username, int $idq):bool{
+        $query = 'SELECT count(*) FROM Favorite f JOIN Users u ON f.users = u.id_user WHERE u.username = :user AND f.quote = :id';
+        $this->co->executeQuery($query, array(':user'=>array($username, PDO::PARAM_STR),':id'=>array($idq, PDO::PARAM_INT)));
+        $result = $this->co->getResults();
+        return !isset($result);
+    }
+
+    public function addFavorite(string $username, int $id){
+        $query = 'INSERT INTO Favortie VALUE ((SELECT id_user FROM User WHERE Username = :username), :id)';
+        $this->co->executeQuery($query, array(':username' => array($username,PDO::PARAM_STR), ':id' => array($id,PDO::PARAM_INT)));
+    }
+
+    public function supFavorite(string $username, int $id){
+        $query = 'DELETE FROM Favortie VALUE WHERE quote = :id ,user = (SELECT id_user FROM User WHERE Username = :username)';
+        $this->co->executeQuery($query, array(':username' => array($username,PDO::PARAM_STR), ':id' => array($id,PDO::PARAM_INT)));
+    }
 }
 ?>
diff --git a/src/Model/UserModel.php b/src/Model/UserModel.php
index 40b6eca..a976f56 100644
--- a/src/Model/UserModel.php
+++ b/src/Model/UserModel.php
@@ -108,6 +108,24 @@
             $res = $this->gateway->getIdUser($username);
             return $res[0]['id_user'];
         }
+
+        public function isFavorite(string $username, int $idq): bool {
+            if($_SESSION["user"] == null){
+                return false;
+            }
+            else{
+                $res = $this->gateway->inFavorite($_SESSION["user"],$idq);
+                return $res;
+            }
+        }
+
+        public function addFavorite(string $username, int $id){
+            $this->gateway->addFavorite($username,$id);
+        }
+
+        public function supFavorite(string $username, int $id){
+            $this->gateway->supFavorite($username,$id);
+        }
     }
 
 ?>
diff --git a/vue/templates/login.html b/vue/templates/login.html
deleted file mode 100644
index 361f604..0000000
--- a/vue/templates/login.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-    <div class="container">
-        <div class="header">
-            <div class="nav"> 
-                <img src="images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
-                <img id="theme-icon" src="images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
-                <img src="images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
-            </div>
-            <div class="logo">
-                <a href="{{racine}}/"><img src="images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
-            </div>
-            <div class="user">
-                <img src="images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
-            </div>
-        </div>
-    </div>
-    <h1>▶ Connexion ◀</h1>
-    <div class="login">
-        <p> <strong>Identifiant *</strong></p>
-        <input type="text" class="connexion" name="name" required />
-
-        <p> <strong> Mot de passe *</strong></p>
-        <input type="password" class="connexion" name="passwd" required />
-
-        <div class="createAccount">
-            <p class="createAccount">Vous n'avez pas de compte?</p>
-            <a href="{{racine}}/signin" class="createAccount">S'incrire</a>
-        </div>
-        
-
-        <div class="buttonSudmiteDiv">
-            <button class="buttonSudmite">Connexion</button>
-        </div>
-        
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/vue/templates/quote.html.twig b/vue/templates/quote.html.twig
index c79371f..3fbbde8 100644
--- a/vue/templates/quote.html.twig
+++ b/vue/templates/quote.html.twig
@@ -1,38 +1,64 @@
-<div class="card">
-    <img class="card-image" src="{{ srcImg }}" >
-    
-    <div class="card-content">
-        <h2 class="quote">“{{quoteContent}}”</h2>
-        <ul class="infoQuote">
-            <li>- {{sourceName}}</li>
-            <li>- {{nameCarac}}</li>
-            <li>- {{dateSortie}}</li>
-        </ul>
+<div class="central_container">
+    <div class="card">
+        <div class="part1">
+            <img class="card-image" src="{{ srcImg }}" >
+            
+            <div class="card-content">
+                <h2 class="quote">“{{quoteContent}}”</h2>
+            </div>
 
-        <div class="likes">
-            <p>{{nbLike}} ❤️</p>
+            <div class="icons">
+                {% if fav == false %}
+                    <div class="like-icon"><a class="likeLien" href="{{racine}}/addFav/{{idQuote}}">♡</a></div>
+                {% else %}
+                    <div class="like-icon"><a class="likeLien" href="{{racine}}/supFav/{{idQuote}}">❤️</a></div>
+                {% endif %}
+                <div class="share-icon" onclick="copyCurrentUrl()">🔗</div>
+            </div>
+        </div>
+        <div class="part2">
+            <div class="info">
+                <ul class="infoQuote">
+                    <li>- {{sourceName}}</li>
+                    <li>- {{nameCarac}}</li>
+                    <li>- {{dateSortie}}</li>
+                </ul>
+            </div>
+            
+            <div class="likes">
+                    <p>{{nbLike}} ❤️</p>
+            </div>
         </div>
     </div>
 
-    <div class="like-icon">❤️</div>
-    <div class="share-icon" onclick="copyCurrentUrl()">🔗</div>
-</div>
-
-<div class="commentaire">
-    <div>
-        <form action="{{racine}}/addComment" method="post">
-            <input type="text" class="comAdd" id="content" name="content" required>
-            <input type="hidden" class="hide" id="idQuote" name="idQuote" value="{{idQuote}}">
-            <input type="submit" class="btn" value=">" />
-        </form>
+    <div class="commentaire">
+        <div class="formulaire">
+            <form action="{{racine}}/addComment" method="post">
+                <input type="text" class="comAdd" id="content" name="content" required>
+                <input type="hidden" class="hide" id="idQuote" name="idQuote" value="{{idQuote}}">
+                <input type="submit" class="btn" value=">" />
+            </form>
+        </div>
+        {% if com|length > 0 %} 
+        <div class="comment_section">
+            {% for c in com %}
+                <div class="com">
+                    <div class="infCom">
+                        <strong class="userName">
+                            {{c.user}}
+                        </strong>
+                        <div class="date">
+                            {{ c.date }}
+                        </div>
+                    </div>
+                    <p class="cont">
+                        {{c.comment}}
+                    </p>
+                </div>
+            {% endfor %} 
+        </ul>
+        {% endif %}
     </div>
-    {% if com|length > 0 %} 
-    <ul>
-        {% for c in com %}
-            <li>{{c.comment}} - {{ c.date }}</li>
-        {% endfor %} 
-    </ul>
-    {% endif %}
 </div>
 </body>
 </html>