diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.html b/src/app/components/add-pin-popup/add-pin-popup.component.html
index 86e8634..6dac782 100644
--- a/src/app/components/add-pin-popup/add-pin-popup.component.html
+++ b/src/app/components/add-pin-popup/add-pin-popup.component.html
@@ -5,7 +5,7 @@
   class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
   type="button"
 >
-  <p *ngIf="!isHomePage">Add a pin</p>
+  <p *ngIf="!isHomePage">Ajouter un pin</p>
 </button>
 
 <!-- Main modal -->
@@ -45,7 +45,7 @@
               d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
             />
           </svg>
-          <span class="sr-only">Close modal</span>
+          <span class="sr-only">Fermer la modal</span>
         </button>
       </div>
       <!-- Modal body -->
@@ -79,7 +79,7 @@
               id="localisation"
               formControlName="location"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-              placeholder="Enter location"
+              placeholder="Saisir la localisation"
               (focus)="onFocus()"
               (blur)="onBlur()"
             />
@@ -113,7 +113,7 @@
               rows="4"
               formControlName="description"
               class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="Describe your memory"
+              placeholder="Décrit ton souvenir..."
             ></textarea>
           </div>
 
diff --git a/src/app/components/drag-drop/drag-drop.component.html b/src/app/components/drag-drop/drag-drop.component.html
index 8b252c0..495e7d9 100644
--- a/src/app/components/drag-drop/drag-drop.component.html
+++ b/src/app/components/drag-drop/drag-drop.component.html
@@ -21,10 +21,11 @@
         d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
       />
     </svg>
-    <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
-      <span class="font-semibold">Click to upload</span> or drag and drop
+    <p class="mb-2 text-sm text-gray-500 dark:text-gray-400 text-center">
+      <span class="font-semibold">Cliquez pour télécharger</span><br />
+      ou glissez-déposez
     </p>
-    <p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG or GIF</p>
+    <p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG ou GIF</p>
   </div>
 
   <!-- Input masqué -->
diff --git a/src/app/components/home-page/home-page.component.css b/src/app/components/home-page/home-page.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/home-page/home-page.component.html b/src/app/components/home-page/home-page.component.html
index 67311cd..23b3202 100644
--- a/src/app/components/home-page/home-page.component.html
+++ b/src/app/components/home-page/home-page.component.html
@@ -1,58 +1,412 @@
+<img src="/home.jpg" alt="image carte du monde" style="width: 100%" />
+<hr class="h-3 bg-yellow-50 border-0 brown" />
 
-<img src="/home.jpg" alt="image carte du monde" style="width: 100%">
-<hr class="h-3 bg-yellow-50 border-0 brown">
-
-<div style="display: flex; gap: 20px; padding: 20px; justify-content: center; align-items: stretch;">
-    <section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
-        <div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
-            <div>
-                <img src="/logo.png" alt="Équipe Memory sombre" >
-            </div>
-            <div class="mt-4 md:mt-0">
-                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
-                    Bienvenue sur Memory Map
-                </h2>
-                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
-                    Plongez dans un voyage interactif à travers vos souvenirs avec 
-                    <strong>Memory Map</strong>, l'application qui transforme vos aventures 
-                    en une carte unique et personnalisée.
-                </p>
-                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
-                    Enrichissez vos marqueurs avec des photos, des légendes, des notes personnelles, et même des amis 
-                    identifiés pour revivre chaque moment important.
-                </p>
-                <button routerLink="/map" class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800">
-                    Commencez votre aventure
-                    <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                    </svg>
-                </button>
-            </div>
+<div
+  style="
+    display: flex;
+    gap: 20px;
+    padding: 20px;
+    justify-content: center;
+    align-items: stretch;
+  "
+>
+  <section
+    class="bg-white dark:bg-gray-900"
+    style="
+      border-radius: 15px;
+      flex: 1;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    "
+  >
+    <div
+      style="display: flex; flex: 3; flex-direction: row"
+      class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6"
+    >
+      <div>
+        <img src="/logo.png" alt="Équipe Memory sombre" />
+      </div>
+      <div class="mt-4 md:mt-0">
+        <h2
+          class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
+        >
+          Bienvenue sur Memory Map
+        </h2>
+        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+          Plongez dans un voyage interactif à travers vos souvenirs avec
+          <strong>Memory Map</strong>, l'application qui transforme vos
+          aventures en une carte unique et personnalisée.
+        </p>
+        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+          Enrichissez vos marqueurs avec des photos, des légendes, des notes
+          personnelles, et même des amis identifiés pour revivre chaque moment
+          important.
+        </p>
+        <button
+          routerLink="/map"
+          class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800"
+        >
+          Commencez votre aventure
+          <svg
+            class="ml-2 -mr-1 w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </section>
+  <section
+    class="bg-white dark:bg-gray-900"
+    style="
+      border-radius: 15px;
+      flex: 1;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    "
+  >
+    <div
+      style="display: flex; flex: 3; flex-direction: row"
+      class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6"
+    >
+      <div class="mt-4 md:mt-0">
+        <h2
+          class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
+        >
+          L'équipe Memory
+        </h2>
+        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+          Toute l'équipe de <strong>Memory</strong> est fière de vous présenter
+          <strong>Memory Map</strong>, une application conçue avec passion et
+          créativité pour vous permettre de revivre vos meilleurs souvenirs et
+          d'en découvrir de nouveaux.
+        </p>
+        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+          Nous vous remercions de nous accompagner dans cette belle aventure, et
+          nous avons hâte de voir les magnifiques cartes que vous allez créer !
+        </p>
+        <p
+          class="font-medium text-lg text-center text-gray-900 dark:text-gray-100"
+        >
+          Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
+        </p>
+      </div>
+      <div>
+        <img src="/logo.png" alt="Équipe Memory sombre" />
+      </div>
+    </div>
+  </section>
+</div>
+<section class="bg-white dark:bg-gray-900 p-20">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
+    <div class="max-w-screen-md mb-8 lg:mb-16">
+      <h2
+        class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
+      >
+        Fonctionnalités principales
+      </h2>
+    </div>
+    <div
+      class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0"
+    >
+      <div>
+        <div
+          class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
+        >
+          <svg
+            class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z"
+              clip-rule="evenodd"
+            />
+          </svg>
         </div>
