diff --git a/app/Http/Controllers/Fo/RangeController.php b/app/Http/Controllers/Fo/RangeController.php
new file mode 100644
index 0000000..d757ab2
--- /dev/null
+++ b/app/Http/Controllers/Fo/RangeController.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers\Fo;
+
+use App\Enums\StaticPageType;
+use App\Http\Controllers\Controller;
+use App\Models\Range;
+use App\Models\StaticPage;
+
+class RangeController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Contracts\View\View
+     */
+    public function index(): \Illuminate\Contracts\View\View
+    {
+        /** @var \App\Models\Range $rangeModels */
+        $rangeModels = Range::query()->where('published', true)->orderBy('order')->get();
+
+        /** @var \App\Models\StaticPage $staticPageModel */
+        $staticPageModel = StaticPage::query()->where('type', StaticPageType::ranges)->firstOrFail();
+
+        return view('fo.pages.ranges.index', compact('rangeModels', 'staticPageModel'));
+    }
+}
diff --git a/app/Http/Controllers/Fo/StaticPageController.php b/app/Http/Controllers/Fo/StaticPageController.php
index db78bd8..fc3f858 100644
--- a/app/Http/Controllers/Fo/StaticPageController.php
+++ b/app/Http/Controllers/Fo/StaticPageController.php
@@ -80,7 +80,7 @@ class StaticPageController extends Controller
      */
     public function contact(): \Illuminate\Contracts\View\View
     {
-        /** @var \App\Models\StaticPage $staticPageModel */
+        /** @var \App\Models\StaticPage $contactModel */
         $contactModel = StaticPage::query()->where('type', StaticPageType::contact)->firstOrFail();
 
         return view('fo.pages.contact', compact('contactModel'));
diff --git a/resources/assets/images/ranges/let-him-cook.png b/resources/assets/images/ranges/let-him-cook.png
new file mode 100644
index 0000000..d948839
Binary files /dev/null and b/resources/assets/images/ranges/let-him-cook.png differ
diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss
index 476048f..b35f589 100644
--- a/resources/sass/fo/fo.scss
+++ b/resources/sass/fo/fo.scss
@@ -17,5 +17,6 @@
 
 // * PAGES.
 @import './pages/homepage';
+@import './pages/ranges';
 @import './pages/contact';
 @import './pages/explorerpage';
diff --git a/resources/sass/fo/pages/_ranges.scss b/resources/sass/fo/pages/_ranges.scss
new file mode 100644
index 0000000..9694f03
--- /dev/null
+++ b/resources/sass/fo/pages/_ranges.scss
@@ -0,0 +1,56 @@
+.ranges {
+    &-img {
+        max-width: 15rem;
+    }
+
+    &-swiper {
+        .swiper-ranges {
+            position: relative;
+
+            .swiper-slide {
+                &-content {
+                    width: 246px;
+
+                    p {
+                        hyphens: auto;
+                        line-height: 1.2em;
+                        word-break: break-word;
+                    }
+                }
+            }
+
+            .swiper-button {
+                &-prev,
+                &-next { width: 3rem; }
+
+                &-next { rotate: 180deg; }
+
+                &-disabled { opacity: .5; }
+            }
+        }
+    }
+
+    &-flexwrap {
+        .col-4:nth-child(1),
+        .col-4:nth-child(3) {
+            transform: translateY(-3rem);
+        }
+
+        .card {
+            width: calc(246px + 3rem);
+
+            &-header {
+                height: 4em;
+            }
+
+            .card-body div {
+                transition: .3s ease-in-out;
+            }
+
+            &:hover .card-body div {
+                opacity: 1 !important;
+                visibility: visible !important;
+            }
+        }
+    }
+}
diff --git a/resources/views/fo/layouts/footer.blade.php b/resources/views/fo/layouts/footer.blade.php
index 9323e05..db524d9 100644
--- a/resources/views/fo/layouts/footer.blade.php
+++ b/resources/views/fo/layouts/footer.blade.php
@@ -55,7 +55,7 @@
                     </li>
                     <li class="nav-item">
                         <a class="nav-link text-uppercase @if (request()->routeIs('CHANGEME')) active @endif" data-bs-toggle="tooltip"
-                            href="#" title="{{ __('Nos gammes') }}">
+                            href="{{ route('fo.ranges.index') }}" title="{{ __('Nos gammes') }}">
                             {{ __('Nos gammes') }}
                         </a>
                     </li>
diff --git a/resources/views/fo/layouts/header.blade.php b/resources/views/fo/layouts/header.blade.php
index 8168742..51531e9 100644
--- a/resources/views/fo/layouts/header.blade.php
+++ b/resources/views/fo/layouts/header.blade.php
@@ -1,7 +1,7 @@
 <nav class="main-menu navbar">
     <div class="container-fluid">
         <a class="navbar-brand" data-bs-toggle="tooltip" data-bs-placement="bottom" href="{{ route('fo.homepage') }}"
-            title="{{ __('Accéder au front du projet') }}" target="_blank">
+            title="{{ __('Accéder au front du projet') }}">
             <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/layout/logo.svg', 'build') }}" alt="{{ config('app.name') }}"
                 width="200">
         </a>
diff --git a/resources/views/fo/layouts/nav-list.blade.php b/resources/views/fo/layouts/nav-list.blade.php
index 6ab9b14..944755d 100644
--- a/resources/views/fo/layouts/nav-list.blade.php
+++ b/resources/views/fo/layouts/nav-list.blade.php
@@ -8,8 +8,8 @@
             href="{{ route('fo.explorer') }}" title="{{ __('L\'explorateur & Gastronome') }}">
             {{ __('L\'explorateur & Gastronome') }}
         </a>
-        <a class="nav-link display-5 fw-bold text-uppercase @if (request()->routeIs('CHANGEME')) active @endif" data-bs-toggle="tooltip"
-            href="#" title="{{ __('Nos gammes') }}">
+        <a class="nav-link display-5 fw-bold text-uppercase @if (request()->routeIs('fo.ranges.index')) active @endif" data-bs-toggle="tooltip"
+            href="{{ route('fo.ranges.index') }}" title="{{ __('Nos gammes') }}">
             {{ __('Nos gammes') }}
         </a>
         <a class="nav-link display-5 fw-bold text-uppercase @if (request()->routeIs('CHANGEME')) active @endif" data-bs-toggle="tooltip"
diff --git a/resources/views/fo/pages/ranges/index.blade.php b/resources/views/fo/pages/ranges/index.blade.php
new file mode 100644
index 0000000..5bdef7b
--- /dev/null
+++ b/resources/views/fo/pages/ranges/index.blade.php
@@ -0,0 +1,101 @@
+@extends('fo.layout')
+
+@section('title', $staticPageModel->seo_title ?? __('Gammes'))
+@section('description', $staticPageModel->seo_description ?? __('Nos gammes à savourer !'))
+@section('breadcrumb',
+    request()->route()->getName())
+
+@section('content')
+    <section class="ranges position-relative">
+        <div class="position-relative py-md-5 py-4">
+            <img class="position-absolute top-50 start-50 translate-middle w-100 h-100 z-n1"
+                src="{{ Vite::asset('resources/assets/images/global/bg-grey-desktop.png') }}" title="{{ __('Visuel servant de fond') }}"
+                alt="{{ __('fond gris') }}">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12">
+                        <span class="divide d-block w-100 mt-xl-3 my-2"></span>
+                        <h1 class="f-sheldon text-uppercase my-3 text-center">{{ $staticPageModel->title }}</h1>
+                        <span class="divide d-block w-100 mt-xl-3 my-2"></span>
+                    </div>
+                    <div class="col-12">
+                        <p class="m-0 text-center">
+                            {{ Str::of(__('de l\'appéritif au repas, en solo, entre amis ou en familles, découvrez nos délicieuses recettes.'))->ucFirst() }}
+                        </p>
+                    </div>
+                    <div class="col-12 d-flex justify-content-center my-4">
+                        <img class="ranges-img" src="{{ Vite::asset('resources/assets/images/ranges/let-him-cook.png') }}"
+                            title="{{ Str::of(__('le plaisir de cuisiner'))->ucFirst() }}" alt="{{ Str::of(__('femme cuisine'))->ucFirst() }}">
+                    </div>
+                </div>
+                <div class="ranges-flexwrap d-none d-xl-flex justify-content-center align-items-center flex-row flex-wrap">
+                    @foreach ($rangeModels as $rangeModel)
+                        <div class="col-4 mb-5">
+                            <div class="card position-relative mx-auto border-0 bg-transparent p-4">
+                                <a class="text-decoration-none stretched-link" href="#">
+                                    <img class="position-absolute top-50 start-50 translate-middle w-100 h-100 z-n1"
+                                        src="{{ Vite::asset('resources/assets/images/global/bg-white-desktop.png') }}"
+                                        title="{{ __('Visuel servant de fond') }}" alt="{{ __('fond blanc') }}">
+                                    <div class="card-header d-flex justify-content-center align-items-center border-0 bg-transparent p-0">
+                                        <p class="text-dark f-readex-pro m-0 p-0 text-center">
+                                            {{ Str::of($rangeModel->title)->limit(50) }}
+                                        </p>
+                                    </div>
+                                    <div class="card-body position-relative p-0">
+                                        <div
+                                            class="position-absolute w-100 h-100 visibility-hidden text-dark start-0 top-0 bg-white bg-opacity-75 p-2 opacity-0">
+                                            {{ Str::of($rangeModel->tagline)->limit(255) }}
+                                        </div>
+                                        <img src="{{ asset($rangeModel->picture_thumbnail) }}"
+                                            title="{{ $rangeModel->picture_thumbnail_title }}" alt="{{ $rangeModel->picture_thumbnail_alt }}">
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+            <div class="ranges-swiper container-fluid position-relative d-xl-none px-4">
+                <div class="swiper swiper-ranges overflow-hidden py-4" id="swiper-ranges">
+                    <img class="position-absolute top-50 start-50 translate-middle w-100 h-100 z-n1 d-xl-none"
+                        src="{{ Vite::asset('resources/assets/images/global/bg-white-desktop.png') }}"
+                        title="{{ __('Visuel servant de fond') }}" alt="{{ __('fond blanc') }}">
+                    <div class="swiper-wrapper">
+                        @foreach ($rangeModels as $key => $rangeModel)
+                            <div class="swiper-slide">
+                                <div class="swiper-slide-content d-flex flex-column justify-content-center align-items-center m-xl-0 mx-auto">
+                                    <div
+                                        class="swiper-slide-content-details @if (!$loop->first) swiper-slide-content-translate @endif position-relative z-1">
+                                        <img class="position-absolute top-50 start-50 translate-middle w-100 h-100 z-n1 d-none d-xl-block"
+                                            src="{{ Vite::asset('resources/assets/images/global/bg-white-desktop.png') }}"
+                                            title="{{ __('Visuel servant de fond') }}" alt="{{ __('fond blanc') }}">
+                                        <p class="text-primary fs-5 f-readex-pro p-xl-2 p-xxl-4 m-0 mb-3 text-center">
+                                            {{ Str::of($rangeModel->title)->limit(30) }}
+                                        </p>
+                                    </div>
+                                    <img src="{{ asset($rangeModel->picture_thumbnail) }}" title="{{ $rangeModel->picture_thumbnail_title }}"
+                                        alt="{{ $rangeModel->picture_thumbnail_alt }}">
+                                    <div class="w-100 d-xl-none">
+                                        <a class="w-fit" href="#">{{ __('> En savoir +') }}</a>
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                    <div
+                        class="navigation d-flex justify-content-evenly justify-content-xl-between align-items-center p-xl-4 mb-2 mt-3 flex-row p-0">
+                        <div class="swiper-button-prev rounded-circle" role="button">
+                            <img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
+                                title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
+                        </div>
+                        <div class="swiper-button-next rounded-circle" role="button">
+                            <img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
+                                title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p class="my-4 px-5 text-center">{{ __('Retrouvez-nous au rayon traiteur traditionnel de vos magasins préférés.') }}</p>
+    </section>
+@endsection
diff --git a/routes/web-fo.php b/routes/web-fo.php
index 4b8493e..bd4413e 100644
--- a/routes/web-fo.php
+++ b/routes/web-fo.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Fo\RangeController;
 use App\Http\Controllers\Fo\StaticPageController;
 use Illuminate\Support\Facades\Route;
 
@@ -10,6 +11,9 @@ Route::middleware(['throttle:credentials'])
         Route::get('/explorateur-et-gastronome', [StaticPageController::class, 'explorer'])->name('explorer');
         Route::view('/bs-demo', 'fo.pages.bs-demo')->name('bs-demo');
 
+        // * RANGES
+        Route::get('/gammes', [RangeController::class, 'index'])->name('ranges.index');
+
         // * CONTACT
         Route::get('/contact', [StaticPageController::class, 'contact'])->name('contact.show');
         Route::post('/contact-form', [StaticPageController::class, 'contactForm'])->name('contact.store');