diff --git a/app/Http/Controllers/GammesController.php b/app/Http/Controllers/GammesController.php
new file mode 100644
index 0000000..bd870cf
--- /dev/null
+++ b/app/Http/Controllers/GammesController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Gamme;
+use App\Models\Product;
+
+class GammesController extends Controller
+{
+    public function index()
+    {
+        $gammes = Gamme::whereNull('parent_gamme_id')->orderBy('title')->get();
+        $nb_gammes = $gammes->count();
+
+        return view('front.gammes.index', compact('gammes', 'nb_gammes'));
+    }
+
+    // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClass
+    public function show(Gamme $gamme)
+    {
+        $products = Product::where('gamme_id', $gamme->id)->orderBy('name')->get();
+
+        return view('front.gammes.show', compact('gamme', 'products'));
+    }
+}
diff --git a/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
new file mode 100644
index 0000000..ed0a053
--- /dev/null
+++ b/app/Http/Controllers/ProductsController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Gamme;
+use App\Models\Product;
+
+class ProductsController extends Controller
+{
+    // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClass
+    public function show(Gamme $gamme, Product $product)
+    {
+        dd($product);
+        $product = Product::whereSlug($product->slug)->first();
+
+        return view('front.product', compact('product', 'gamme'));
+    }
+}
diff --git a/app/Http/Middleware/InitVarsGlobals.php b/app/Http/Middleware/InitVarsGlobals.php
index 5a45b08..0231fbd 100644
--- a/app/Http/Middleware/InitVarsGlobals.php
+++ b/app/Http/Middleware/InitVarsGlobals.php
@@ -62,9 +62,6 @@ class InitVarsGlobals
         $title_foodBloc2 = Title::where('page', Page::foodBloc2()->value)->first();
         $title_newsPosts = Title::where('page', Page::newsPosts()->value)->first();
 
-        // GAMMES, SOUS-GAMMES, PRODUITS
-        $gammes = Gamme::whereNull('parent_gamme_id')->get();
-
         View::share('encart_home', $encart_home);
         View::share('encart_marqueHeader', $encart_marqueHeader);
         View::share('encart_marqueBloc2', $encart_marqueBloc2);
@@ -91,9 +88,6 @@ class InitVarsGlobals
         View::share('title_foodBloc2', $title_foodBloc2);
         View::share('title_newsPosts', $title_newsPosts);
 
-        View::share('gammes', $gammes);
-        View::share('nb_gammes', $gammes->count());
-
         return $next($request);
     }
 }
diff --git a/app/Models/Product.php b/app/Models/Product.php
new file mode 100644
index 0000000..b44ea9a
--- /dev/null
+++ b/app/Models/Product.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models;
+
+use App\Lib\Utils;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Product extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'gamme_id',
+        'sous_gamme_id',
+        'name',
+        'slug',
+        'description',
+        'picture',
+        'alt_text_picture',
+        'is_published',
+        'is_on_top',
+        'is_halal',
+        'is_food_service',
+        'seo_title',
+        'seo_description',
+    ];
+
+    protected static function boot()
+    {
+        static::creating(function (Product $product) {
+            if ($product->picture) {
+                $product->picture = Utils::storeImage($product->picture, $product->getTable());
+            }
+            if ($product->banner) {
+                $product->banner = Utils::storeImage($product->banner, $product->getTable());
+            }
+        });
+
+        static::updating(function (Product $product) {
+            if ($product->picture) {
+                $product->picture = Utils::storeImage($product->picture, $product->getTable());
+            }
+            if ($product->banner) {
+                $product->banner = Utils::storeImage($product->banner, $product->getTable());
+            }
+        });
+        parent::boot();
+    }
+}
diff --git a/database/factories/GammeFactory.php b/database/factories/GammeFactory.php
index 4192ca3..d37b5c5 100644
--- a/database/factories/GammeFactory.php
+++ b/database/factories/GammeFactory.php
@@ -15,7 +15,7 @@ class GammeFactory extends Factory
      */
     public function definition()
     {
-        $title = $this->faker->word();
+        $title = $this->faker->text(10) . rand(1, 100);
 
         return [
             'parent_gamme_id' => null,
diff --git a/database/factories/PostFactory.php b/database/factories/PostFactory.php
index eddae23..f518f59 100644
--- a/database/factories/PostFactory.php
+++ b/database/factories/PostFactory.php
@@ -24,7 +24,7 @@ class PostFactory extends Factory
             'alt_text_picture_news' => $this->faker->sentence(10),
             'date_start' => Carbon::now(),
             'date_end' => Carbon::now()->addDays(2),
-            'on_top' => false
+            'on_top' => true
         ];
     }
 }
