diff --git a/app/Console/Commands/FetchMetaData.php b/app/Console/Commands/FetchMetaData.php
index 729c7a5..5bbffba 100644
--- a/app/Console/Commands/FetchMetaData.php
+++ b/app/Console/Commands/FetchMetaData.php
@@ -7,6 +7,7 @@
 use App\Jobs\ProcessElficTraits;
 use App\Jobs\ProcessKlingonName;
 use App\Jobs\ProcessLitteratureReferences;
+use App\Jobs\ProcessMixte;
 use App\Jobs\ProcessOrigins;
 use App\Jobs\ProcessPersonality;
 use App\Jobs\ProcessSimilarNames;
@@ -70,6 +71,10 @@ public function handle(): void
             if (is_null($name->klingon_translation)) {
                 //ProcessKlingonName::dispatch($name);
             }
+
+            if (is_null($name->unisex)) {
+                ProcessMixte::dispatch($name);
+            }
         }
     }
 }
diff --git a/app/Http/Controllers/FemaleNameController.php b/app/Http/Controllers/FemaleNameController.php
new file mode 100644
index 0000000..0e370d1
--- /dev/null
+++ b/app/Http/Controllers/FemaleNameController.php
@@ -0,0 +1,96 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Helpers\StringHelper;
+use App\Http\ViewModels\Names\AllNamesViewModel;
+use App\Http\ViewModels\Names\FemaleNamesViewModel;
+use App\Http\ViewModels\Names\MaleNamesViewModel;
+use App\Http\ViewModels\Names\NameViewModel;
+use App\Models\Name;
+use Illuminate\Http\Request;
+use Illuminate\Pagination\Paginator;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Str;
+use Illuminate\View\View;
+
+class FemaleNameController extends Controller
+{
+    public function index(Request $request): View
+    {
+        // get the page parameter from the url
+        $requestedPage = $request->query('page') ?? 1;
+
+        $letters = Cache::remember('all-letters-female', 604800, function () {
+            return FemaleNamesViewModel::index();
+        });
+
+        Paginator::currentPageResolver(function () use ($requestedPage) {
+            return $requestedPage;
+        });
+
+        $namesPagination = Cache::remember('all-names-female-page-'.$requestedPage, 604800, function () {
+            return Name::where('name', '!=', '_PRENOMS_RARES')
+                ->where('gender', 'female')
+                ->orderBy('name', 'asc')
+                ->paginate(40);
+        });
+
+        $names = $namesPagination
+            ->map(fn (Name $name) => [
+                'id' => $name->id,
+                'name' => StringHelper::getProperName($name->name),
+                'avatar' => $name->avatar,
+                'url' => route('name.show', [
+                    'id' => $name->id,
+                    'name' => StringHelper::sanitizeNameForURL($name->name),
+                ]),
+            ]);
+
+        return view('names.female.index', [
+            'letters' => $letters,
+            'names' => $names,
+            'namesPagination' => $namesPagination,
+        ]);
+    }
+
+    public function letter(Request $request): View
+    {
+        $requestedLetter = $request->attributes->get('letter');
+        $requestedPage = $request->query('page') ?? 1;
+
+        $letters = Cache::remember('all-letters-female', 604800, function () {
+            return FemaleNamesViewModel::index();
+        });
+
+        Paginator::currentPageResolver(function () use ($requestedPage) {
+            return $requestedPage;
+        });
+
+        $namesPagination = Cache::remember('female-letter-'.$requestedLetter.'-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
+            return Name::where('name', '!=', '_PRENOMS_RARES')
+                ->where('gender', 'female')
+                ->where('name', 'like', $requestedLetter . '%')
+                ->orderBy('name', 'asc')
+                ->paginate(40);
+        });
+
+        $names = $namesPagination
+            ->map(fn (Name $name) => [
+                'id' => $name->id,
+                'name' => StringHelper::getProperName($name->name),
+                'avatar' => $name->avatar,
+                'url' => route('name.show', [
+                    'id' => $name->id,
+                    'name' => StringHelper::sanitizeNameForURL($name->name),
+                ]),
+            ]);
+
+        return view('names.female.letter', [
+            'letters' => $letters,
+            'names' => $names,
+            'namesPagination' => $namesPagination,
+            'activeLetter' => Str::ucfirst($requestedLetter),
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/MaleNameController.php b/app/Http/Controllers/MaleNameController.php
new file mode 100644
index 0000000..444346d
--- /dev/null
+++ b/app/Http/Controllers/MaleNameController.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Helpers\StringHelper;
+use App\Http\ViewModels\Names\AllNamesViewModel;
+use App\Http\ViewModels\Names\MaleNamesViewModel;
+use App\Http\ViewModels\Names\NameViewModel;
+use App\Models\Name;
+use Illuminate\Http\Request;
+use Illuminate\Pagination\Paginator;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Str;
+use Illuminate\View\View;
+
+class MaleNameController extends Controller
+{
+    public function index(Request $request): View
+    {
+        // get the page parameter from the url
+        $requestedPage = $request->query('page') ?? 1;
+
+        $letters = Cache::remember('all-letters-male', 604800, function () {
+            return MaleNamesViewModel::index();
+        });
+
+        Paginator::currentPageResolver(function () use ($requestedPage) {
+            return $requestedPage;
+        });
+
+        $namesPagination = Cache::remember('all-names-male-page-'.$requestedPage, 604800, function () {
+            return Name::where('name', '!=', '_PRENOMS_RARES')
+                ->where('gender', 'male')
+                ->orderBy('name', 'asc')
+                ->paginate(40);
+        });
+
+        $names = $namesPagination
+            ->map(fn (Name $name) => [
+                'id' => $name->id,
+                'name' => StringHelper::getProperName($name->name),
+                'avatar' => $name->avatar,
+                'url' => route('name.show', [
+                    'id' => $name->id,
+                    'name' => StringHelper::sanitizeNameForURL($name->name),
+                ]),
+            ]);
+
+        return view('names.male.index', [
+            'letters' => $letters,
+            'names' => $names,
+            'namesPagination' => $namesPagination,
+        ]);
+    }
+
+    public function letter(Request $request): View
+    {
+        $requestedLetter = $request->attributes->get('letter');
+        $requestedPage = $request->query('page') ?? 1;
+
+        $letters = Cache::remember('all-letters-male', 604800, function () {
+            return MaleNamesViewModel::index();
+        });
+
+        Paginator::currentPageResolver(function () use ($requestedPage) {
+            return $requestedPage;
+        });
+
+        $namesPagination = Cache::remember('male-letter-'.$requestedLetter.'-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
+            return Name::where('name', '!=', '_PRENOMS_RARES')
+                ->where('gender', 'male')
+                ->where('name', 'like', $requestedLetter . '%')
+                ->orderBy('name', 'asc')
+                ->paginate(40);
+        });
+
+        $names = $namesPagination
+            ->map(fn (Name $name) => [
+                'id' => $name->id,
+                'name' => StringHelper::getProperName($name->name),
+                'avatar' => $name->avatar,
+                'url' => route('name.show', [
+                    'id' => $name->id,
+                    'name' => StringHelper::sanitizeNameForURL($name->name),
+                ]),
+            ]);
+
+        return view('names.male.letter', [
+            'letters' => $letters,
+            'names' => $names,
+            'namesPagination' => $namesPagination,
+            'activeLetter' => Str::ucfirst($requestedLetter),
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/NameController.php b/app/Http/Controllers/NameController.php
index d40c390..689160b 100644
--- a/app/Http/Controllers/NameController.php
+++ b/app/Http/Controllers/NameController.php
@@ -2,13 +2,94 @@
 
 namespace App\Http\Controllers;
 
+use App\Helpers\StringHelper;
+use App\Http\ViewModels\Names\AllNamesViewModel;
 use App\Http\ViewModels\Names\NameViewModel;
+use App\Models\Name;
 use Illuminate\Http\Request;
+use Illuminate\Pagination\Paginator;
 use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Str;
 use Illuminate\View\View;
 
 class NameController extends Controller
 {
+    public function index(Request $request): View
+    {
+        // get the page parameter from the url
+        $requestedPage = $request->query('page') ?? 1;
+
+        $letters = Cache::remember('all-letters', 604800, function () {
+            return AllNamesViewModel::index();
+        });
+
+        Paginator::currentPageResolver(function () use ($requestedPage) {
+            return $requestedPage;
+        });
+
+        $namesPagination = Cache::remember('all-names-page-'.$requestedPage, 604800, function () {
+            return Name::where('name', '!=', '_PRENOMS_RARES')
+                ->orderBy('name', 'asc')
+                ->paginate(40);
+        });
+
+        $names = $namesPagination
+            ->map(fn (Name $name) => [
+                'id' => $name->id,
+                'name' => StringHelper::getProperName($name->name),
+                'avatar' => $name->avatar,
+                'url' => route('name.show', [
+                    'id' => $name->id,
+                    'name' => StringHelper::sanitizeNameForURL($name->name),
+                ]),
+            ]);
+
+        return view('names.index', [
+            'letters' => $letters,
+            'names' => $names,
+            'namesPagination' => $namesPagination,
+        ]);
+    }
+
+    public function letter(Request $request): View
+    {
+        $requestedLetter = $request->attributes->get('letter');
+        $requestedPage = $request->query('page') ?? 1;
+
+        $letters = Cache::remember('all-letters', 604800, function () {
+            return AllNamesViewModel::index();
+        });
+
+        Paginator::currentPageResolver(function () use ($requestedPage) {
+            return $requestedPage;
+        });
+
+        $namesPagination = Cache::remember('letter-'.$requestedLetter.'-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
+            return Name::where('name', '!=', '_PRENOMS_RARES')
+                ->where('name', 'like', $requestedLetter . '%')
+                ->orderBy('name', 'asc')
+                ->paginate(40);
+        });
+
+        $names = $namesPagination
+            ->map(fn (Name $name) => [
+                'id' => $name->id,
+                'name' => StringHelper::getProperName($name->name),
+                'avatar' => $name->avatar,
+                'url' => route('name.show', [
+                    'id' => $name->id,
+                    'name' => StringHelper::sanitizeNameForURL($name->name),
+                ]),
+            ]);
+
+        return view('names.letter', [
+            'letters' => $letters,
+            'names' => $names,
+            'namesPagination' => $namesPagination,
+            'activeLetter' => Str::ucfirst($requestedLetter),
+        ]);
+    }
+
     public function show(Request $request): View
     {
         $requestedName = $request->attributes->get('name');
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 2bfa4a2..bbcaa95 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -67,5 +67,6 @@ class Kernel extends HttpKernel
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
         'administrator' => \App\Http\Middleware\CheckAdministratorRole::class,
         'name' => \App\Http\Middleware\CheckName::class,
+        'letter' => \App\Http\Middleware\CheckLetter::class,
     ];
 }
diff --git a/app/Http/Middleware/CheckLetter.php b/app/Http/Middleware/CheckLetter.php
new file mode 100644
index 0000000..b6fb333
--- /dev/null
+++ b/app/Http/Middleware/CheckLetter.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use App\Models\Name;
+use Closure;
+use Illuminate\Database\Eloquent\ModelNotFoundException;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Str;
+use Symfony\Component\HttpFoundation\Response;
+
+class CheckLetter
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $requestedLetter = $request->route()->parameter('letter');
+
+        // check if the requested letter is between A and Z and is exactly one character
+        if (strlen($requestedLetter) > 1) {
+            return redirect()->route('home.index');
+        }
+
+        if (!preg_match('/^[A-Za-z]+$/', $requestedLetter)) {
+            return redirect()->route('home.index');
+        }
+
+        $request->attributes->add(['letter' => Str::lcfirst($requestedLetter)]);
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/ViewModels/Home/HomeViewModel.php b/app/Http/ViewModels/Home/HomeViewModel.php
index 083b2b3..7a8b6c9 100644
--- a/app/Http/ViewModels/Home/HomeViewModel.php
+++ b/app/Http/ViewModels/Home/HomeViewModel.php
@@ -86,7 +86,7 @@ public static function nameSpotlight(): array
 
     public static function serverStats(): array
     {
-        $totalNames = Name::count();
+        $totalNames = Name::where('name', '!=', '_PRENOMS_RARES')->count();
 
         return [
             'total_names' => $totalNames,
diff --git a/app/Http/ViewModels/Names/AllNamesViewModel.php b/app/Http/ViewModels/Names/AllNamesViewModel.php
new file mode 100644
index 0000000..2266034
--- /dev/null
+++ b/app/Http/ViewModels/Names/AllNamesViewModel.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\ViewModels\Names;
+
+use App\Helpers\StringHelper;
+use App\Models\Name;
+use Carbon\Carbon;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
+use Illuminate\Support\Number;
+
+class AllNamesViewModel
+{
+    public static function index(): Collection
+    {
+        // iterate over the alphabet
+        $alphabet = range('A', 'Z');
+
+        $letters = collect();
+
+        $letters->push([
+            'letter' => 'Tous',
+            'count' => Number::format(Name::where('name', '!=', '_PRENOMS_RARES')->count(), locale: 'fr'),
+            'url' => route('name.index'),
+        ]);
+
+        foreach ($alphabet as $letter) {
+            $letters->push([
+                'letter' => $letter,
+                'count' => Number::format(Name::where('name', 'like', $letter . '%')->count(), locale: 'fr'),
+                'url' => route('name.letter', ['letter' => Str::lcfirst($letter)]),
+            ]);
+        }
+
+        return $letters;
+    }
+}
diff --git a/app/Http/ViewModels/Names/FemaleNamesViewModel.php b/app/Http/ViewModels/Names/FemaleNamesViewModel.php
new file mode 100644
index 0000000..2347d2a
--- /dev/null
+++ b/app/Http/ViewModels/Names/FemaleNamesViewModel.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\ViewModels\Names;
+
+use App\Helpers\StringHelper;
+use App\Models\Name;
+use Carbon\Carbon;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
+use Illuminate\Support\Number;
+
+class FemaleNamesViewModel
+{
+    public static function index(): Collection
+    {
+        // iterate over the alphabet
+        $alphabet = range('A', 'Z');
+
+        $total = Name::where('gender', 'female')
+            ->where('name', '!=', '_PRENOMS_RARES')->count();
+
+        $letters = collect();
+        $letters->push([
+            'letter' => 'Tous',
+            'count' => Number::format($total, locale: 'fr'),
+            'url' => route('name.fille.index'),
+        ]);
+
+        foreach ($alphabet as $letter) {
+            $total = Name::where('gender', 'female')
+                ->where('name', 'like', $letter . '%')->count();
+            $letters->push([
+                'letter' => $letter,
+                'count' => Number::format($total, locale: 'fr'),
+                'url' => route('name.fille.letter', [
+                    'letter' => Str::lcfirst($letter)
+                ]),
+            ]);
+        }
+
+        return $letters;
+    }
+}
diff --git a/app/Http/ViewModels/Names/MaleNamesViewModel.php b/app/Http/ViewModels/Names/MaleNamesViewModel.php
new file mode 100644
index 0000000..2b60ec0
--- /dev/null
+++ b/app/Http/ViewModels/Names/MaleNamesViewModel.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\ViewModels\Names;
+
+use App\Helpers\StringHelper;
+use App\Models\Name;
+use Carbon\Carbon;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
+use Illuminate\Support\Number;
+
+class MaleNamesViewModel
+{
+    public static function index(): Collection
+    {
+        // iterate over the alphabet
+        $alphabet = range('A', 'Z');
+
+        $total = Name::where('gender', 'male')
+            ->where('name', '!=', '_PRENOMS_RARES')->count();
+
+        $letters = collect();
+        $letters->push([
+            'letter' => 'Tous',
+            'count' => Number::format($total, locale: 'fr'),
+            'url' => route('name.garcon.index'),
+        ]);
+
+        foreach ($alphabet as $letter) {
+            $total = Name::where('gender', 'male')
+                ->where('name', 'like', $letter . '%')->count();
+            $letters->push([
+                'letter' => $letter,
+                'count' => Number::format($total, locale: 'fr'),
+                'url' => route('name.garcon.letter', [
+                    'letter' => Str::lcfirst($letter)
+                ]),
+            ]);
+        }
+
+        return $letters;
+    }
+}
diff --git a/app/Jobs/ProcessMixte.php b/app/Jobs/ProcessMixte.php
index 1501e93..39a3edd 100644
--- a/app/Jobs/ProcessMixte.php
+++ b/app/Jobs/ProcessMixte.php
@@ -27,9 +27,9 @@ public function __construct(
      */
     public function handle(): void
     {
-        if ($this->name->celebrities === null) {
-            $celebrities = OpenAIHelper::getUnisex($this->name->name);
-            $this->name->celebrities = $celebrities;
+        if ($this->name->unisex === null) {
+            $answer = OpenAIHelper::getUnisex($this->name->name);
+            $this->name->unisex = $answer;
             $this->name->save();
         }
     }
diff --git a/database/migrations/2023_12_08_013120_create_name_table.php b/database/migrations/2023_12_08_013120_create_name_table.php
index 8fe9aa1..999515a 100644
--- a/database/migrations/2023_12_08_013120_create_name_table.php
+++ b/database/migrations/2023_12_08_013120_create_name_table.php
@@ -24,7 +24,7 @@ public function up(): void
             $table->text('litterature_artistics_references')->nullable();
             $table->text('similar_names_in_other_languages')->nullable();
             $table->text('klingon_translation')->nullable();
-            $table->boolean('unisex')->default(false);
+            $table->boolean('unisex')->nullable();
             $table->integer('total')->default(0);
             $table->integer('page_views')->default(0);
             $table->timestamps();
diff --git a/resources/css/app.css b/resources/css/app.css
index 757178d..ef161ce 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -5,3 +5,7 @@
 .name-show-grid {
   grid-template-columns: 1fr 240px;
 }
+
+.name-index-grid {
+  grid-template-columns: 240px 1fr;
+}
diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
index 130bb6d..f0cc3e5 100644
--- a/resources/views/home/index.blade.php
+++ b/resources/views/home/index.blade.php
@@ -15,7 +15,7 @@
           <h2 class="text-xl mb-6">Parcourez le site de fiches de prénoms le plus complet. Créez des listes et faites voter vos proches. Un site qui vous respecte, sans pub, sans tracking et open source.</h2>
 
           <p>
-            <a href="" class="bg-amber-300 px-4 py-2 rounded-lg font-bold shadow">Parcourir tous les prénoms</a>
+            <a href="{{ route('name.index') }}" class="bg-amber-300 px-4 py-2 rounded-lg font-bold shadow">Parcourir tous les prénoms</a>
           </p>
         </div>
 
@@ -63,59 +63,59 @@
   <div class="bg-yellow-100">
     <div class="py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
       <!-- list of popular names -->
-        <div class="grid grid-cols-4 gap-10">
-          <!-- male names -->
-          <div>
-            <h2 class="font-semibold text-xl mb-4">Prénoms masculins populaires</h2>
-            <ul class="space-y-4">
-              @foreach ($twentyMostPopularNames['male_names'] as $name)
-                <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
-                  <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                  <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
-                </li>
-              @endforeach
-            </ul>
-          </div>
-
-          <!-- female names -->
-          <div>
-            <h2 class="font-semibold text-xl mb-4">Prénoms féminins populaires</h2>
-            <ul class="space-y-4">
-              @foreach ($twentyMostPopularNames['female_names'] as $name)
+      <div class="grid grid-cols-4 gap-10">
+        <!-- male names -->
+        <div>
+          <h2 class="font-semibold text-xl mb-4">Prénoms masculins populaires</h2>
+          <ul class="space-y-4">
+            @foreach ($twentyMostPopularNames['male_names'] as $name)
               <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
                 <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
                 <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
               </li>
-              @endforeach
-            </ul>
-          </div>
+            @endforeach
+          </ul>
+        </div>
 
-          <!-- mixte names -->
-          <div>
-            <h2 class="font-semibold text-xl mb-4">Prénoms mixtes populaires</h2>
-            <ul class="space-y-4">
-              @foreach ($twentyMostPopularNames['male_names'] as $name)
-              <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
-                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
-              </li>
-              @endforeach
-            </ul>
-          </div>
+        <!-- female names -->
+        <div>
+          <h2 class="font-semibold text-xl mb-4">Prénoms féminins populaires</h2>
+          <ul class="space-y-4">
+            @foreach ($twentyMostPopularNames['female_names'] as $name)
+            <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+              <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+              <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+            </li>
+            @endforeach
+          </ul>
+        </div>
 
-          <!-- random names -->
-          <div>
-            <h2 class="font-semibold text-xl mb-4">Prénoms aléatoires</h2>
-            <ul class="space-y-4">
-              @foreach ($twentyMostPopularNames['random_names'] as $name)
-              <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
-                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
-              </li>
-              @endforeach
-            </ul>
-          </div>
+        <!-- mixte names -->
+        <div>
+          <h2 class="font-semibold text-xl mb-4">Prénoms mixtes populaires</h2>
+          <ul class="space-y-4">
+            @foreach ($twentyMostPopularNames['male_names'] as $name)
+            <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+              <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+              <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+            </li>
+            @endforeach
+          </ul>
         </div>
+
+        <!-- random names -->
+        <div>
+          <h2 class="font-semibold text-xl mb-4">Prénoms aléatoires</h2>
+          <ul class="space-y-4">
+            @foreach ($twentyMostPopularNames['random_names'] as $name)
+            <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+              <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+              <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+            </li>
+            @endforeach
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </x-guest-layout>
diff --git a/resources/views/layouts/unlogged-navigation.blade.php b/resources/views/layouts/unlogged-navigation.blade.php
index 7232051..5dfd323 100644
--- a/resources/views/layouts/unlogged-navigation.blade.php
+++ b/resources/views/layouts/unlogged-navigation.blade.php
@@ -18,7 +18,7 @@
             <x-unlogged-nav-link :href="route('home.index')" :active="request()->routeIs('home.index')">
               {{ __('Accueil') }}
             </x-unlogged-nav-link>
-            <x-unlogged-nav-link :href="route('dashboard')">
+            <x-unlogged-nav-link :href="route('name.index')" :active="request()->is('name*')">
               {{ __('Tous les prénoms') }}
             </x-unlogged-nav-link>
           </div>
diff --git a/resources/views/names/female/index.blade.php b/resources/views/names/female/index.blade.php
new file mode 100644
index 0000000..c73dd1a
--- /dev/null
+++ b/resources/views/names/female/index.blade.php
@@ -0,0 +1,59 @@
+<x-guest-layout>
+  <div class="bg-violet-100 mb-8">
+    <div class="border-b border-violet-200">
+      @include('layouts.unlogged-navigation')
+    </div>
+
+    <div class="border-b border-violet-200">
+      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+        <ul class="text-xs">
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+          </li>
+          <li class="inline">Tous les prénoms féminins</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+      <div class="grid name-index-grid">
+
+        <!-- left -->
+        <div>
+          @include('names.partials.sidebar')
+        </div>
+
+        <!-- right -->
+        <div>
+
+          <!-- list of letters -->
+          <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
+            @foreach ($letters as $letter)
+            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100">
+              <div>{{ $letter['letter'] }}</div>
+              <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
+            </a>
+            @endforeach
+          </div>
+
+          <!-- names -->
+          <h2 class="mb-8 font-bold text-xl text-center">Tous les prénoms féminins</h2>
+          <div class="grid grid-cols-4 gap-10 gap-y-1 mb-10">
+            @foreach ($names as $name)
+              <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              </div>
+            @endforeach
+          </div>
+
+          <div class="flex justify-center">
+              {{ $namesPagination->onEachSide(2)->links('vendor.pagination.tailwind') }}
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</x-guest-layout>
diff --git a/resources/views/names/female/letter.blade.php b/resources/views/names/female/letter.blade.php
new file mode 100644
index 0000000..e9bb290
--- /dev/null
+++ b/resources/views/names/female/letter.blade.php
@@ -0,0 +1,63 @@
+<x-guest-layout>
+  <div class="bg-violet-100 mb-8">
+    <div class="border-b border-violet-200">
+      @include('layouts.unlogged-navigation')
+    </div>
+
+    <div class="border-b border-violet-200">
+      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+        <ul class="text-xs">
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+          </li>
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
+          </li>
+          <li class="inline">Tous les prénoms féminins commençant par la lettre {{ $activeLetter }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+      <div class="grid name-index-grid">
+
+        <!-- left -->
+        <div>
+          @include('names.partials.sidebar')
+        </div>
+
+        <!-- right -->
+        <div>
+
+          <!-- list of letters -->
+          <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
+            @foreach ($letters as $letter)
+            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100 {{ $activeLetter === $letter['letter'] ? 'bg-violet-100' : '' }}">
+              <div>{{ $letter['letter'] }}</div>
+              <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
+            </a>
+            @endforeach
+          </div>
+
+          <!-- names -->
+          <h2 class="mb-8 font-bold text-xl text-center">Tous les prénoms féminins commençant par la lettre {{ $activeLetter }}</h2>
+
+          <div class="grid grid-cols-4 gap-10 gap-y-1 mb-10">
+            @foreach ($names as $name)
+              <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              </div>
+            @endforeach
+          </div>
+
+          <div class="flex justify-center">
+              {{ $namesPagination->onEachSide(2)->links('vendor.pagination.tailwind') }}
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</x-guest-layout>
diff --git a/resources/views/names/index.blade.php b/resources/views/names/index.blade.php
new file mode 100644
index 0000000..4fe9380
--- /dev/null
+++ b/resources/views/names/index.blade.php
@@ -0,0 +1,58 @@
+<x-guest-layout>
+  <div class="bg-violet-100 mb-8">
+    <div class="border-b border-violet-200">
+      @include('layouts.unlogged-navigation')
+    </div>
+
+    <div class="border-b border-violet-200">
+      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+        <ul class="text-xs">
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+          </li>
+          <li class="inline">Tous les prénoms</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+      <div class="grid name-index-grid">
+
+        <!-- left -->
+        <div>
+          @include('names.partials.sidebar')
+        </div>
+
+        <!-- right -->
+        <div>
+
+          <!-- list of letters -->
+          <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
+            @foreach ($letters as $letter)
+            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100">
+              <div>{{ $letter['letter'] }}</div>
+              <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
+            </a>
+            @endforeach
+          </div>
+
+          <!-- names -->
+          <div class="grid grid-cols-4 gap-10 gap-y-1 mb-10">
+            @foreach ($names as $name)
+              <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              </div>
+            @endforeach
+          </div>
+
+          <div class="flex justify-center">
+              {{ $namesPagination->onEachSide(2)->links('vendor.pagination.tailwind') }}
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</x-guest-layout>
diff --git a/resources/views/names/letter.blade.php b/resources/views/names/letter.blade.php
new file mode 100644
index 0000000..8f783fa
--- /dev/null
+++ b/resources/views/names/letter.blade.php
@@ -0,0 +1,63 @@
+<x-guest-layout>
+  <div class="bg-violet-100 mb-8">
+    <div class="border-b border-violet-200">
+      @include('layouts.unlogged-navigation')
+    </div>
+
+    <div class="border-b border-violet-200">
+      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+        <ul class="text-xs">
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+          </li>
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
+          </li>
+          <li class="inline">Tous les prénoms commençant par la lettre {{ $activeLetter }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+      <div class="grid name-index-grid">
+
+        <!-- left -->
+        <div>
+          @include('names.partials.sidebar')
+        </div>
+
+        <!-- right -->
+        <div>
+
+          <!-- list of letters -->
+          <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
+            @foreach ($letters as $letter)
+            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100 {{ $activeLetter === $letter['letter'] ? 'bg-violet-100' : '' }}">
+              <div>{{ $letter['letter'] }}</div>
+              <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
+            </a>
+            @endforeach
+          </div>
+
+          <!-- names -->
+          <h2 class="mb-8 font-bold text-xl text-center">Tous les prénoms commençant par la lettre {{ $activeLetter }}</h2>
+
+          <div class="grid grid-cols-4 gap-10 gap-y-1 mb-10">
+            @foreach ($names as $name)
+              <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              </div>
+            @endforeach
+          </div>
+
+          <div class="flex justify-center">
+              {{ $namesPagination->onEachSide(2)->links('vendor.pagination.tailwind') }}
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</x-guest-layout>
diff --git a/resources/views/names/male/index.blade.php b/resources/views/names/male/index.blade.php
new file mode 100644
index 0000000..01e7f86
--- /dev/null
+++ b/resources/views/names/male/index.blade.php
@@ -0,0 +1,59 @@
+<x-guest-layout>
+  <div class="bg-violet-100 mb-8">
+    <div class="border-b border-violet-200">
+      @include('layouts.unlogged-navigation')
+    </div>
+
+    <div class="border-b border-violet-200">
+      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+        <ul class="text-xs">
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+          </li>
+          <li class="inline">Tous les prénoms masculins</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+      <div class="grid name-index-grid">
+
+        <!-- left -->
+        <div>
+          @include('names.partials.sidebar')
+        </div>
+
+        <!-- right -->
+        <div>
+
+          <!-- list of letters -->
+          <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
+            @foreach ($letters as $letter)
+            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100">
+              <div>{{ $letter['letter'] }}</div>
+              <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
+            </a>
+            @endforeach
+          </div>
+
+          <!-- names -->
+          <h2 class="mb-8 font-bold text-xl text-center">Tous les prénoms masculins</h2>
+          <div class="grid grid-cols-4 gap-10 gap-y-1 mb-10">
+            @foreach ($names as $name)
+              <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              </div>
+            @endforeach
+          </div>
+
+          <div class="flex justify-center">
+              {{ $namesPagination->onEachSide(2)->links('vendor.pagination.tailwind') }}
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</x-guest-layout>
diff --git a/resources/views/names/male/letter.blade.php b/resources/views/names/male/letter.blade.php
new file mode 100644
index 0000000..151da7b
--- /dev/null
+++ b/resources/views/names/male/letter.blade.php
@@ -0,0 +1,63 @@
+<x-guest-layout>
+  <div class="bg-violet-100 mb-8">
+    <div class="border-b border-violet-200">
+      @include('layouts.unlogged-navigation')
+    </div>
+
+    <div class="border-b border-violet-200">
+      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+        <ul class="text-xs">
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+          </li>
+          <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
+            <a href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
+          </li>
+          <li class="inline">Tous les prénoms masculins commençant par la lettre {{ $activeLetter }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
+      <div class="grid name-index-grid">
+
+        <!-- left -->
+        <div>
+          @include('names.partials.sidebar')
+        </div>
+
+        <!-- right -->
+        <div>
+
+          <!-- list of letters -->
+          <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
+            @foreach ($letters as $letter)
+            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100 {{ $activeLetter === $letter['letter'] ? 'bg-violet-100' : '' }}">
+              <div>{{ $letter['letter'] }}</div>
+              <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
+            </a>
+            @endforeach
+          </div>
+
+          <!-- names -->
+          <h2 class="mb-8 font-bold text-xl text-center">Tous les prénoms masculins commençant par la lettre {{ $activeLetter }}</h2>
+
+          <div class="grid grid-cols-4 gap-10 gap-y-1 mb-10">
+            @foreach ($names as $name)
+              <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
+                <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
+                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              </div>
+            @endforeach
+          </div>
+
+          <div class="flex justify-center">
+              {{ $namesPagination->onEachSide(2)->links('vendor.pagination.tailwind') }}
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</x-guest-layout>
diff --git a/resources/views/names/partials/sidebar.blade.php b/resources/views/names/partials/sidebar.blade.php
new file mode 100644
index 0000000..af19658
--- /dev/null
+++ b/resources/views/names/partials/sidebar.blade.php
@@ -0,0 +1,14 @@
+<ul>
+  <li>
+    <a href="{{ route('name.index') }}">Tous les prénoms</a>
+  </li>
+  <li>
+    <a href="{{ route('name.garcon.index') }}">Prénoms masculins</a>
+  </li>
+  <li>
+    <a href="{{ route('name.fille.index') }}">Prénoms féminins</a>
+  </li>
+  <li>
+    <a href="{{ route('name.garcon.index') }}">Prénoms mixtes</a>
+  </li>
+</ul>
diff --git a/resources/views/vendor/pagination/bootstrap-4.blade.php b/resources/views/vendor/pagination/bootstrap-4.blade.php
new file mode 100644
index 0000000..63c6f56
--- /dev/null
+++ b/resources/views/vendor/pagination/bootstrap-4.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                        @else
+                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/bootstrap-5.blade.php b/resources/views/vendor/pagination/bootstrap-5.blade.php
new file mode 100644
index 0000000..a1795a4
--- /dev/null
+++ b/resources/views/vendor/pagination/bootstrap-5.blade.php
@@ -0,0 +1,88 @@
+@if ($paginator->hasPages())
+    <nav class="d-flex justify-items-center justify-content-between">
+        <div class="d-flex justify-content-between flex-fill d-sm-none">
+            <ul class="pagination">
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.previous')</span>
+                    </li>
+                @else
+                    <li class="page-item">
+                        <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+                    </li>
+                @endif
+
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    <li class="page-item">
+                        <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+                    </li>
+                @else
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.next')</span>
+                    </li>
+                @endif
+            </ul>
+        </div>
+
+        <div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between">
+            <div>
+                <p class="small text-muted">
+                    {!! __('Showing') !!}
+                    <span class="fw-semibold">{{ $paginator->firstItem() }}</span>
+                    {!! __('to') !!}
+                    <span class="fw-semibold">{{ $paginator->lastItem() }}</span>
+                    {!! __('of') !!}
+                    <span class="fw-semibold">{{ $paginator->total() }}</span>
+                    {!! __('results') !!}
+                </p>
+            </div>
+
+            <div>
+                <ul class="pagination">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                            <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                        </li>
+                    @else
+                        <li class="page-item">
+                            <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                        </li>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                                @else
+                                    <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <li class="page-item">
+                            <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                        </li>
+                    @else
+                        <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                            <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                        </li>
+                    @endif
+                </ul>
+            </div>
+        </div>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/default.blade.php b/resources/views/vendor/pagination/default.blade.php
new file mode 100644
index 0000000..0db70b5
--- /dev/null
+++ b/resources/views/vendor/pagination/default.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="active" aria-current="page"><span>{{ $page }}</span></li>
+                        @else
+                            <li><a href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/semantic-ui.blade.php b/resources/views/vendor/pagination/semantic-ui.blade.php
new file mode 100644
index 0000000..ef0dbb1
--- /dev/null
+++ b/resources/views/vendor/pagination/semantic-ui.blade.php
@@ -0,0 +1,36 @@
+@if ($paginator->hasPages())
+    <div class="ui pagination menu" role="navigation">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
+        @else
+            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
+        @endif
+
+        {{-- Pagination Elements --}}
+        @foreach ($elements as $element)
+            {{-- "Three Dots" Separator --}}
+            @if (is_string($element))
+                <a class="icon item disabled" aria-disabled="true">{{ $element }}</a>
+            @endif
+
+            {{-- Array Of Links --}}
+            @if (is_array($element))
+                @foreach ($element as $page => $url)
+                    @if ($page == $paginator->currentPage())
+                        <a class="item active" href="{{ $url }}" aria-current="page">{{ $page }}</a>
+                    @else
+                        <a class="item" href="{{ $url }}">{{ $page }}</a>
+                    @endif
+                @endforeach
+            @endif
+        @endforeach
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
+        @else
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
+        @endif
+    </div>
+@endif
diff --git a/resources/views/vendor/pagination/simple-bootstrap-4.blade.php b/resources/views/vendor/pagination/simple-bootstrap-4.blade.php
new file mode 100644
index 0000000..4bb4917
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-bootstrap-4.blade.php
@@ -0,0 +1,27 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.previous')</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.next')</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/simple-bootstrap-5.blade.php b/resources/views/vendor/pagination/simple-bootstrap-5.blade.php
new file mode 100644
index 0000000..a89005e
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-bootstrap-5.blade.php
@@ -0,0 +1,29 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation">
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">{!! __('pagination.previous') !!}</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">
+                        {!! __('pagination.previous') !!}
+                    </a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">{!! __('pagination.next') !!}</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">{!! __('pagination.next') !!}</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/simple-default.blade.php b/resources/views/vendor/pagination/simple-default.blade.php
new file mode 100644
index 0000000..36bdbc1
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-default.blade.php
@@ -0,0 +1,19 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
+            @else
+                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
+            @else
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/simple-tailwind.blade.php b/resources/views/vendor/pagination/simple-tailwind.blade.php
new file mode 100644
index 0000000..6872cca
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-tailwind.blade.php
@@ -0,0 +1,25 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                {!! __('pagination.previous') !!}
+            </span>
+        @else
+            <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                {!! __('pagination.previous') !!}
+            </a>
+        @endif
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                {!! __('pagination.next') !!}
+            </a>
+        @else
+            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                {!! __('pagination.next') !!}
+            </span>
+        @endif
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/tailwind.blade.php b/resources/views/vendor/pagination/tailwind.blade.php
new file mode 100644
index 0000000..8b79b1a
--- /dev/null
+++ b/resources/views/vendor/pagination/tailwind.blade.php
@@ -0,0 +1,90 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
+        <div class="flex justify-between flex-1 sm:hidden">
+            @if ($paginator->onFirstPage())
+                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.previous') !!}
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.previous') !!}
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.next') !!}
+                </a>
+            @else
+                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.next') !!}
+                </span>
+            @endif
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+                <span class="relative z-0 inline-flex shadow-sm rounded-md">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @else
+                        <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <span aria-current="page">
+                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                    </span>
+                                @else
+                                    <a href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                        {{ $page }}
+                                    </a>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @else
+                        <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @endif
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif
diff --git a/routes/web.php b/routes/web.php
index 42803bd..f7b4c19 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,7 +1,9 @@
 <?php
 
+use App\Http\Controllers\FemaleNameController;
 use App\Http\Controllers\HomeController;
 use App\Http\Controllers\LocaleController;
+use App\Http\Controllers\MaleNameController;
 use App\Http\Controllers\NameController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\Settings\SettingsController;
@@ -14,6 +16,18 @@
 
 Route::get('', [HomeController::class, 'index'])->name('home.index');
 Route::get('prenoms', [NameController::class, 'index'])->name('name.index');
+
+Route::get('prenoms/garcons', [MaleNameController::class, 'index'])->name('name.garcon.index');
+Route::get('prenoms/filles', [FemaleNameController::class, 'index'])->name('name.fille.index');
+Route::get('prenoms/mixtes', [NameController::class, 'index'])->name('name.mixte.index');
+Route::get('prenoms/mixtes/{letter}', [NameController::class, 'index'])->name('name.mixte.show');
+
+Route::middleware(['letter'])->group(function (): void {
+    Route::get('prenoms/garcons/{letter}', [MaleNameController::class, 'letter'])->name('name.garcon.letter');
+    Route::get('prenoms/filles/{letter}', [FemaleNameController::class, 'letter'])->name('name.fille.letter');
+    Route::get('prenoms/{letter}', [NameController::class, 'letter'])->name('name.letter');
+});
+
 Route::middleware(['name'])->group(function (): void {
     Route::get('prenoms/{id}/{name}', [NameController::class, 'show'])->name('name.show');
 });