-    </section>
-    
-    <section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
-        <div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
-            <div class="mt-4 md:mt-0" >
-                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
-                    L'équipe Memory
-                </h2>
-                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
-                    Toute l'équipe de <strong>Memory</strong> est fière de vous présenter 
-                    <strong>Memory Map</strong>, une application conçue avec passion et créativité pour vous permettre 
-                    de revivre vos meilleurs souvenirs et d'en découvrir de nouveaux.
-                </p>
-                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
-                    Nous vous remercions de nous accompagner dans cette belle aventure, et nous avons hâte de voir les 
-                    magnifiques cartes que vous allez créer !
-                </p>
-                <p class="font-medium text-lg text-center text-gray-900 dark:text-gray-100">
-                    Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
-                </p>
-            </div>
-            <div>
-                <img src="/logo.png" alt="Équipe Memory sombre" >
-            </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">Placer vos pins</h3>
+        <p class="text-gray-500 dark:text-gray-400">
+          Marquez sans effort vos endroits préférés sur la carte. Qu'il s'agisse
+          d'un joyau caché ou d'une vue à couper le souffle, épinglez les lieux
+          pour créer une carte personnalisée de vos aventures. N'oubliez jamais
+          les endroits qui ont rendu votre voyage spécial.
+        </p>
+      </div>
+      <div>
+        <div
+          class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
+        >
+          <svg
+            class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M13 10a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H14a1 1 0 0 1-1-1Z"
+              clip-rule="evenodd"
+            />
+            <path
+              fill-rule="evenodd"
+              d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12c0 .556-.227 1.06-.593 1.422A.999.999 0 0 1 20.5 20H4a2.002 2.002 0 0 1-2-2V6Zm6.892 12 3.833-5.356-3.99-4.322a1 1 0 0 0-1.549.097L4 12.879V6h16v9.95l-3.257-3.619a1 1 0 0 0-1.557.088L11.2 18H8.892Z"
+              clip-rule="evenodd"
+            />
+          </svg>
         </div>
