diff --git a/app/Http/Controllers/Fo/HomeController.php b/app/Http/Controllers/Fo/HomeController.php
index 32892065..fecc5e33 100644
--- a/app/Http/Controllers/Fo/HomeController.php
+++ b/app/Http/Controllers/Fo/HomeController.php
@@ -25,7 +25,25 @@ class HomeController extends Controller
         $mainSlideModels     = MainSlide::query()->where('published', true)->orderBy('order', 'ASC')->get();
         $approachSlideModels = ApproachSlide::query()->where('published', true)->orderBy('order', 'ASC')->get();
         $productViews        = $this->getProductsViewsByRange();
-        return view('fo.pages.home', compact('mainSlideModels', 'approachSlideModels', 'productViews'));
+
+        // TODO: Remplacer cette boucle par un appel à la base quand le crud aura été fait.
+        $newsModelsCollection = [];
+        for ($i = 0; $i < 16; $i++) {
+            $newsModelsCollection[] = [
+                'title' => \fake()->text(100),
+            ];
+        }
+        $newsModelsCollection = \collect($newsModelsCollection);
+        // END TODO
+
+        // Split news in 3 parts.
+        $newsModels = [
+            'first' => $newsModelsCollection->shift(),
+            'three_following' => $newsModelsCollection->shift(3),
+            'latest' => $newsModelsCollection,
+        ];
+
+        return view('fo.pages.home', compact('mainSlideModels', 'approachSlideModels', 'productViews', 'newsModels'));
     }
 
     /**
diff --git a/resources/sass/fo/pages/home.scss b/resources/sass/fo/pages/home.scss
index 478f0d7e..9c842720 100644
--- a/resources/sass/fo/pages/home.scss
+++ b/resources/sass/fo/pages/home.scss
@@ -201,4 +201,42 @@
             }
         }
     }
+
+    #news {
+        .news-wrapper {
+            @include media-breakpoint-up(xl) {
+                height: 34rem;
+            }
+        }
+
+        .basic-list {
+            max-height: 18rem;
+            list-style: none;
+            scrollbar-color: $color-secondary $color-tertiary;
+
+            @include media-breakpoint-up(xl) {
+                max-height: 25rem;
+                margin: 0;
+            }
+
+            // Improved compatibility with browsers which doesn't support scrollbar-color.
+            &::-webkit-scrollbar-thumb {
+                width: 1rem;
+                border: 0.4rem solid transparent;
+                background-clip: content-box;
+                background-color: $color-secondary;
+            }
+
+            &::-webkit-scrollbar {
+                background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-track-piece {
+                width: 1rem;
+                border: 0.4rem solid transparent;
+                background-clip: content-box;
+                background-color: $color-tertiary;
+            }
+        }
+    }
 }
diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php
index 05da56b7..6bec98ee 100644
--- a/resources/views/fo/pages/home.blade.php
+++ b/resources/views/fo/pages/home.blade.php
@@ -289,5 +289,108 @@
                 </div>
             </div>
         </section>
+        {{-- NEWS --}}
+        @if (\collect($newsModels['first'])->isNotEmpty())
+            <section class="py-4" id="news">
+                <div class="container">
+                    <div class="row my-2">
+                        <div class="col-12 col-xl-7">
+                            <h2 class="text-xl-start px-xl-0 px-5 text-center">{{ __('Les actualités le gaulois') }}</h2>
+                            <p class="text-xl-start px-xl-0 px-4 text-center">
+                                {{ __('Pour ne rien manquer des actus Le Gaulois, découvrez la vie de notre marque à travers nos évènements, nos récompenses, nos conseils ... et bien d\'autres !') }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row news-wrapper justify-content-center">
+                        {{-- First news card --}}
+                        <div class="col-12 col-md-6 col-xl-4">
+                            <div class="h-100 mx-2">
+                                @include('fo.partials.news-card', [
+                                    'picture' => [
+                                        'src' => 'resources/assets/images/tmp/news.png',
+                                        'alt' => 'Image alt',
+                                        'title' => 'Image title',
+                                    ],
+                                    'date' => now(),
+                                    'text' => $newsModels['first']['title'],
+                                    'link' => '#CHANGEME',
+                                ])
+                            </div>
+                        </div>
+                        @if (\collect($newsModels['three_following'])->isNotEmpty())
+                            {{-- 3 horizontal cards (only for devices with width > md size) --}}
+                            <div class="d-none d-md-flex flex-column justify-content-around col-md-6 col-xl-4">
+                                @foreach ($newsModels['three_following'] as $newsModel)
+                                    <div class="news-small-card bottom-left-shadow border-0 bg-transparent">
+                                        <a class="text-decoration-none" href="#CHANGEME: article.show"
+                                            title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
+                                            <div class="line-border-small bg-white p-3">
+                                                <div class="row">
+                                                    <div class="col-4">
+                                                        <img class="w-100" src="{{ Vite::asset('resources/assets/images/tmp/news.png') }}"
+                                                            title="Image title" alt="Image alt">
+                                                    </div>
+                                                    <div class="col-8">
+                                                        <div class="d-flex align-items-center mb-2">
+                                                            {{-- TAG --}}
+                                                            <div class="news-tag text-uppercase f-bourton-base fs-5 me-3 px-2 py-1"
+                                                                style="background-color: #1175b7; color: #fff">
+                                                                {{ __('Actu') }}
+                                                            </div>
+                                                            {{-- DATE --}}
+                                                            <p class="f-bakerie-rough mb-0">{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}
+                                                            </p>
+                                                        </div>
+                                                        <p class="text-uppercase f-bourton-base m-0">
+                                                            {{ $newsModel['title'] }}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @endif
+                        {{-- Remaining news : 15 for devices < md size / 12 for devices > md size --}}
+                        <div @class([
+                            'col-12 order-md-4 order-lg-3 col-xl-4 mt-xl-0 mt-4',
+                            'd-none' => \collect($newsModels['three_following'])->isEmpty(),
+                            'd-md-none' => \collect($newsModels['latest'])->isEmpty(),
+                        ])>
+                            <h3 class="mb-3">{{ __('Le fil d\'actualité') }}</h3>
+                            <ul class="basic-list mx-md-0 mx-2 overflow-y-scroll p-0 pe-4">
+                                <div class="d-md-none">
+                                    @foreach ($newsModels['three_following'] as $newsModel)
+                                        <li>
+                                            <a class="text-decoration-none" href="#CHANGEME article.show"
+                                                title="{{ __('Voir l\'article :name', ['name' => '#CHANGEME: news->title']) }}">
+                                                <p class="f-bakerie-rough mb-0">{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}</p>
+                                                <p>{{ $newsModel['title'] }}</p>
+                                            </a>
+                                        </li>
+                                    @endforeach
+                                </div>
+                                @foreach ($newsModels['latest'] as $newsModel)
+                                    <li>
+                                        <a class="text-decoration-none" href="#CHANGEME article.show"
+                                            title="{{ __('Voir l\'article :name', ['name' => '#CHANGEME: news->title']) }}">
+                                            <p class="f-bakerie-rough mb-0">{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}</p>
+                                            <p>{{ $newsModel['title'] }}</p>
+                                        </a>
+                                    </li>
+                                @endforeach
+                            </ul>
+                        </div>
+                        {{-- SEE MORE BUTTON --}}
+                        <div class="col-12 d-flex justify-content-center justify-content-md-end order-md-3 order-lg-4 my-4">
+                            <a class="btn btn-secondary" href="#CHANGEME: actu index" title="{{ __('Voir toute l\'actualité') }}">
+                                {{ __('Voir toute l\'actualité') }}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        @endif
     </section>
 @endsection
diff --git a/resources/views/fo/partials/news-card.blade.php b/resources/views/fo/partials/news-card.blade.php
index 299fad25..563cd997 100644
--- a/resources/views/fo/partials/news-card.blade.php
+++ b/resources/views/fo/partials/news-card.blade.php
@@ -1,14 +1,15 @@
 {{--
-    VARIABLE    || COMMENT                                  || TYPE                  || REQUIRED  || DEFAULT
+    VARIABLE    || COMMENT                         || TYPE                  || REQUIRED  || DEFAULT
 
-    $picture    || Elements of the img tag.                 || array<string, string> || REQUIRED  ||
-    $text       || Text displayed in the card.              || string                || REQUIRED  ||
-    $link       || Link to redirect in the button.          || string                || REQUIRED  ||
+    $picture    || Elements of the img tag.        || array<string, string> || REQUIRED  ||
+    $date       || Carbon date.                    || \Carbon\Carbon        || REQUIRED  ||
+    $text       || Text displayed in the card.     || string                || REQUIRED  ||
+    $link       || Link to redirect in the button. || string                || REQUIRED  ||
 --}}
 
-<div class="news-card bottom-left-shadow card border-0 bg-transparent">
-    <a class="text-decoration-none" href="{{ $link }}" title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
-        <div class="line-border-medium bg-white">
+<div class="news-card bottom-left-shadow card h-100 border-0 bg-transparent">
+    <a class="text-decoration-none h-100" href="{{ $link }}" title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
+        <div class="line-border-small h-100 bg-white">
             <div class="card-img-top position-relative">
                 <img class="w-100 line-border-medium" src="{{ Vite::asset($picture['src']) }}" title="{{ $picture['alt'] }}"
                     alt="{{ $picture['title'] }}">
@@ -19,7 +20,7 @@
             <div class="card-body p-4">
                 <p class="text-small f-bakerie-rough">{{ $date->format('d/m/Y') }}</p>
                 <p class="text-uppercase fs-4 f-bourton-base">
-                    {{ __('Le gaulois s\'engage avec ses équipes pour sauver un enfant avec mécénat chirurgie cardiaque') }}</p>
+                    {{ $text }}</p>
             </div>
         </div>
     </a>