diff --git a/src/app/card-resto/card-resto.component.html b/src/app/card-resto/card-resto.component.html
index e0ce372..93cf94f 100644
--- a/src/app/card-resto/card-resto.component.html
+++ b/src/app/card-resto/card-resto.component.html
@@ -1,37 +1,58 @@
-<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "  style="width: 18rem;" >
+<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "  style="width: 19rem;" >
       <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
+      <div class="rond position-absolute">
+        <i class="heart far fa-heart"></i>  
+      </div>
     <div class="card-body rounded-bottom">
         <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3>
-
+          
           <div class="accordion" id="accordionExample">
             
               <h2 class="accordion-header pt-1" id="headingOne">
-            <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               PLUS D'INFOS
             </button>
           </h2>
           
-          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+          <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
             <div class=" body accordion-body">
               <strong>This is the first item's accordion body.</strong>
-                <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center">
-                    <ul class="avis-star d-flex flex-row ps-0 pt-3 pe-0">
+                <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
+                    <ul class="avis-star d-flex flex-row  ps-1 pt-3 pe-0 pb-0 mb-0  ">
                       <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
                       <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
                       <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
                       <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
                       <li class="star"><i class="bi bi-star-fill"></i></li>
                     </ul>
-                    <span class="ps-3"style="font-size: 1.2em; color:#545454" >4/5</span>
-                    
-               </div>
-               <span class="categorie">Kebab</span>
-               <img src="assets/ImagesRestos/pieton.png"><span class="categorie">550m</span>
-               
-            </div>
+                    <span class="ps-3 mt-3 "style="font-size: 1.1em; color:#545454" >5/5</span>
+                </div>
+                    <div class="infos ps-1 pt-2"style="color:#545454">
+                      <span class="categorie pe-4"style="font-style: italic;">Kebab</span>
+                      <i class="fas fa-walking ps-2 pe-1"style="color:#a8a8a8"></i><span class="categorie pe-4"style="font-weight: bold;">550m</span>
+                      <i class="fas fa-euro-sign ps-2 pe-1"style="color:#a8a8a8"></i><span class="prix"style="font-weight: bold;">5-10€</span>
+                  </div>
+                    <div class="trait-rouge pt-3"></div>
+                      <p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span class="description pe-1"style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux texte standard de l'imprimerie depuis 
+                      les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour 
+                      réaliser un livre spécimen de polices de texte.</p>
+                        <div class="trait-rouge pt-2 pb-0"></div>
+                          <div class="critere ps-1 pt-3">
+                            <span class="sur-place pe-1" style="color:#545454">Sur place :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
+                            <span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
+                          </div>
+                            <div class="trait-rouge pt-3"></div>
+                              <div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
+                                <span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"style="color:#ED2F2F"></i>
+                              </div>
+                              <div class="reserver pt-2">
+                              <button type="button" class="button">Réserver</button>
+                            </div>
+          </div>
           
-        </div>
-    </div>
+      </div>
+      
+    <div>
 </div>
 
 
diff --git a/src/app/card-resto/card-resto.component.scss b/src/app/card-resto/card-resto.component.scss
index 2501681..9ec6b1d 100644
--- a/src/app/card-resto/card-resto.component.scss
+++ b/src/app/card-resto/card-resto.component.scss
@@ -1,3 +1,19 @@
+.rond{
+    padding: 0.7em;
+    background-color: rgb(255, 255, 255);
+    top: 1em;
+    right: 1em;
+    border-radius: 50%;
+}
+
+.heart{
+    display: flex;
+    font-size: 1.6em;
+    padding: 0;
+    margin:0;
+    color: #FF2048;
+}
+
 .titre-resto{
     margin-bottom: 0.9rem;
 }
@@ -10,8 +26,24 @@
     border-radius: 0 0 0.25rem 0.25rem;
     padding: 1.375rem 0.75rem;
     
-    
 }
+.accordion-button.collapsed {
+    background: #CE0000;
+  }
+  
+  .accordion-button.collapsed::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  }
+ 
+
+  .ps-5 {
+    padding-left: 5.4rem !important;
+}
+.pe-5 {
+    padding-right: 5rem !important;
+}
+
+
 .accordion .btn:focus{
     box-shadow: none;
 }
@@ -22,6 +54,26 @@
     list-style-type: none;
     font-size: 1.5em;
     color:#ffd900;
+    
+}
+
+.trait-rouge{
+border-bottom: 1px solid #CE0000;
+opacity: 50%;
+
+}
+
+.button{
+    display: block;
+    padding: 0.5em 2em 0.5em ;
+    width: 100%;
+    border-radius: 5px;
+    border: none;
+    background-color: #545454;
+    color: #ffffff;
+    text-transform: uppercase;
+    font-weight: bold;
+
 }
 
 
diff --git a/src/app/header/components/search-bar/search-bar.component.html b/src/app/header/components/search-bar/search-bar.component.html
index 3c06a2b..fd6763f 100644
--- a/src/app/header/components/search-bar/search-bar.component.html
+++ b/src/app/header/components/search-bar/search-bar.component.html
@@ -1,11 +1,13 @@
-<nav class="navbar navbar-light">
-  <div class="container-fluid">
-<img src="assets/images-header/logo.png" alt="logo">
-    <form style="width: 30%;" class="d-flex">
-      <input class="form-control me-5" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
-    </form>
-    <div class="trait">
-      <p>LE BON PLAN POUR MANGER</p>
-      </div>
+<nav class="navbar navbar-light p-0">
+  <div class="container-fluid d-flex align-items-center pt-3">
+    <div class="logo ps-4">
+      <img src="assets/images-header/LOGO2.png" alt="logo">
     </div>
+      <form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
+        <input class="form-control me-5 position-relative" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
+      </form>
+        <div class="trait">
+          <p>LE BON PLAN POUR MANGER</p>
+        </div>
+  </div>
 </nav>
diff --git a/src/app/header/components/search-bar/search-bar.component.scss b/src/app/header/components/search-bar/search-bar.component.scss
index c83f803..673c03c 100644
--- a/src/app/header/components/search-bar/search-bar.component.scss
+++ b/src/app/header/components/search-bar/search-bar.component.scss
@@ -19,22 +19,18 @@
 
 }
 
-img{
-  padding-left: 2%;
-
-}
-
-
 p{
   background-color: white;
   position: absolute;
   top: 15px;
-  left: 130px;
+  left: 68px;
   padding : 0 10px 0 10px;
-  font-weight: bolder;
   color: grey;
 }
 
-// .form-control{
-// }
+
+
+input[type="search"], textarea{
+  background-color: #edf5f1;
+}
 
diff --git a/src/assets/images-header/LOGO2.png b/src/assets/images-header/LOGO2.png
new file mode 100644
index 0000000..cccfd49
Binary files /dev/null and b/src/assets/images-header/LOGO2.png differ
diff --git a/src/index.html b/src/index.html
index 80e402a..0ecced0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>