diff --git a/resources/docs/docs/premiere-page/home.md b/resources/docs/docs/premiere-page/home.md
new file mode 100644
index 0000000000000000000000000000000000000000..3647ce36c54c931938d426a80dbff788a198ed53
--- /dev/null
+++ b/resources/docs/docs/premiere-page/home.md
@@ -0,0 +1,147 @@
+# La page Accueil
+
+*Maintenant que nous avons une jolie barre de navigation, nous pouvons coder une belle page Accueil*
+On veut quelque chose qui ressemble à [ça](https://allocine.takima.dev/){:target="_blank"}
+
+## Création du composant Home
+Comme pour la génération du composant `navbar`, tu peux générer un nouveau composant pour la page accueil !
+```
+ng g c home
+```
+Tu peux ensuite l'afficher depuis le fichier `app.component.html` via la valeur du `selector`
+```
+<app-navbar [title]="title"></app-navbar>
+<app-home></app-home>
+```
+> ⚠️ N'oublie pas les imports !! 
+
+***Tu dois avoir `home works!` qui s'affiche sur ta page***
+
+
+## Appel au backend
+Les données affichées sur la page viennent du backend que tu as lancé au moment des installations.
+Un backend et un frontend communiquent généralement via des appels https
+Tous les appels que tu peux faire sont définis sur la [documentation](http://localhost:8080/swagger-ui/index.html#/){:target="_blank"} du backend
+
+*Notre objectif est donc de récupérer tous les films via un appel http au backend et de les afficher sur notre page*
+
+### 1. Création du model 
+Pour récupérer tous les films nous utilisons ce [endpoint](http://localhost:8080/swagger-ui/index.html#/movie-controller/getMovies){:target="_blank"} qui est un appel GET  
+On voit que ça retourne une liste d'objets: 
+```
+[
+  {
+    "id": 0,
+    "title": "string",
+    "director": "string",
+    "rate": 0,
+    "releaseDate": "2024-05-27T14:53:27.038Z",
+    "synopsis": "string",
+    "image": "string"
+  }
+]
+```
+
+Nous devons, coté front, créer un objet qui ressemble à ce retour pour pouvoir récupérer les données au moment de l'appel. 
+
+C'est parti : 
+<ul>
+<li>Clique droit sur le dossier `app` et créer un dossier que tu appelles `models`</li>
+<li>Clique droit sur le dossier `models` et créer un ficher que tu appelles `movie.ts`</li>
+<li>Dans ce fichier on créer l'objet qui représente les films</li>
+</ul>
+
+```ts
+export interface Movie {
+  id: number;
+  title: string;
+  releaseDate: Date;
+  director: string;
+  rate: number;
+  synopsis: string;
+  image: string;
+}
+```
+
+> On utilise **export** pour pouvoir utiliser cet objet dans d'autres fichiers  
+> On fait une **interface** qui colle au model du back (avec les memes noms de champs)
+
+### 1. Création d'un service pour appeler le back
+Nous avons besoin d'un service que nous pourrons utiliser à partir de nos composants pour appeler notre back.
+
+> La commande pour générer un service est très semblable à celle qui nous permet de générer un composant
+> ```
+> ng generate service services/movies
+> ```
+> Le `services/` permet de préciser un dossier dans lequel mettre le service
+
+Pour faire des appels http à notre backend nous avons besoin d'un service fourni par Angular le `HttpClient` qu'il faut provider de manière globale.
+
+Pour ça, ajoute dans la liste des `providers` du `app.config.ts` `provideHttpClient()`  
+Tu dois donc avoir :
+```ts
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes), provideHttpClient()]
+};
+```
+
+Maintenant, il faut faire l'appel à notre backend : <br>
+- Rends-toi dans le fichier `movies.service.ts`<br>
+- Supprime le `constructor` <br>
+- Injecte l'`HttpClient` dans la classe en déclarant une variable : ` private readonly httpClient = inject(HttpClient)` <br>
+- Déclare l'url de ton backend sur laquelle se trouve les données que tu veux récupérer : `private readonly url = "http://localhost:8080/movies"` <br>
+- Crée une méthode dans la classe qui fait l'appel : 
+```ts 
+getMovies(): Observable<Movie[]> {
+    return this.httpClient.get<Movie[]>(this.url);
+  }
+```
+
+> Comme nous récupérons des données via un appel GET nous utilisons la methode `get` de l'`HttpClient`  
+> Notre appel récupère une liste de `Movies` que l'on doit préciser au niveau du `get`  
+> La méthode `get` de l'`HttpClient` nous retourne toujours un `Observable`  
+> Un `Observable` est un objet qui permet de gérer des flux de données asynchrones  
+> On doit `subscribe` pour récupérer son contenu
+
+***Bravo ton appel est crée !!***
+
+### 2. Appel du service depuis le composant
+Maintenant que ton appel au backend est accessible depuis la méthode `getMovies()`, tu dois appeler cette méthode depuis ton composant
+
+Pour cela: <br>
+- Rends-toi dans le fichier `home.component.ts` <br>
+- Injecte ton service via une variable `private readonly moviesService = inject(MoviesService)`
+- Crée une variable pour récupérer ta liste de `Movie` : `movies$: Observable<Movie[]> = this.moviesService.getMovies()`
+
+> Comme vu un peu plus haut, on doit `subscribe` pour récupérer le contenu d'un observable. On peut le faire de deux façons : 
+> - Soit en utilisant le `.subscribe()` comme ça :
+> ```
+> movies: Movie[] = []
+> this.moviesService.getMovies(moviesFromBackend => this.movies = moviesFromBackend)
+> ```
+> Soit en utilisant directement le Pipe `| async` dans un fichier html
+> ```
+> @for (movie of movies$ | async; track movie.id)
+> ```
+
+Dans notre cas, on utilise le `| async` dans le `home.component.html` 
+```
+@for (movie of movies$ | async; track movie.id) {
+  <p>{{movie.id}}</p>
+  <p>{{movie.title}}</p>
+  <p>{{movie.releaseDate | date}}</p>
+  <p>{{movie.director}}</p>
+  <p>{{movie.rate}}</p>
+  <p>{{movie.synopsis}}</p>
+}
+```
+
+***Tadaaaaam, tes données s'affichent sur ta page Accueil !!!***
+
+### 3. On rend tout ça joli joli
+
+
+
+
+
+
diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml
index e207a585e163fa2379eadf5bf831446bbc9942d2..d7e5f58c469310a8cebc49687c66ac22a5793891 100644
--- a/resources/docs/mkdocs.yml
+++ b/resources/docs/mkdocs.yml
@@ -16,6 +16,7 @@ nav:
       - Le app-component: 'premiere-page/app-component.md'
       - Ton premier composant: 'premiere-page/navbar.md'
       - Le @Input: 'premiere-page/input.md'
+      - La page Accueil: 'premiere-page/home.md'
   - Page d'avis:
       - Création du composant: 'avis-page/create-component.md'
       - La navigation: 'avis-page/navigation.md'