diff --git a/resources/sass/fo/pages/_unveil.scss b/resources/sass/fo/pages/_unveil.scss
index 36269fc..52f91cc 100644
--- a/resources/sass/fo/pages/_unveil.scss
+++ b/resources/sass/fo/pages/_unveil.scss
@@ -16,6 +16,18 @@
         }
     }
 
+    .swiper-button-prev-custom {
+        top: 10%;
+        left: 1rem;
+        transform: translateY(-50%) rotate(180deg);
+    }
+
+    .swiper-button-next-custom {
+        top: 10%;
+        right: 1rem;
+        transform: translateY(-50%);
+    }
+
     .history {
         #historical-milestone-carousel {
             .carousel-container {
diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts
index 3a07c40..51cf778 100644
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@@ -159,11 +159,15 @@ document.addEventListener("DOMContentLoaded", function () {
             },
         },
         "swiper-year": {
-            modules: [Keyboard],
+            modules: [Keyboard, Navigation],
             grabCursor: true,
             slidesPerView: 1.5,
             centeredSlides: true,
             slideToClickedSlide: true,
+            navigation: {
+                nextEl: ".year-next",
+                prevEl: ".year-prev",
+            },
             keyboard: {
                 enabled: true,
             },
diff --git a/resources/views/fo/pages/unveil.blade.php b/resources/views/fo/pages/unveil.blade.php
index bba27b7..95ec162 100644
--- a/resources/views/fo/pages/unveil.blade.php
+++ b/resources/views/fo/pages/unveil.blade.php
@@ -189,6 +189,11 @@
                         @endphp
                         <div class="carousel slide carousel-fade pb-lg-5 pb-0" id="historical-milestone-carousel">
                             <div class="d-lg-none">
+                                <button id="carousel-btn-prev" class="swiper-button swiper-button-prev-custom year-prev d-lg-none z-2"
+                                    data-bs-target="#historical-milestone-carousel" data-bs-slide-to="">
+                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
+                                        title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
+                                </button>
                                 <div class="carousel-indicators justify-content-between">
                                     <div class="swiper swiper-year w-100 h-fit overflow-visible" id="swiper-year">
                                         <div class="swiper-wrapper">
@@ -210,6 +215,11 @@
                                         </div>
                                     </div>
                                 </div>
+                                <button id="carousel-btn-next" class="swiper-button swiper-button-next-custom year-next d-lg-none z-2"
+                                    data-bs-target="#historical-milestone-carousel" data-bs-slide-to="">
+                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
+                                        title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
+                                </button>
                             </div>
                             <div class="d-none d-lg-block">
                                 <div class="carousel-container justify-content-between">
@@ -244,48 +254,48 @@
                                 </div>
                             </div>
                             <div class="carousel-inner pb-lg-5 overflow-visible pb-4">
-                                @foreach ($historicalMilestoneModels as $historicalMilestoneModel)
-                                    <div @class(['carousel-item bg-body', 'active' => $loop->first])>
-                                        {{-- We needed to include this picture twice because bootstrap took the picture height in its calculation for the carousel height --}}
-                                        @if ($historicalMilestoneModel->picture)
-                                            <img class="position-absolute picture d-none d-lg-block"
-                                                src="{{ $historicalMilestoneModel->picture }}"
-                                                title="{{ $historicalMilestoneModel->picture_title }}"
-                                                alt="{{ $historicalMilestoneModel->picture_alt }}">
-                                        @endif
-                                        <div class="row justify-content-center justify-content-lg-end">
-                                            <div class="col-12 col-lg-6">
-                                                <p class="year fw-bold text-{{ $colors[$loop->index % 4] }} pb-lg-0 mb-5 pb-5 text-center">
-                                                    {{ $historicalMilestoneModel->year }}
-                                                </p>
-                                            </div>
+                                    @foreach ($historicalMilestoneModels as $historicalMilestoneModel)
+                                        <div @class(['carousel-item bg-body', 'active' => $loop->first])>
+                                            {{-- We needed to include this picture twice because bootstrap took the picture height in its calculation for the carousel height --}}
                                             @if ($historicalMilestoneModel->picture)
-                                                <img class="position-relative picture d-lg-none" src="{{ $historicalMilestoneModel->picture }}"
+                                                <img class="position-absolute picture d-none d-lg-block"
+                                                    src="{{ $historicalMilestoneModel->picture }}"
                                                     title="{{ $historicalMilestoneModel->picture_title }}"
                                                     alt="{{ $historicalMilestoneModel->picture_alt }}">
                                             @endif
-                                            <div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
-                                                <div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
-                                                    <p class="fw-bold fs-5">
-                                                        {{ $historicalMilestoneModel->title }}
+                                            <div class="row justify-content-center justify-content-lg-end">
+                                                <div class="col-12 col-lg-6">
+                                                    <p class="year fw-bold text-{{ $colors[$loop->index % 4] }} pb-lg-0 mb-5 pb-5 text-center">
+                                                        {{ $historicalMilestoneModel->year }}
                                                     </p>
-                                                    @if ($historicalMilestoneModel->text)
-                                                        <p>
-                                                            {{ $historicalMilestoneModel->text }}
+                                                </div>
+                                                @if ($historicalMilestoneModel->picture)
+                                                    <img class="position-relative picture d-lg-none" src="{{ $historicalMilestoneModel->picture }}"
+                                                        title="{{ $historicalMilestoneModel->picture_title }}"
+                                                        alt="{{ $historicalMilestoneModel->picture_alt }}">
+                                                @endif
+                                                <div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
+                                                    <div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
+                                                        <p class="fw-bold fs-5">
+                                                            {{ $historicalMilestoneModel->title }}
                                                         </p>
+                                                        @if ($historicalMilestoneModel->text)
+                                                            <p>
+                                                                {{ $historicalMilestoneModel->text }}
+                                                            </p>
+                                                        @endif
+                                                    </div>
+                                                    @if ($historicalMilestoneModel->button_status)
+                                                        <a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-inherit text-white"
+                                                            href="{{ $historicalMilestoneModel->button_url }}"
+                                                            @if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
+                                                            {{ $historicalMilestoneModel->button_label }}
+                                                        </a>
                                                     @endif
                                                 </div>
-                                                @if ($historicalMilestoneModel->button_status)
-                                                    <a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-inherit text-white"
-                                                        href="{{ $historicalMilestoneModel->button_url }}"
-                                                        @if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
-                                                        {{ $historicalMilestoneModel->button_label }}
-                                                    </a>
-                                                @endif
                                             </div>
                                         </div>
-                                    </div>
-                                @endforeach
+                                    @endforeach
                             </div>
                         </div>
                     </div>