diff --git a/database/factories/ProductFactory.php b/database/factories/ProductFactory.php
new file mode 100644
index 0000000..1869309
--- /dev/null
+++ b/database/factories/ProductFactory.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Str;
+use SplFileInfo;
+
+class ProductFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array
+     */
+    public function definition()
+    {
+        $name = $this->faker->text(10) . rand(1, 100);
+
+        return [
+            'name' => $name,
+            'slug' => Str::slug($name),
+            'description' => $this->faker->paragraph(),
+            'picture' => new SplFileInfo(resource_path('assets/images/product_sample_01.png')),
+            'alt_text_picture' => $this->faker->sentence(10),
+            'is_published' => true,
+            'is_on_top' => false,
+            'is_food_service' => false,
+            'seo_title' => $this->faker->text(5),
+            'seo_description' => $this->faker->sentence(20),
+        ];
+    }
+}
diff --git a/database/factories/SliderFactory.php b/database/factories/SliderFactory.php
index 01a6873..b00e373 100644
--- a/database/factories/SliderFactory.php
+++ b/database/factories/SliderFactory.php
@@ -29,7 +29,7 @@ class SliderFactory extends Factory
             'label' => $label,
             'slug' => Str::slug($label),
             'commentaire' => $this->faker->realText(50),
-            'published' => false
+            'published' => true
         ];
     }
 }
diff --git a/database/migrations/2021_12_20_145730_create_gammes_table.php b/database/migrations/2021_12_20_145730_create_gammes_table.php
index ac533b0..f41c324 100644
--- a/database/migrations/2021_12_20_145730_create_gammes_table.php
+++ b/database/migrations/2021_12_20_145730_create_gammes_table.php
@@ -15,10 +15,10 @@ class CreateGammesTable extends Migration
     {
         Schema::create('gammes', function (Blueprint $table) {
             $table->id();
-            $table->smallInteger('parent_gamme_id')->nullable();
+            $table->foreignId('parent_gamme_id')->nullable();
             $table->string('title');
             $table->string('slug')->unique();
-            $table->string('text');
+            $table->text('text');
             $table->string('color')->nullable();
             $table->string('picture')->nullable();
             $table->string('alt_text_picture')->nullable();
diff --git a/database/migrations/2021_12_22_100045_create_products_table.php b/database/migrations/2021_12_22_100045_create_products_table.php
new file mode 100644
index 0000000..879dfdf
--- /dev/null
+++ b/database/migrations/2021_12_22_100045_create_products_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateProductsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('products', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('gamme_id');
+            $table->foreignId('sous_gamme_id')->nullable();
+            $table->string('name');
+            $table->string('slug')->unique();
+            $table->text('description');
+            $table->string('picture')->nullable();
+            $table->string('alt_text_picture')->nullable();
+            $table->boolean('is_published');
+            $table->boolean('is_on_top');
+            $table->boolean('is_food_service');
+            $table->string('seo_title');
+            $table->string('seo_description');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('products');
+    }
+}
diff --git a/database/seeders/GammesSeeder.php b/database/seeders/GammesSeeder.php
index cbbb895..ac7b6bd 100644
--- a/database/seeders/GammesSeeder.php
+++ b/database/seeders/GammesSeeder.php
@@ -3,6 +3,7 @@
 namespace Database\Seeders;
 
 use App\Models\Gamme;
+use App\Models\Product;
 use Illuminate\Database\Seeder;
 use SplFileInfo;
 use Illuminate\Support\Str;
@@ -18,7 +19,7 @@ class GammesSeeder extends Seeder
     {
         $tabGammes = [];
 
-        Gamme::factory(5)->create()
+        Gamme::factory(4)->create()
             ->each(function (Gamme $gamme) use (&$tabGammes) {
                 array_push($tabGammes, $gamme->color);
             });
@@ -37,7 +38,33 @@ class GammesSeeder extends Seeder
                 $gamme->banner = new SplFileInfo(resource_path('assets/images/cat_bckg.jpg'));
                 $gamme->alt_text_banner = 'redus faros' . $id . $i;
                 $gamme->save();
+
+                Product::factory(rand(1, 10))->make()
+                    ->each(function (Product $product) use (&$gamme) {
+                        $product->gamme_id = $gamme->parent_gamme_id;
+                        $product->sous_gamme_id = $gamme->id;
+                        $product->save();
+                    });
             }
         }
+        $gamme = new Gamme();
+        $id = $gamme->id;
+        $gamme->parent_gamme_id = null;
+        $gamme->title = 'lorem ipsum' . $id . $i;
+        $gamme->slug = Str::slug($gamme->title);
+        $gamme->text = 'lorem gurus et ipsum set doloris' . $id . $i;
+        $gamme->color = '#ffa58' . rand(1, 9);
+        $gamme->picture = new SplFileInfo(resource_path('assets/images/cookrange.jpg'));
+        $gamme->alt_text_picture = 'lorem utus garis' . $id . $i;
+        $gamme->banner = new SplFileInfo(resource_path('assets/images/cat_bckg.jpg'));
+        $gamme->alt_text_banner = 'redus faros' . $id . $i;
+        $gamme->save();
+
+        Product::factory(4)->make()
+            ->each(function (Product $product) use (&$gamme) {
+                $product->gamme_id = $gamme->id;
+                $product->sous_gamme_id = null;
+                $product->save();
+            });
     }
 }