-    </section>
-</div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">
+          Ajouter vos Photos
+        </h3>
+        <p class="text-gray-500 dark:text-gray-400">
+          Donnez vie à vos pins avec des images ! Capturez l'essence de vos
+          souvenirs en joignant des photos aux lieux que vous avez épinglés.
+          Qu'il s'agisse de couchers de soleil, de points de repère ou de
+          moments spontanés, créez un journal visuel de vos expériences.
+        </p>
+      </div>
+      <div>
+        <div
+          class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
+        >
+          <svg
+            class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M17.5 3a3.5 3.5 0 0 0-3.456 4.06L8.143 9.704a3.5 3.5 0 1 0-.01 4.6l5.91 2.65a3.5 3.5 0 1 0 .863-1.805l-5.94-2.662a3.53 3.53 0 0 0 .002-.961l5.948-2.667A3.5 3.5 0 1 0 17.5 3Z"
+            />
+          </svg>
+        </div>
+        <h3 class="mb-2 text-xl font-bold dark:text-white">
+          Partager vos histoires
+        </h3>
+        <p class="text-gray-500 dark:text-gray-400">
+          WChaque souvenir a une histoire, et vous pouvez maintenant partager la
+          vôtre. Racontez les moments qui ont rendu chaque lieu inoubliable.
+          Partagez vos aventures et revivez vos expériences les plus chères à
+          travers vos propres mots.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="dark:bg-white bg-gray-900">
+  <div class="py-8 px-4 mx-auto max-w-screen-l lg:py-16 lg:px-6">
+    <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
+      <h2
+        class="mb-4 text-4xl tracking-tight font-extrabold dark:text-gray-800 text-white"
+      >
+        Conçu pour des aventuriers comme vous
+      </h2>
+      <p class="mb-5 font-light dark:text-gray-500 sm:text-xl text-gray-400">
+        Chez Memory Map, nous nous concentrons sur la création d'outils qui
+        transforment vos souvenirs en expériences interactives et mémorables.
+      </p>
+    </div>
+    <div
+      class="space-y-8 lg:grid lg:grid-cols-2 justify-center mx-auto sm:gap-3 xl:gap-6 gap-x-8 lg:space-y-0 max-w-6xl"
+    >
+      <!-- Pricing Card -->
+      <div
+        class="flex flex-col justify-center p-6 mx-auto max-w-md text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white h-full"
+      >
+        <h3 class="mb-4 text-2xl font-semibold">Gratuit</h3>
+        <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
+          Meilleure option pour un usage personnel et pour votre prochain
+          projet.
+        </p>
+        <!-- List -->
+        <ul role="list" class="mb-8 space-y-4 text-left pt-5">
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Pins illimités sur votre carte personnelle.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Ajoutez des photos à vos souvenirs.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Partagez des souvenirs avec vos amis.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Accès au système de quêtes.</span>
+          </li>
+        </ul>
+        <a
+          href="/map"
+          class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-800 dark:hover:bg-blue-900 dark:focus:ring-blue-900"
+          >Commencez</a
+        >
+      </div>
+      <!-- Pricing Card -->
+      <div
+        class="flex flex-col justify-center p-6 mx-auto max-w-md text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white h-full"
+      >
+        <h3 class="mb-4 text-2xl font-semibold">Premium</h3>
+        <div class="flex justify-center items-baseline pb-2">
+          <span class="mr-2 text-3xl font-extrabold">9€</span>
+          <span class="text-gray-500 dark:text-gray-400">/mois</span>
+        </div>
+        <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
+          Parfait pour les aventuriers avides de souvenirs et de fonctionnalités
+          avancées.
+        </p>
+        <!-- List -->
+        <ul role="list" class="mb-8 space-y-4 text-left pt-5">
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Pins illimités sur votre carte personnelle.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Ajoutez des photos à vos souvenirs.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Partagez des souvenirs avec vos amis.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Système avancé de quêtes avec badges exclusifs.</span>
+          </li>
+          <li class="flex items-center space-x-3">
+            <!-- Icon -->
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span>Support premium.</span>
+          </li>
+        </ul>
+        <a
+          class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
+          >Bientôt disponible</a
+        >
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/app/components/home-page/home-page.component.ts b/src/app/components/home-page/home-page.component.ts
index 643bba6..6879271 100644
--- a/src/app/components/home-page/home-page.component.ts
+++ b/src/app/components/home-page/home-page.component.ts
@@ -1,13 +1,9 @@
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-
 @Component({
   selector: 'app-home-page',
   imports: [RouterLink],
   templateUrl: './home-page.component.html',
-  styleUrl: './home-page.component.css'
 })
-export class HomePageComponent {
-
-}
+export class HomePageComponent {}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 4bfdf41..66db915 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -145,21 +145,21 @@
             *ngIf="!isHome"
             class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
             aria-current="page"
-            >Home
+            >Accueil
           </a>
           <a
             href="/map"
             *ngIf="isHome"
             class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
             aria-current="page"
-            >Map
+            >Carte
           </a>
         </li>
         <li class="flex items-center space-x-2">
           <a
             href="#"
             class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Quests
+            >Quêtes
           </a>
         </li>
         <li class="flex items-center space-x-2">
@@ -169,7 +169,7 @@
           <a
             href="#"
             class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Friends
+            >Amis
           </a>
         </li>
       </ul>