diff --git a/angular.json b/angular.json
index 0b6ee56..256bb52 100644
--- a/angular.json
+++ b/angular.json
@@ -86,5 +86,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/public/home.jpg b/public/home.jpg
new file mode 100644
index 0000000..c77a487
Binary files /dev/null and b/public/home.jpg differ
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a56b35a..acb9bac 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
 <app-navbar></app-navbar>
-<app-leaflet-map></app-leaflet-map>
+<!-- <app-leaflet-map></app-leaflet-map> -->
 
 <router-outlet />
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 838bea1..3642636 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component';
 import { NavbarComponent } from './components/navbar/navbar.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NavbarComponent, LeafletMapComponent],
+  imports: [RouterOutlet, NavbarComponent],
   templateUrl: './app.component.html',
 })
 export class AppComponent {
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..a3c8012 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { HomePageComponent } from './components/home-page/home-page.component';
+import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {path: '', component: HomePageComponent},
+    {path: 'map', component: LeafletMapComponent}
+];
diff --git a/src/app/components/home-page/home-page.component.css b/src/app/components/home-page/home-page.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/home-page/home-page.component.html b/src/app/components/home-page/home-page.component.html
new file mode 100644
index 0000000..67311cd
--- /dev/null
+++ b/src/app/components/home-page/home-page.component.html
@@ -0,0 +1,58 @@
+
+<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>
+    </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>
diff --git a/src/app/components/home-page/home-page.component.spec.ts b/src/app/components/home-page/home-page.component.spec.ts
new file mode 100644
index 0000000..c6f955d
--- /dev/null
+++ b/src/app/components/home-page/home-page.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePageComponent } from './home-page.component';
+
+describe('HomePageComponent', () => {
+  let component: HomePageComponent;
+  let fixture: ComponentFixture<HomePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomePageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/home-page/home-page.component.ts b/src/app/components/home-page/home-page.component.ts
new file mode 100644
index 0000000..643bba6
--- /dev/null
+++ b/src/app/components/home-page/home-page.component.ts
@@ -0,0 +1,13 @@
+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 {
+
+}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 55ae8d9..b2cfde5 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -9,7 +9,7 @@
         >Memory Map</span
       >
     </a>
-    <div class="flex lg:order-2">
+    <div *ngIf="!isHomePage" class="flex lg:order-2">
       <button
         type="button"
         data-collapse-toggle="navbar-search"
@@ -126,29 +126,35 @@
             href="#"
             class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
             aria-current="page"
-            >Home</a
+            >
+            <p *ngIf="!isHomePage">Home</p>
+            <p *ngIf="isHomePage">Connexion</p>
+          </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</a
+            >
+            <p *ngIf="!isHomePage">Quests</p>
+            <p *ngIf="isHomePage">Inscription</p>
+          </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"
-            >Add a pin</a
-          >
+            ><p *ngIf="!isHomePage">Add a pin</p>
+          </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"
-            >Friends</a
-          >
+            ><p *ngIf="!isHomePage">Friends</p>
+          </a>
         </li>
       </ul>
     </div>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index b7ae24f..bbc1155 100644
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -1,8 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
 
 @Component({
   selector: 'app-navbar',
-  imports: [],
+  imports: [NgIf],
   templateUrl: './navbar.component.html',
 })
-export class NavbarComponent {}
+export class NavbarComponent implements OnInit {
+  isHomePage: boolean = false;
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.isHomePage = this.router.url === '/';
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.isHomePage = event.url === '/';
+      }
+    });
+  }
+}
+