diff --git a/database/seeders/ProductsSeeder.php b/database/seeders/ProductsSeeder.php
new file mode 100644
index 0000000..640a254
--- /dev/null
+++ b/database/seeders/ProductsSeeder.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Product;
+use Illuminate\Database\Seeder;
+
+class ProductsSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        Product::factory(20)->create();
+    }
+}
diff --git a/public/assets/images/product_sample_01.png b/public/assets/images/product_sample_01.png
new file mode 100644
index 0000000..cae3742
Binary files /dev/null and b/public/assets/images/product_sample_01.png differ
diff --git a/public/css/preload-front.css b/public/css/preload-front.css
index 9269bd5..c8eae28 100644
--- a/public/css/preload-front.css
+++ b/public/css/preload-front.css
@@ -4363,6 +4363,14 @@ ul.infos span{
   position:absolute;
 }
 
+.p-abs.dual-center{
+  padding-left:0 !important;
+  padding-right:0 !important;
+  left:50% !important;
+  top:50% !important;
+  transform:translate(-50%, -50%) !important;
+}
+
 .color-red{
   color:#ff0400;
 }
@@ -5330,14 +5338,50 @@ input[type=text]{
     align-items:initial;
   }
 
-  .gamme-card:nth-child(n),
-.gammes-6 .gamme-card:nth-child(n),
-.gammes-7 .gamme-card:nth-child(n){
+  .gamme-card:nth-child(n){
     width:32%;
     max-width:32%;
   }
 
-  .gamme-card:nth-child(4), .gamme-card:nth-child(5), .gamme-card:nth-child(9), .gamme-card:nth-child(10){
+  .gammes-3 .gamme-card:nth-child(1), .gammes-3 .gamme-card:nth-child(2), .gammes-3 .gamme-card:nth-child(3), .gammes-3 .gamme-card:nth-child(4), .gammes-3 .gamme-card:nth-child(5), .gammes-3 .gamme-card:nth-child(6), .gammes-3 .gamme-card:nth-child(7), .gammes-3 .gamme-card:nth-child(8), .gammes-3 .gamme-card:nth-child(9),
+.gammes-6 .gamme-card:nth-child(1),
+.gammes-6 .gamme-card:nth-child(2),
+.gammes-6 .gamme-card:nth-child(3),
+.gammes-6 .gamme-card:nth-child(4),
+.gammes-6 .gamme-card:nth-child(5),
+.gammes-6 .gamme-card:nth-child(6),
+.gammes-6 .gamme-card:nth-child(7),
+.gammes-6 .gamme-card:nth-child(8),
+.gammes-6 .gamme-card:nth-child(9),
+.gammes-9 .gamme-card:nth-child(1),
+.gammes-9 .gamme-card:nth-child(2),
+.gammes-9 .gamme-card:nth-child(3),
+.gammes-9 .gamme-card:nth-child(4),
+.gammes-9 .gamme-card:nth-child(5),
+.gammes-9 .gamme-card:nth-child(6),
+.gammes-9 .gamme-card:nth-child(7),
+.gammes-9 .gamme-card:nth-child(8),
+.gammes-9 .gamme-card:nth-child(9){
+    width:32%;
+    max-width:32%;
+  }
+
+  .gammes-1 .gamme-card:nth-child(1), .gammes-1 .gamme-card:nth-child(2), .gammes-1 .gamme-card:nth-child(3), .gammes-1 .gamme-card:nth-child(4),
+.gammes-2 .gamme-card:nth-child(1),
+.gammes-2 .gamme-card:nth-child(2),
+.gammes-2 .gamme-card:nth-child(3),
+.gammes-2 .gamme-card:nth-child(4),
+.gammes-4 .gamme-card:nth-child(1),
+.gammes-4 .gamme-card:nth-child(2),
+.gammes-4 .gamme-card:nth-child(3),
+.gammes-4 .gamme-card:nth-child(4){
+    width:49%;
+    max-width:49%;
+  }
+
+  .gammes-5 .gamme-card:nth-child(4), .gammes-5 .gamme-card:nth-child(5),
+.gammes-8 .gamme-card:nth-child(4),
+.gammes-8 .gamme-card:nth-child(5){
     width:49%;
     max-width:49%;
   }
@@ -5349,6 +5393,9 @@ input[type=text]{
 
   #list .section-header .content{
     position:absolute;
+    width:100%;
+    padding-top:1rem;
+    padding-bottom:1rem;
   }
 
   #posts > img{
diff --git a/resources/assets/images/product_sample_01.png b/resources/assets/images/product_sample_01.png
new file mode 100644
index 0000000..cae3742
Binary files /dev/null and b/resources/assets/images/product_sample_01.png differ
diff --git a/resources/sass/frontend/_list.scss b/resources/sass/frontend/_list.scss
index 34f2d0a..e293c8c 100644
--- a/resources/sass/frontend/_list.scss
+++ b/resources/sass/frontend/_list.scss
@@ -262,29 +262,62 @@
     .posts-list {
         align-items: initial;
     }
-    .gamme-card,
-    .gammes-6 .gamme-card,
-    .gammes-7 .gamme-card {
+    .gamme-card {
         &:nth-child(n) {
             width: 32%;
             max-width: 32%;
         }
     }
-    .gamme-card {
-        &:nth-child(4),
-        &:nth-child(5),
-        &:nth-child(9),
-        &:nth-child(10) {
-            width: 49%;
-            max-width: 49%;
-        }
-    }
+    // .gamme-card {
+    //     &:nth-child(4),
+    //     &:nth-child(5),
+    //     &:nth-child(9),
+    //     &:nth-child(10) {
+    //         width: 49%;
+    //         max-width: 49%;
+    //     }
+    // }
     // .gammes-6 .gamme-card {
     //     &:nth-child(n) {
     //         width: 32%;
     //         max-width: 32%;
     //     }
     // }
+    .gammes-3 .gamme-card,
+    .gammes-6 .gamme-card,
+    .gammes-9 .gamme-card {
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3),
+        &:nth-child(4),
+        &:nth-child(5),
+        &:nth-child(6),
+        &:nth-child(7),
+        &:nth-child(8),
+        &:nth-child(9) {
+            width: 32%;
+            max-width: 32%;
+        }
+    }
+    .gammes-1 .gamme-card,
+    .gammes-2 .gamme-card,
+    .gammes-4 .gamme-card {
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3),
+        &:nth-child(4) {
+            width: 49%;
+            max-width: 49%;
+        }
+    }
+    .gammes-5 .gamme-card,
+    .gammes-8 .gamme-card {
+        &:nth-child(4),
+        &:nth-child(5) {
+            width: 49%;
+            max-width: 49%;
+        }
+    }
     .gammes-7 .gamme-card {
         &:nth-child(1),
         &:nth-child(2),
@@ -308,6 +341,9 @@
         .section-header {
             .content {
                 position: absolute;
+                width: 100%;
+                padding-top: 1rem;
+                padding-bottom: 1rem;
             }
         }
     }
diff --git a/resources/sass/frontend/_utils.scss b/resources/sass/frontend/_utils.scss
index 2aeafda..d676960 100644
--- a/resources/sass/frontend/_utils.scss
+++ b/resources/sass/frontend/_utils.scss
@@ -52,6 +52,13 @@
 .p-abs {
     position: absolute;
 }
+.p-abs.dual-center {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    left: 50% !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+}
 
 .color-red {
     color: $color-second;
diff --git a/resources/views/front/categorie.blade.php b/resources/views/front/categorie.blade.php
deleted file mode 100644
index d94c2e9..0000000
--- a/resources/views/front/categorie.blade.php
+++ /dev/null
@@ -1,145 +0,0 @@
-@extends('layouts.frontend')
-@section('title', __('Accueil'))
-@section('description', __("Découvrez DOUX, des produits de volailles françaises."))
-
-@section('content')
-
-<section class="jumbotron">
-    <p class="maintitle ttu animate__animated fadeIn animate__slow">Elaboré cuits
-        <!-- <span class="title-icon"><img src="{{ asset('assets/images/') }}title-icon.png" alt="icone"></span> -->
-    </p>
-    <img class="img-zoom" src="{{ asset('assets/images/entete_sous_gammes.jpg') }}" alt="">
-    <div class="banner">
-        <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
-            <defs>
-                <style>
-                    .cls-1 {
-                        fill: #ffffff;
-                    }
-
-                    .cls-2 {
-                        fill: transparent;
-                    }
-                </style>
-            </defs>
-            <path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
-            <path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
-        </svg>
-    </div>
-</section>
-
-<section class="container">
-    <div class="wrapper">
-        <div class="header-title align-center p-rel">
-            <div class="breadcrumb is-flex">
-                <a href="{{ route('gammes') }}" class="link">Gammes</a>
-            </div>
-            <!-- <h1 class="align-center">Qui sommes-nous ?</h1> -->
-
-            <h1 class="align-center animate__animated fadeInUp animate__slow"><i class="mascotte"></i>Nos produits de la gammes</h1>
-        </div>
-        <!-- <h2 class="align-center sectiontitle">Nos produits de la gammes</h2> -->
-        <p class="align-center">Des produits incontournables, Authentiques et Innovants !</p>
-    </div>
-</section>
-
-<section id="list">
-    <div class="wrapper align-center">
-        <div class="is-green container">
-            <header class="section-header p-rel">
-                <div class="content p-abs">
-                    <h3 class="title ttu">Gamme family</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-                </div>
-                <img src="{{ asset('assets/images/cat_bckg.jpg') }}" alt="">
-            </header>
-            <div class="is-flex">
-                <div class="product-card align-center">
-                    <!-- <span class="label fresh"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Produit 1</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-                <div class="product-card align-center">
-                    <!-- <span class="label fresh"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Bouchées de Volaille</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-                <div class="product-card align-center">
-                    <!-- <span class="label fresh"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Bouchées de Volaille</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div class="is-pink container">
-            <header class="section-header p-rel">
-                <div class="content p-abs">
-                    <h3 class="title ttu">Gamme Little Treats</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-                </div>
-                <img src="{{ asset('assets/images/cat_bckg.jpg') }}" alt="">
-            </header>
-            <div class="is-flex">
-                <div class="product-card align-center">
-                    <!-- <span class="label fresh"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Cordon bleu de Volaille</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-                <div class="product-card align-center">
-                    <!-- <span class="label fresh"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Nuggets de volaille</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-                <div class="product-card align-center">
-                    <!-- <span class="label frozen"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Milanèse de Volaille</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-                <div class="product-card align-center">
-                    <!-- <span class="label fresh"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Escalope Viennoise de Volaille</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-                <div class="product-card align-center">
-                    <!-- <span class="label frozen"></span> -->
-                    <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
-                    <h3 class="product-card__title">Croc de Volaille façon Bolognaise</h3>
-                    <a href="{{ route('product') }}"></a>
-                    <span class="overlay">
-                        <span>Découvrir</span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-@endsection
\ No newline at end of file
diff --git a/resources/views/front/gammes.blade.php b/resources/views/front/gammes/index.blade.php
similarity index 97%
rename from resources/views/front/gammes.blade.php
rename to resources/views/front/gammes/index.blade.php
index 7bac939..f0edc43 100644
--- a/resources/views/front/gammes.blade.php
+++ b/resources/views/front/gammes/index.blade.php
@@ -45,7 +45,7 @@
                 @foreach ($gammes as $gamme)
                 <div class="gamme-card align-center">
                     <img src="{{ asset($gamme->picture) }}" alt="{{ $gamme->alt_text_picture}}">
-                    <a href="{{ route('categories') }}"></a>
+                    <a href="{{ route('gammes.show', ['gamme' => $gamme->slug]) }}"></a>
                     <span class="overlay" style="background-color: {{ $gamme->rgbaColor}};">
                         <span>{{ $gamme->title}}</span>
                     </span>
diff --git a/resources/views/front/gammes/product.blade.php b/resources/views/front/gammes/product.blade.php
new file mode 100644
index 0000000..add2379
--- /dev/null
+++ b/resources/views/front/gammes/product.blade.php
@@ -0,0 +1,8 @@
+<div class="product-card align-center">
+    <img src="{{ asset($product->picture) }}" alt="{{ $product->alt_text_picture }}">
+    <h3 class="product-card__title">{{ $product->name }}</h3>
+    <a href="{{ route('product.show', ['gamme' => $gamme->slug , 'productSlug' => $product->slug]) }}"></a>
+    <span class="overlay" style="background-color: {{ $gamme->rgbaColor}};">
+        <span>Découvrir</span>
+    </span>
+</div>
\ No newline at end of file
diff --git a/resources/views/front/gammes/products-list.blade.php b/resources/views/front/gammes/products-list.blade.php
new file mode 100644
index 0000000..cb86fea
--- /dev/null
+++ b/resources/views/front/gammes/products-list.blade.php
@@ -0,0 +1,11 @@
+<div class="is-flex">
+    @foreach ($products as $product)
+    @if (isset($childGamme))
+    @if ($product->sous_gamme_id === $childGamme->id)
+    @include('front.gammes.product')
+    @endif
+    @elseif ($gamme && $product->gamme_id === $gamme->id)
+    @include('front.gammes.product')
+    @endif
+    @endforeach
+</div>
\ No newline at end of file
diff --git a/resources/views/front/gammes/show.blade.php b/resources/views/front/gammes/show.blade.php
new file mode 100644
index 0000000..152ae01
--- /dev/null
+++ b/resources/views/front/gammes/show.blade.php
@@ -0,0 +1,59 @@
+@extends('layouts.frontend')
+@section('title', __('Accueil'))
+@section('description', __("Découvrez DOUX, des produits de volailles françaises."))
+
+@section('content')
+
+<section class="jumbotron">
+    <p class="maintitle ttu animate__animated fadeIn animate__slow">{{ $gamme->title }}</p>
+    <img class="img-zoom" src="{{ asset('assets/images/entete_sous_gammes.jpg') }}" alt="">
+    <div class="banner">
+        <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
+            <defs>
+                <style>
+                    .cls-1 {
+                        fill: #ffffff;
+                    }
+
+                    .cls-2 {
+                        fill: transparent;
+                    }
+                </style>
+            </defs>
+            <path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
+            <path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
+        </svg>
+    </div>
+</section>
+
+<section class="container">
+    <div class="wrapper">
+        <div class="header-title align-center p-rel">
+            <div class="breadcrumb is-flex">
+                <a href="{{ route('gammes.index') }}" class="link">Gammes</a>
+            </div>
+            <h1 class="align-center animate__animated fadeInUp animate__slow"><i class="mascotte"></i>Nos produits de la gammes</h1>
+        </div>
+        <p class="align-center">Des produits incontournables, Authentiques et Innovants !</p>
+    </div>
+</section>
+<section id="list">
+    <div class="wrapper align-center">
+        @if ( $gamme->childGammes->count() > 0 )
+        @foreach ($gamme->childGammes as $childGamme)
+        <header class="section-header p-rel">
+            <div class="content p-abs dual-center" style="background-color: {{ $childGamme->rgbaColor}};">
+                <h3 class="title ttu">{{ $childGamme->title }}</h3>
+                <p>{{ $childGamme->text }}</p>
+            </div>
+            <img src="{{ asset($childGamme->banner) }}" alt="{{ $childGamme->alt_text_banner }}">
+        </header>
+        @include('front.gammes.products-list')
+        @endforeach
+        @else
+        @include('front.gammes.products-list')
+        @endif
+    </div>
+</section>
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php
index 74d9e1a..34a8c30 100644
--- a/resources/views/front/home.blade.php
+++ b/resources/views/front/home.blade.php
@@ -72,7 +72,7 @@
             Découvrez tous nos produits à base de volaille.
         </h3>
         <p class="align-left">bloc texte, lorem ipsum...</p>
-        <a href="{{ route('products') }}" class="cta">Découvrir</a>
+        <a href="{{ route('gammes.index') }}" class="cta">Découvrir</a>
         <div class="products-list is-flex">
             <div class="product-item">
                 <img src="{{ asset('assets/images/image1.png') }}" alt="" />
diff --git a/resources/views/front/product.blade.php b/resources/views/front/product.blade.php
index 4b904a3..4abb8f0 100644
--- a/resources/views/front/product.blade.php
+++ b/resources/views/front/product.blade.php
@@ -5,7 +5,7 @@
 @section('content')
 
 <section class="jumbotron">
-    <p class="maintitle ttu animate__animated fadeIn animate__slow">Volailles entières
+    <p class="maintitle ttu animate__animated fadeIn animate__slow">{{ $gamme->title}}
     </p>
     <img class="img-zoom" src="{{ asset('assets/images/volailles.jpg') }}" alt="">
     <div class="banner">
@@ -26,20 +26,21 @@
         </svg>
     </div>
 </section>
-
+@php
+    dd($product);
+@endphp
 <section class="container">
     <div class="wrapper">
         <div class="header-title align-center p-rel">
             <div class="breadcrumb is-flex">
-                <a href="{{ route('gammes') }}" class="link">Gammes</a> - <a href="{{ route('products') }}" class="link">Produits de la gamme</a> - Volailles entières</a>
-                <!-- <span>Gammes - Produits de la gamme - Volailles entières</span> -->
+                <a href="{{ route('gammes.index') }}" class="link">Gammes</a> - <a href="{{ route('gammes.show', ['gamme' => $gamme->slug]) }}" class="link">Produits de la gamme</a>
             </div>
 
-            <h1 class="animate__animated fadeInUp animate__slow"><i class="mascotte"></i>Le produit 1</h1>
+            <h1 class="animate__animated fadeInUp animate__slow"><i class="mascotte"></i>{{ $product->name}}</h1>
         </div>
         <div class="is-flex">
             <div class="w50">
-                <img src="{{ asset('assets/images/doux-halal.jpg') }}" alt="photo" class="animate__animated fadeInLeft animate__slow">
+                <img src="{{ asset($product->picture) }}" alt="{{ asset($product->alt_text_picture) }}" class="animate__animated fadeInLeft animate__slow">
                 <ul class="infos animate__animated fadeInLeft animate__slow">
                     <li><span><img src="{{ asset('assets/images/four.png') }}" alt=""></span>15-20 min 180°C</li>
                     <li><span><img src=" {{ asset('assets/images/friteuse.png') }}" alt=""></span>15-20 min 180°C</li>
@@ -47,9 +48,8 @@
                 </ul>
             </div>
             <div class="w50">
-                <h3 class="color-yellow animate__animated fadeInRight animate__slow">Lorem ipsum</h3>
-                <p class="animate__animated fadeInRight animate__slow">Lorem ip sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
-                <p class="animate__animated fadeInRight animate__slow">Lorem ip sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam</p>
+                {{-- <h3 class="color-yellow animate__animated fadeInRight animate__slow">Lorem ipsum</h3> --}}
+                <p class="animate__animated fadeInRight animate__slow">{{ $product->description}}</p>
                 <span class="best p-rel animate__animated fadeInRight animate__slow">
                     <span>Les +</span>
                     <span>Produit</span>
diff --git a/resources/views/layouts/frontend/app-header.blade.php b/resources/views/layouts/frontend/app-header.blade.php
index 210b527..aee0c09 100644
--- a/resources/views/layouts/frontend/app-header.blade.php
+++ b/resources/views/layouts/frontend/app-header.blade.php
@@ -31,7 +31,7 @@
                         <path class="cnt" d="M.85,16.34,7.34,9.17.82,2.07C4.21.91,5.86,2.13,11,9.15,5.8,16.53,3.87,18,.85,16.34Z" />
                     </svg>
                 </a>
-                <a href="{{ route('gammes') }}" class="scroller menu__link">
+                <a href="{{ route('gammes.index') }}" class="scroller menu__link">
                     <li class="menu__item">
                         Produits
                     </li>
diff --git a/routes/web.php b/routes/web.php
index f8f25f0..0357331 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -23,6 +23,8 @@ use App\Http\Controllers\Bo\SlidesController;
 use App\Http\Controllers\Bo\TextsController;
 use App\Http\Controllers\Bo\TitlesController;
 use App\Http\Controllers\HomeController as ControllersHomeController;
+use App\Http\Controllers\GammesController as ControllersGammesController;
+use App\Http\Controllers\ProductsController as ControllersProductsController;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Facades\Auth;
 
@@ -103,12 +105,15 @@ Route::middleware(['init-vars'])
     ->group(
         function () {
             Route::get('/', [ControllersHomeController::class, 'index'])->name('home');
-            Route::view('/la-marque', 'front.a-propos')->name('wasup');
-            Route::view('/le-produit', 'front.product')->name('product');
-            Route::view('/les-produits', 'front.products-list')->name('products');
-            Route::view('/les-gammes', 'front.gammes')->name('gammes');
-            Route::view('/les-categories', 'front.categorie')->name('categories');
-            Route::view('/les-actualites', 'front.news')->name('news');
+            Route::view('/notre-marque', 'front.a-propos')->name('wasup');
+            // Route::view('/le-produit', 'front.product')->name('product');
+            // Route::view('/les-produits', 'front.products-list')->name('products');
+            // Route::view('/les-gammes', 'front.gammes')->name('gammes');
+            Route::get('/nos-gammes', [ControllersGammesController::class, 'index'])->name('gammes.index');
+            Route::get('/gamme/{gamme:slug}', [ControllersGammesController::class, 'show'])->name('gammes.show');
+            Route::get('/produit/{gamme:slug}/{productSlug}', [ControllersProductsController::class, 'show'])->name('product.show');
+            // Route::view('/les-categories', 'front.categorie')->name('categories');
+            Route::view('/nos-actualites', 'front.news')->name('news');
             Route::view('/food-service', 'front.food-service')->name('food');
             Route::view('/mentions-legales', 'front.legals')->name('cgu');
             Route::view('/charte-confidentialite', 'front.policy')->name('policy');