diff --git a/app/Actions/Article/CreateArticleAction.php b/app/Actions/Article/CreateArticleAction.php
index 824e1528..5c6104f7 100644
--- a/app/Actions/Article/CreateArticleAction.php
+++ b/app/Actions/Article/CreateArticleAction.php
@@ -4,7 +4,7 @@
 
 namespace App\Actions\Article;
 
-use App\Data\Article\CreateArticleData;
+use App\Data\CreateArticleData;
 use App\Gamify\Points\ArticleCreated;
 use App\Models\Article;
 use App\Notifications\PostArticleToTelegram;
diff --git a/app/Actions/Discussion/CreateDiscussionAction.php b/app/Actions/Discussion/CreateDiscussionAction.php
index f1ba3d96..e37b1936 100644
--- a/app/Actions/Discussion/CreateDiscussionAction.php
+++ b/app/Actions/Discussion/CreateDiscussionAction.php
@@ -4,7 +4,7 @@
 
 namespace App\Actions\Discussion;
 
-use App\Data\Discussion\CreateDiscussionData;
+use App\Data\CreateDiscussionData;
 use App\Gamify\Points\DiscussionCreated;
 use App\Models\Discussion;
 use App\Notifications\PostDiscussionToTelegram;
diff --git a/app/Data/Article/CreateArticleData.php b/app/Data/CreateArticleData.php
similarity index 95%
rename from app/Data/Article/CreateArticleData.php
rename to app/Data/CreateArticleData.php
index 63896500..5afceb09 100644
--- a/app/Data/Article/CreateArticleData.php
+++ b/app/Data/CreateArticleData.php
@@ -2,7 +2,7 @@
 
 declare(strict_types=1);
 
-namespace App\Data\Article;
+namespace App\Data;
 
 use Carbon\Carbon;
 use Illuminate\Http\UploadedFile;
diff --git a/app/Data/Discussion/CreateDiscussionData.php b/app/Data/CreateDiscussionData.php
similarity index 88%
rename from app/Data/Discussion/CreateDiscussionData.php
rename to app/Data/CreateDiscussionData.php
index 811eacbb..1e168435 100644
--- a/app/Data/Discussion/CreateDiscussionData.php
+++ b/app/Data/CreateDiscussionData.php
@@ -2,7 +2,7 @@
 
 declare(strict_types=1);
 
-namespace App\Data\Discussion;
+namespace App\Data;
 
 use Spatie\LaravelData\Data;
 
diff --git a/app/Http/Controllers/ArticlesController.php b/app/Http/Controllers/ArticlesController.php
index 7b2c0dc5..26fc0172 100644
--- a/app/Http/Controllers/ArticlesController.php
+++ b/app/Http/Controllers/ArticlesController.php
@@ -5,11 +5,8 @@
 namespace App\Http\Controllers;
 
 use App\Models\Article;
-use App\Models\User;
 use App\Policies\ArticlePolicy;
 use Illuminate\Contracts\View\View;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Cache;
 
 final class ArticlesController extends Controller
 {
@@ -18,43 +15,6 @@ public function __construct()
         $this->middleware(['auth', 'verified'], ['except' => ['index', 'show']]);
     }
 
-    public function index(): View
-    {
-        return view('articles.index');
-    }
-
-    public function show(Article $article): View
-    {
-        /** @var User $user */
-        $user = Auth::user();
-
-        views($article)->record();
-
-        /** @var Article $article */
-        $article = Cache::remember('post-'.$article->id, now()->addHour(), fn () => $article);
-
-        abort_unless(
-            $article->isPublished() || ($user && $article->isAuthoredBy($user)) || ($user && $user->hasAnyRole(['admin', 'moderator'])), // @phpstan-ignore-line
-            404
-        );
-
-        $image = $article->getFirstMediaUrl('media');
-        // @phpstan-ignore-next-line
-        seo()
-            ->title($article->title)
-            ->description($article->excerpt(100))
-            ->image($image)
-            ->twitterTitle($article->title)
-            ->twitterDescription($article->excerpt(100))
-            ->twitterImage($image)
-            ->twitterSite('laravelcm')
-            ->withUrl();
-
-        return view('articles.show', [
-            'article' => $article->loadCount('views'),
-        ]);
-    }
-
     public function create(): View
     {
         return view('articles.new');
diff --git a/app/Livewire/Articles/Browse.php b/app/Livewire/Articles/Browse.php
deleted file mode 100644
index 6f7cba0d..00000000
--- a/app/Livewire/Articles/Browse.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Livewire\Articles;
-
-use App\Models\Article;
-use App\Models\Tag;
-use App\Traits\WithInfiniteScroll;
-use App\Traits\WithTags;
-use Illuminate\Contracts\View\View;
-use Livewire\Component;
-
-final class Browse extends Component
-{
-    use WithInfiniteScroll;
-    use WithTags;
-
-    public string $viewMode = 'list';
-
-    /**
-     * @var array[]
-     */
-    protected $queryString = [
-        'tag' => ['except' => ''],
-        'sortBy' => ['except' => 'recent'],
-    ];
-
-    public function mount(): void
-    {
-        $this->viewMode = session('viewMode', $this->viewMode);
-    }
-
-    public function changeViewMode(string $mode): void
-    {
-        session()->put('viewMode', $mode);
-
-        $this->viewMode = $mode;
-    }
-
-    public function validSort(string $sort): bool
-    {
-        return in_array($sort, [
-            'recent',
-            'popular',
-            'trending',
-        ]);
-    }
-
-    public function render(): View
-    {
-        $articles = Article::with(['tags', 'user', 'user.transactions'])
-            ->withCount(['views', 'reactions'])
-            ->published()
-            ->notPinned()
-            ->orderByDesc('sponsored_at')
-            ->orderByDesc('published_at');
-
-        $tags = Tag::whereHas('articles', function ($query): void {
-            $query->published();
-        })->orderBy('name')->get();
-
-        $selectedTag = Tag::where('slug', $this->tag)->first();
-
-        if ($this->tag) {
-            $articles->forTag($this->tag);
-        }
-
-        $articles->{$this->sortBy}();
-
-        return view('livewire.articles.browse', [
-            'articles' => $articles->paginate($this->perPage),
-            'tags' => $tags,
-            'selectedTag' => $selectedTag,
-            'selectedSortBy' => $this->sortBy,
-        ]);
-    }
-}
diff --git a/app/Livewire/Articles/Create.php b/app/Livewire/Articles/Create.php
index 29b66235..0d566bdf 100644
--- a/app/Livewire/Articles/Create.php
+++ b/app/Livewire/Articles/Create.php
@@ -5,7 +5,7 @@
 namespace App\Livewire\Articles;
 
 use App\Actions\Article\CreateArticleAction;
-use App\Data\Article\CreateArticleData;
+use App\Data\CreateArticleData;
 use App\Models\Tag;
 use App\Models\User;
 use App\Traits\WithArticleAttributes;
diff --git a/app/Livewire/Discussions/Create.php b/app/Livewire/Discussions/Create.php
index f611c0e9..2104dd3b 100644
--- a/app/Livewire/Discussions/Create.php
+++ b/app/Livewire/Discussions/Create.php
@@ -5,7 +5,7 @@
 namespace App\Livewire\Discussions;
 
 use App\Actions\Discussion\CreateDiscussionAction;
-use App\Data\Discussion\CreateDiscussionData;
+use App\Data\CreateDiscussionData;
 use App\Models\Tag;
 use App\Traits\WithTagsAssociation;
 use Illuminate\Contracts\View\View;
diff --git a/app/Livewire/Pages/Articles/Index.php b/app/Livewire/Pages/Articles/Index.php
new file mode 100644
index 00000000..41b956a4
--- /dev/null
+++ b/app/Livewire/Pages/Articles/Index.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Livewire\Pages\Articles;
+
+use App\Models\Article;
+use App\Models\Tag;
+use App\Traits\WithInfiniteScroll;
+use Illuminate\Contracts\View\View;
+use Livewire\Component;
+
+final class Index extends Component
+{
+    use WithInfiniteScroll;
+
+    public function render(): View
+    {
+        return view('livewire.pages.articles.index', [
+            'articles' => Article::with(['tags', 'user', 'user.transactions'])
+                ->withCount(['views', 'reactions'])
+                ->scopes(['published', 'notPinned'])
+                ->orderByDesc('sponsored_at')
+                ->orderByDesc('published_at')
+                ->paginate($this->perPage),
+            'tags' => Tag::query()->whereHas('articles', function ($query): void {
+                $query->published();
+            })->orderBy('name')->get(),
+        ])
+            ->title(__('pages/article.title'));
+    }
+}
diff --git a/app/Livewire/Pages/Articles/SinglePost.php b/app/Livewire/Pages/Articles/SinglePost.php
new file mode 100644
index 00000000..1e89295a
--- /dev/null
+++ b/app/Livewire/Pages/Articles/SinglePost.php
@@ -0,0 +1,52 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Livewire\Pages\Articles;
+
+use App\Models\Article;
+use App\Models\User;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+
+final class SinglePost extends Component
+{
+    public Article $article;
+
+    public function mount(Article $article): void
+    {
+        /** @var User $user */
+        $user = Auth::user();
+        views($article)->cooldown(now()->addHours(2))->record();
+
+        $article = $article->load(['media', 'user'])->loadCount('views');
+
+        abort_unless(
+            $article->isPublished() || ($user && $article->isAuthoredBy($user)) || ($user && $user->hasAnyRole(['admin', 'moderator'])), // @phpstan-ignore-line
+            404
+        );
+
+        $image = empty($article->getFirstMediaUrl('media'))
+            ? $article->getFirstMediaUrl('media')
+            : asset('/images/socialcard.png');
+
+        // @phpstan-ignore-next-line
+        seo()
+            ->title($article->title)
+            ->description($article->excerpt(150))
+            ->image($image)
+            ->twitterTitle($article->title)
+            ->twitterDescription($article->excerpt(150))
+            ->twitterImage($image)
+            ->twitterSite('laravelcm')
+            ->withUrl();
+
+        $this->article = $article;
+    }
+
+    public function render(): View
+    {
+        return view('livewire.pages.articles.single-post')->title($this->article->title);
+    }
+}
diff --git a/app/Livewire/Pages/Articles/SingleTag.php b/app/Livewire/Pages/Articles/SingleTag.php
new file mode 100644
index 00000000..7a92a202
--- /dev/null
+++ b/app/Livewire/Pages/Articles/SingleTag.php
@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Livewire\Pages\Articles;
+
+use App\Models\Article;
+use App\Models\Tag;
+use App\Traits\WithInfiniteScroll;
+use Illuminate\Contracts\View\View;
+use Livewire\Component;
+
+final class SingleTag extends Component
+{
+    use WithInfiniteScroll;
+
+    public Tag $tag;
+
+    public function render(): View
+    {
+        return view('livewire.pages.articles.tag', [
+            'articles' => Article::with(['tags', 'user', 'user.transactions'])
+                ->whereHas('tags', function ($query): void {
+                    $query->where('id', $this->tag->id);
+                })
+                ->withCount(['views', 'reactions'])
+                ->scopes(['published', 'notPinned'])
+                ->orderByDesc('sponsored_at')
+                ->orderByDesc('published_at')
+                ->paginate($this->perPage),
+        ])->title($this->tag->name);
+    }
+}
diff --git a/app/Models/Article.php b/app/Models/Article.php
index 118d270e..5dc9579a 100644
--- a/app/Models/Article.php
+++ b/app/Models/Article.php
@@ -67,10 +67,6 @@ final class Article extends Model implements HasMedia, ReactableInterface, Viewa
         'is_pinned' => 'boolean',
     ];
 
-    protected $with = [
-        'media',
-    ];
-
     protected bool $removeViewsOnDelete = true;
 
     public function getRouteKeyName(): string
@@ -115,11 +111,6 @@ public function registerMediaCollections(): void
             ->acceptsMimeTypes(['image/jpg', 'image/jpeg', 'image/png']);
     }
 
-    public function showToc(): bool
-    {
-        return $this->show_toc;
-    }
-
     public function submittedAt(): ?Carbon
     {
         return $this->submitted_at;
diff --git a/app/Models/Tag.php b/app/Models/Tag.php
index 8dfdcbd0..44ea1db3 100644
--- a/app/Models/Tag.php
+++ b/app/Models/Tag.php
@@ -5,16 +5,21 @@
 namespace App\Models;
 
 use App\Traits\HasSlug;
-use App\Traits\ModelHelpers;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\MorphToMany;
 
+/**
+ * @property-read int $id
+ * @property string $name
+ * @property string $slug
+ * @property string | null $description
+ * @property array $concerns
+ */
 final class Tag extends Model
 {
     use HasFactory;
     use HasSlug;
-    use ModelHelpers;
 
     public $timestamps = false;
 
@@ -29,16 +34,6 @@ final class Tag extends Model
         'concerns' => 'array',
     ];
 
-    public function id(): int
-    {
-        return $this->id;
-    }
-
-    public function name(): string
-    {
-        return $this->name;
-    }
-
     public function articles(): MorphToMany
     {
         return $this->morphedByMany(Article::class, 'taggable');
diff --git a/app/Traits/ModelHelpers.php b/app/Traits/ModelHelpers.php
deleted file mode 100644
index 6fc8a4b1..00000000
--- a/app/Traits/ModelHelpers.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Traits;
-
-use Illuminate\Contracts\Pagination\Paginator;
-
-trait ModelHelpers
-{
-    public static function findAllPaginated(int $perPage = 20): Paginator
-    {
-        return static::latest()->paginate($perPage);
-    }
-
-    public function matches(self $model): bool
-    {
-        return $this->id() === $model->id();
-    }
-}
diff --git a/app/Traits/WithInfiniteScroll.php b/app/Traits/WithInfiniteScroll.php
index 1805f197..def8e3dc 100644
--- a/app/Traits/WithInfiniteScroll.php
+++ b/app/Traits/WithInfiniteScroll.php
@@ -10,10 +10,10 @@ trait WithInfiniteScroll
 {
     use WithPagination;
 
-    public int $perPage = 10;
+    public int $perPage = 12;
 
     public function loadMore(): void
     {
-        $this->perPage += 10;
+        $this->perPage += 12;
     }
 }
diff --git a/app/Traits/WithTags.php b/app/Traits/WithTags.php
index 2a6a9ae2..97bd2b5d 100644
--- a/app/Traits/WithTags.php
+++ b/app/Traits/WithTags.php
@@ -24,6 +24,6 @@ public function sortBy(string $sort): void
 
     public function tagExists(string $tag): bool
     {
-        return Tag::where('slug', $tag)->exists();
+        return Tag::query()->where('slug', $tag)->exists();
     }
 }
diff --git a/config/lcm.php b/config/lcm.php
index 5ea7d289..eda80e6c 100644
--- a/config/lcm.php
+++ b/config/lcm.php
@@ -6,13 +6,13 @@
 
     'ads' => [
         [
-            'url' => 'https://github.com/mckenziearts/laravel-notify/?utm_source=laravelcm&amp;utm_medium=sidebar-widget',
+            'url' => 'https://github.com/mckenziearts/laravel-notify/?utm_source=laravel.cm&amp;utm_medium=sidebar-widget',
             'image' => 'notify',
             'alt' => 'Laravel Notify',
             'description' => 'Découvrez la nouvelle version de Laravel Notify pour vos projets Laravel.',
         ],
         [
-            'url' => 'https://laravelshopper.dev?utm_source=laravelcm&amp;utm_medium=sidebar-widget',
+            'url' => 'https://laravelshopper.dev?utm_source=laravel.cm&amp;utm_medium=sidebar-widget',
             'image' => 'shopper',
             'alt' => 'Laravel Shopper',
             'description' => 'Créez votre boutique en ligne aujourd\'hui avec Laravel Shopper.',
diff --git a/lang/en/global.php b/lang/en/global.php
index a49876a0..80611895 100644
--- a/lang/en/global.php
+++ b/lang/en/global.php
@@ -9,6 +9,7 @@
     'by' => 'by',
     'soon' => 'Soon',
     'navigation' => [
+        'home' => 'Home',
         'forum' => 'Forum',
         'articles' => 'Posts',
         'discussions' => 'Discussions',
@@ -72,9 +73,13 @@
     'view_more' => 'View more →',
     'or' => 'or',
     'need' => 'You need',
+    'loading' => 'Loading...',
     'discord' => [
         'title' => 'Join discord',
         'description' => 'Join the community Discord server and connect with other developers.',
     ],
+    'ads' => [
+        'ln_ui' => 'A fun collection of small, well-coded components to streamline your development process.',
+    ],
 
 ];
diff --git a/lang/en/pages/article.php b/lang/en/pages/article.php
index 21d6764a..bf5b5691 100644
--- a/lang/en/pages/article.php
+++ b/lang/en/pages/article.php
@@ -4,9 +4,12 @@
 
 return [
 
+    'title' => 'Laravel Cameroon Blog',
+    'blog' => 'Le Blog de Laravel Cameroun',
+    'blog_summary' => 'All the latest articles, tips and tutorials published just for you.',
     'about_author' => 'About author',
     'next_article' => 'Next article',
     'prev_article' => 'Previous article',
-    'share_article' => 'Do you like this article? Share it with others',
+    'share_article' => 'Share',
 
 ];
diff --git a/lang/fr/global.php b/lang/fr/global.php
index 41f897e2..ff22f176 100644
--- a/lang/fr/global.php
+++ b/lang/fr/global.php
@@ -9,6 +9,7 @@
     'by' => 'par',
     'soon' => 'Bientôt',
     'navigation' => [
+        'home' => 'Accueil',
         'forum' => 'Forum',
         'articles' => 'Articles',
         'discussions' => 'Discussions',
@@ -72,9 +73,13 @@
     'view_more' => 'En savoir plus →',
     'or' => 'ou',
     'need' => 'Il faut',
+    'loading' => 'Chargement...',
     'discord' => [
         'title' => 'Rejoindre Discord',
         'description' => 'Rejoignez le serveur Discord de la communauté et connectez-vous avec d\'autres développeurs.',
     ],
+    'ads' => [
+        'ln_ui' => 'Une collection interactives de petits composants bien codés pour optimiser votre temps de développement.',
+    ],
 
 ];
diff --git a/lang/fr/pages/article.php b/lang/fr/pages/article.php
index 068e25de..df82bfd9 100644
--- a/lang/fr/pages/article.php
+++ b/lang/fr/pages/article.php
@@ -4,9 +4,12 @@
 
 return [
 
+    'title' => 'Blog Laravel Cameroun',
+    'blog' => 'The Laravel Cameroon Blog',
+    'blog_summary' => 'Tous les articles, tips et tutoriels récemment publiés juste pour vous.',
     'about_author' => 'À propos de l’auteur',
     'next_article' => 'Article suivant',
     'prev_article' => 'Article précédent',
-    'share_article' => 'Vous aimez cet article ? Faite le savoir en partageant',
+    'share_article' => 'Partager',
 
 ];
diff --git a/resources/js/utils/helpers.js b/resources/js/utils/helpers.js
index 95ee84f8..8a5d9811 100644
--- a/resources/js/utils/helpers.js
+++ b/resources/js/utils/helpers.js
@@ -71,42 +71,3 @@ const share = function () {
 }
 
 share()
-
-const addAffiliateLink = function () {
-    let articleContent = document.getElementById('content')
-
-    if (!articleContent) {
-        return
-    }
-
-    let pTags = document.getElementById('content').querySelectorAll('p')
-    let i = 0
-    pTags.forEach((p) => {
-        if (i === 7) {
-            let a = document.createElement('a')
-            a.setAttribute(
-                'href',
-                'https://www.digitalocean.com/?refcode=d6dca1691fb4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge',
-            )
-            a.setAttribute('target', '_blank')
-            a.classList.add(
-                'relative',
-                'affiliate',
-                'block',
-                'w-full',
-                'mb-6',
-                'overflow-hidden',
-                'rounded-lg',
-                'cursor-pointer',
-            )
-            a.innerHTML = `
-           <img src="/images/affiliate-link.jpg" class="w-full rounded-t-lg" alt="Affiliate link" />
-           <span class="block w-full h-auto px-3 py-2 font-bold text-center text-white uppercase text-xs bg-gradient-to-r from-green-500 via-indigo-600 to-blue-500">Obtenez le code gratuit en créant votre serveur 🚀</span>
-       `
-            p.parentNode.insertBefore(a, p.nextSibling)
-        }
-        i++
-    })
-}
-
-addAffiliateLink()
diff --git a/resources/views/ads/ln.blade.php b/resources/views/ads/ln.blade.php
new file mode 100644
index 00000000..71d0bfef
--- /dev/null
+++ b/resources/views/ads/ln.blade.php
@@ -0,0 +1,51 @@
+<div
+    class="relative space-y-3 bg-white dark:bg-gray-800 ring-1 ring-gray-200 rounded-lg p-4 dark:ring-white/10 shadow-sm transition-all transform duration-200 ease-in-out hover:scale-105 hover:rotate-2 overflow-hidden">
+    <div
+        class="absolute left-1/2 top-0 ml-[3rem] h-[8rem] w-[10.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
+        <div
+            class="absolute inset-0 bg-gradient-to-r from-sky-300 to-sky-500 opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-sky-300/30 dark:to-sky-500/30 dark:opacity-100">
+            <svg aria-hidden="true"
+                 class="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5">
+                <defs>
+                    <pattern id=":S2:" width="72" height="56" patternUnits="userSpaceOnUse" x="-12" y="4">
+                        <path d="M.5 56V.5H72" fill="none" />
+                    </pattern>
+                </defs>
+                <rect width="100%" height="100%" stroke-width="0" fill="url(#:S2:)" />
+                <svg x="-12" y="4" class="overflow-visible">
+                    <rect stroke-width="0" width="73" height="57" x="288" y="168" />
+                    <rect stroke-width="0" width="73" height="57" x="144" y="56" />
+                    <rect stroke-width="0" width="73" height="57" x="504" y="168" />
+                    <rect stroke-width="0" width="73" height="57" x="720" y="336" />
+                </svg>
+            </svg>
+        </div>
+        <svg viewBox="0 0 1113 440" aria-hidden="true"
+             class="absolute left-1/2 top-0 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] dark:hidden">
+            <path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" />
+        </svg>
+    </div>
+    <a href="https://ui.lndev.me/?utm_source=laravel.cm" target="_blank">
+        <svg viewBox="0 0 104 24" xmlns="http://www.w3.org/2000/svg" class="h-6" aria-hidden="true">
+            <rect width="24" height="24" rx="6" class="fill-[#060911] dark:fill-white" />
+            <path
+                d="M3.90371 6.80307C3.04618 7.82503 2.62974 9.1458 2.74602 10.4748C2.86229 11.8038 3.50175 13.0322 4.52371 13.8897C5.54568 14.7473 6.86644 15.1637 8.19545 15.0474C9.52446 14.9311 10.7528 14.2917 11.6104 13.2697L7.75704 10.0364L3.90371 6.80307Z"
+                class="fill-white dark:fill-[#060911]"
+            />
+            <path
+                d="M17.162 6.70392C17.162 8.85136 15.4211 10.5922 13.2737 10.5922C11.1263 10.5922 9.38544 8.85136 9.38544 6.70392C9.38544 4.55649 11.1263 2.81565 13.2737 2.81565C15.4211 2.81565 17.162 4.55649 17.162 6.70392Z"
+                class="fill-white dark:fill-[#060911]"
+            />
+            <rect x="8.71509" y="17.9775" width="12.741" height="3.91892" transform="rotate(-40 8.71509 17.9775)"
+                  class="fill-white dark:fill-[#060911]" />
+            <path
+                d="M33.9598 5.05109V18.7089H31.5457V5.05109H33.9598ZM38.8564 12.7069V18.7089H36.4423V8.46553H38.7497V10.2061H38.8697C39.1054 9.63258 39.4811 9.17687 39.9968 8.83899C40.517 8.5011 41.1594 8.33216 41.9241 8.33216C42.631 8.33216 43.2467 8.48332 43.7713 8.78564C44.3004 9.08796 44.7094 9.52588 44.9984 10.0994C45.2918 10.6729 45.4363 11.3687 45.4319 12.1867V18.7089H43.0178V12.5602C43.0178 11.8755 42.8399 11.3398 42.4843 10.953C42.133 10.5662 41.6462 10.3728 41.0238 10.3728C40.6014 10.3728 40.2257 10.4662 39.8967 10.6529C39.5722 10.8352 39.3166 11.0997 39.1298 11.4465C38.9476 11.7933 38.8564 12.2134 38.8564 12.7069ZM51.6872 18.8889C50.8825 18.8889 50.1623 18.6822 49.5265 18.2687C48.8908 17.8553 48.3884 17.2551 48.0194 16.4681C47.6504 15.6812 47.4659 14.7253 47.4659 13.6005C47.4659 12.4624 47.6526 11.5021 48.0261 10.7196C48.404 9.93268 48.913 9.33915 49.5532 8.93902C50.1934 8.53444 50.907 8.33216 51.6939 8.33216C52.2941 8.33216 52.7876 8.43441 53.1744 8.63892C53.5612 8.83899 53.868 9.08129 54.0947 9.36582C54.3214 9.64592 54.4971 9.91045 54.6215 10.1594H54.7216V5.05109H57.1424V18.7089H54.7682V17.095H54.6215C54.4971 17.344 54.317 17.6085 54.0814 17.8886C53.8457 18.1642 53.5345 18.3999 53.1477 18.5955C52.7609 18.7911 52.2741 18.8889 51.6872 18.8889ZM52.3608 16.9083C52.8721 16.9083 53.3078 16.7705 53.6679 16.4948C54.028 16.2147 54.3014 15.8257 54.4882 15.3278C54.6749 14.8298 54.7682 14.2496 54.7682 13.5872C54.7682 12.9248 54.6749 12.349 54.4882 11.86C54.3059 11.3709 54.0347 10.9908 53.6746 10.7196C53.3189 10.4484 52.881 10.3128 52.3608 10.3128C51.8228 10.3128 51.3738 10.4528 51.0137 10.7329C50.6536 11.013 50.3824 11.3998 50.2001 11.8933C50.0178 12.3868 49.9267 12.9514 49.9267 13.5872C49.9267 14.2274 50.0178 14.7987 50.2001 15.3011C50.3868 15.799 50.6602 16.1925 51.0204 16.4815C51.3849 16.766 51.8317 16.9083 52.3608 16.9083ZM64.2497 18.9089C63.2227 18.9089 62.3357 18.6955 61.5888 18.2687C60.8463 17.8375 60.275 17.2284 59.8749 16.4415C59.4748 15.6501 59.2747 14.7187 59.2747 13.6472C59.2747 12.5935 59.4748 11.6688 59.8749 10.873C60.2795 10.0727 60.8441 9.4503 61.5688 9.00571C62.2935 8.55667 63.1449 8.33216 64.123 8.33216C64.7543 8.33216 65.35 8.43441 65.9102 8.63892C66.4748 8.83899 66.9728 9.1502 67.404 9.57256C67.8397 9.99492 68.1821 10.5329 68.431 11.1864C68.68 11.8355 68.8045 12.6091 68.8045 13.5072V14.2474H60.4084V12.6202H66.4904C66.4859 12.1578 66.3859 11.7466 66.1903 11.3865C65.9947 11.0219 65.7213 10.7352 65.37 10.5262C65.0233 10.3172 64.6187 10.2128 64.1563 10.2128C63.6628 10.2128 63.2293 10.3328 62.8559 10.5729C62.4824 10.8085 62.1912 11.1197 61.9823 11.5065C61.7778 11.8889 61.6733 12.309 61.6688 12.7669V14.1874C61.6688 14.7831 61.7778 15.2944 61.9956 15.7212C62.2134 16.1436 62.518 16.4681 62.9092 16.6949C63.3005 16.9172 63.7584 17.0283 64.283 17.0283C64.6342 17.0283 64.9521 16.9794 65.2367 16.8816C65.5212 16.7793 65.7679 16.6304 65.9769 16.4348C66.1859 16.2392 66.3437 15.9969 66.4504 15.7079L68.7044 15.9613C68.5622 16.5571 68.291 17.0772 67.8909 17.5218C67.4952 17.962 66.9883 18.3043 66.3704 18.5488C65.7524 18.7889 65.0455 18.9089 64.2497 18.9089ZM79.703 8.46553L76.0552 18.7089H73.3876L69.7398 8.46553H72.314L74.6681 16.0747H74.7748L77.1355 8.46553H79.703ZM85.885 4.41088L81.4836 20.7629H79.3696L83.771 4.41088H85.885ZM93.9543 14.4008V8.46553H96.3684V18.7089H94.0277V16.8883H93.921C93.6898 17.4618 93.3097 17.9308 92.7806 18.2954C92.256 18.66 91.6091 18.8422 90.84 18.8422C90.1686 18.8422 89.5751 18.6933 89.0594 18.3954C88.5481 18.0931 88.148 17.6552 87.859 17.0817C87.57 16.5037 87.4255 15.8057 87.4255 14.9877V8.46553H89.8396V14.6142C89.8396 15.2633 90.0175 15.779 90.3732 16.1614C90.7288 16.5437 91.1956 16.7349 91.7736 16.7349C92.1293 16.7349 92.4738 16.6482 92.8073 16.4748C93.1407 16.3014 93.4141 16.0436 93.6275 15.7012C93.8454 15.3544 93.9543 14.921 93.9543 14.4008ZM98.8509 18.7089V8.46553H101.265V18.7089H98.8509ZM100.065 7.01173C99.6823 7.01173 99.3533 6.88502 99.0777 6.6316C98.802 6.37374 98.6642 6.06475 98.6642 5.70463C98.6642 5.34007 98.802 5.03108 99.0777 4.77767C99.3533 4.5198 99.6823 4.39087 100.065 4.39087C100.451 4.39087 100.78 4.5198 101.052 4.77767C101.327 5.03108 101.465 5.34007 101.465 5.70463C101.465 6.06475 101.327 6.37374 101.052 6.6316C100.78 6.88502 100.451 7.01173 100.065 7.01173Z"
+                class="fill-[#060911] dark:fill-white"
+            />
+        </svg>
+        <span class="absolute inset-0"></span>
+    </a>
+    <p class="text-sm leading-5 max-w-xs text-gray-500 dark:text-gray-400">
+        {{ __('global.ads.ln_ui') }}
+    </p>
+</div>
diff --git a/resources/views/articles/index.blade.php b/resources/views/articles/index.blade.php
deleted file mode 100644
index 93684edc..00000000
--- a/resources/views/articles/index.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<x-app-layout title="Tous les articles">
-    <x-container class="py-12">
-        <livewire:articles.browse />
-    </x-container>
-</x-app-layout>
diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
deleted file mode 100644
index 0a7a8ab4..00000000
--- a/resources/views/articles/show.blade.php
+++ /dev/null
@@ -1,477 +0,0 @@
-<x-app-layout :title="$article->title">
-    @php
-        $next = $article->nextArticle();
-        $previous = $article->previousArticle();
-        $user = $article->user;
-    @endphp
-
-    <x-container class="py-12">
-        <article class="relative lg:grid lg:grid-cols-9 lg:gap-10">
-            <div class="relative hidden lg:col-span-2 lg:block">
-                <x-sticky-content class="space-y-6 divide-y divide-gray-200 dark:divide-white/20">
-                    <div>
-                        <h4 class="font-heading text-xs font-medium uppercase leading-4 tracking-wide text-gray-500 dark:text-gray-400">
-                            {{ __('pages/article.about_author') }}
-                        </h4>
-                        <div class="mt-6 space-y-4">
-                            <x-link :href="route('profile', $user->username)" class="block shrink-0">
-                                <div class="flex items-center">
-                                    <div class="shrink-0">
-                                        <x-user.avatar :user="$user" class="size-9" />
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
-                                            {{ $user->name }}
-                                        </p>
-                                        <p class="text-xs text-gray-400 dark:text-gray-500">
-                                            {{ '@' . $user->username }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </x-link>
-                            @if ($user->bio)
-                                <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">{{ $user->bio }}</p>
-                            @endif
-
-                            <div class="flex space-x-3">
-                                @if ($user->twitter())
-                                    <a
-                                        href="https://twitter.com/{{ $user->twitter() }}"
-                                        class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
-                                        target="_blank"
-                                    >
-                                        <span class="sr-only">Twitter</span>
-                                        <x-icon.twitter class="size-6" aria-hidden="true" />
-                                    </a>
-                                @endif
-
-                                @if ($user->linkedin())
-                                    <a
-                                        href="https://linkedin.com/in/{{ $user->linkedin() }}"
-                                        class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
-                                        target="_blank"
-                                    >
-                                        <span class="sr-only">LinkedIn</span>
-                                        <x-icon.linkedin class="size-6" aria-hidden="true" />
-                                    </a>
-                                @endif
-
-                                @if ($user->githubUsername())
-                                    <a
-                                        href="https://github.com/{{ $user->githubUsername() }}"
-                                        class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
-                                        target="_blank"
-                                    >
-                                        <span class="sr-only">GitHub</span>
-                                        <x-icon.github class="size-6" aria-hidden="true" />
-                                    </a>
-                                @endif
-                            </div>
-                        </div>
-                    </div>
-
-                    @if ($next || $previous)
-                        <div class="space-y-6 pt-6">
-                            @if ($next)
-                                <div>
-                                    <h4 class="text-xs font-medium uppercase leading-5 tracking-wide text-gray-500 dark:text-gray-400">
-                                        {{ __('pages/article.next_article') }}
-                                    </h4>
-                                    <x-link
-                                        :href="route('articles.show', $next)"
-                                        class="mt-3 group flex items-start gap-2"
-                                    >
-                                        <img
-                                            class="size-8 rounded-lg object-cover shadow-lg"
-                                            src="{{ $next->getFirstMediaUrl('media') }}"
-                                            alt="{{ $next->slug }}"
-                                        />
-                                        <span class="line-clamp-2 text-sm font-medium leading-4 text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-500 transition-colors duration-150 ease-in-out">
-                                            {{ $next->title }}
-                                        </span>
-                                    </x-link>
-                                </div>
-                            @endif
-
-                            @if ($previous)
-                                <div>
-                                    <h4 class="text-xs font-medium uppercase leading-5 tracking-wide text-gray-500 dark:text-gray-400">
-                                        {{ __('pages/article.prev_article') }}
-                                    </h4>
-                                    <x-link
-                                        :href="route('articles.show', $previous)"
-                                        class="mt-3 group flex items-start space-x-2"
-                                    >
-                                        <img
-                                            class="size-8 rounded-md object-cover shadow-lg"
-                                            src="{{ $previous->getFirstMediaUrl('media') }}"
-                                            alt="{{ $previous->slug }}"
-                                        />
-                                        <span class="line-clamp-2 text-sm font-medium leading-4 text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-500 transition-colors duration-150 ease-in-out">
-                                            {{ $previous->title }}
-                                        </span>
-                                    </x-link>
-                                </div>
-                            @endif
-                        </div>
-                    @endif
-
-                    <div class="pt-6">
-                        <livewire:reactions :model="$article" />
-                    </div>
-                </x-sticky-content>
-            </div>
-            <div class="lg:col-span-5">
-                <header class="space-y-4">
-                    <div class="sm:flex sm:flex-row sm:items-center sm:justify-between">
-                        <div class="flex items-center space-x-3">
-                            @if ($article->tags->isNotEmpty())
-                                <div class="flex items-center space-x-2">
-                                    @foreach ($article->tags as $tag)
-                                        <x-tag :tag="$tag" />
-                                    @endforeach
-                                </div>
-                            @endif
-
-                            <x-articles.sponsored :isSponsored="$article->isSponsored()" />
-                        </div>
-
-                        <div class="mt-2 flex space-x-1 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
-                            <time class="capitalize" datetime="{{ $article->publishedAt()->format('Y-m-d') }}">
-                                {{ $article->publishedAt()->isoFormat('LL') }}
-                            </time>
-                            <span aria-hidden="true">&middot;</span>
-                            <span>{{ __('global.read_time', ['time' => $article->readTime()]) }}</span>
-                            <span aria-hidden="true">&middot;</span>
-                            <span>{{ __('global.page_views', ['number' => $article->views_count]) }}</span>
-                        </div>
-                    </div>
-                    <h1
-                        class="font-heading text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl sm:leading-10 md:text-4xl lg:text-5xl lg:leading-[3.5rem]"
-                    >
-                        {{ $article->title }}
-                    </h1>
-                    <x-link
-                        :href="route('profile', $article->user->username)"
-                        class="group mt-3 block shrink-0 lg:hidden"
-                    >
-                        <div class="flex items-center">
-                            <div>
-                                <img
-                                    class="inline-block size-8 rounded-full"
-                                    src="{{ $article->user->profile_photo_url }}"
-                                    alt="{{ $article->user->username }}"
-                                />
-                            </div>
-                            <div class="ml-3">
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">
-                                    {{ $article->user->name }}
-                                </p>
-                                <p class="text-xs text-gray-400 dark:text-gray-500">
-                                    {{ '@' . $article->user->username }}
-                                </p>
-                            </div>
-                        </div>
-                    </x-link>
-                </header>
-
-                @if ($media = $article->getFirstMediaUrl('media'))
-                    <div class="aspect-h-2 aspect-w-4 mx-auto mt-6 sm:mt-8">
-                        <img
-                            class="rounded-lg object-cover shadow-lg group-hover:opacity-75"
-                            src="{{ $media }}"
-                            alt="{{ $article->title }}"
-                        />
-                    </div>
-                @endif
-
-                <x-markdown-content
-                    id="content"
-                    class="prose prose-lg prose-green mx-auto mt-8 overflow-x-hidden text-gray-500 dark:text-gray-400 md:prose-xl lg:max-w-none"
-                    :content="$article->body"
-                />
-
-                <div class="mt-6 border-t border-gray-200 pt-5 dark:border-white/20 sm:hidden">
-                    <div class="space-y-4">
-                        <x-link :href="route('profile', $user->username)" class="block shrink-0">
-                            <div class="flex items-center">
-                                <div>
-                                    <img
-                                        class="inline-block size-9 rounded-full"
-                                        src="{{ $user->profile_photo_url }}"
-                                        alt="{{ $user->username }}"
-                                    />
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-medium text-gray-900 dark:text-white">
-                                        {{ $user->name }}
-                                    </p>
-                                    <p class="text-xs text-gray-400 dark:text-gray-500">
-                                        {{ '@' . $user->username }}
-                                    </p>
-                                </div>
-                            </div>
-                        </x-link>
-                        @if ($user->bio)
-                            <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">
-                                {{ $user->bio }}
-                            </p>
-                        @endif
-
-                        <div class="flex space-x-3">
-                            @if ($user->twitter())
-                                <a
-                                    href="https://twitter.com/{{ $user->twitter() }}"
-                                    class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
-                                >
-                                    <span class="sr-only">Twitter</span>
-                                    <x-icon.twitter class="size-6" />
-                                </a>
-                            @endif
-
-                            @if ($user->linkedin())
-                                <a
-                                    href="https://linkedin.com/in/{{ $user->linkedin() }}"
-                                    class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
-                                >
-                                    <span class="sr-only">LinkedIn</span>
-                                    <x-icon.linkedin class="size-6" />
-                                </a>
-                            @endif
-
-                            @if ($user->githubUsername())
-                                <a
-                                    href="https://github.com/{{ $user->githubUsername() }}"
-                                    class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
-                                >
-                                    <span class="sr-only">GitHub</span>
-                                    <x-icon.github class="size-6" />
-                                </a>
-                            @endif
-                        </div>
-                    </div>
-                </div>
-
-                <div class="py-6">
-                    <p class="text-base font-normal text-gray-500 dark:text-gray-400">
-                        {{ __('pages/article.share_article') }}
-                    </p>
-                    <div class="mt-4 space-y-4 sm:flex sm:items-center sm:space-x-4 sm:space-y-0">
-                        <a
-                            href="https://twitter.com/share?text={{ urlencode('"' . $article->title . '" par ' . ($article->user->twitter() ? '@' . $article->user->twitter() : $article->user->name) . ' #caparledev - ') }}&url={{ urlencode(route('articles.show', $article)) }}"
-                            class="inline-flex items-center rounded-md border border-skin-base bg-skin-button px-4 py-2 text-sm font-normal leading-5 text-gray-500 dark:text-gray-400 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-body"
-                        >
-                            <x-icon.twitter class="size-5" aria-hidden="true" />
-                            Twitter
-                        </a>
-                        <a
-                            href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('articles.show', $article)) }}&quote={{ urlencode('"' . $article->title . '" par ' . $article->user->name . ' - ') }}"
-                            class="inline-flex items-center rounded-md border border-skin-base bg-skin-button px-4 py-2 text-sm font-normal leading-5 text-gray-500 dark:text-gray-400 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-body"
-                        >
-                            <x-icon.facebook class="size-5" aria-hidden="true" />
-                            Facebook
-                        </a>
-                        <a
-                            href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('articles.show', $article)) }}&title={{ urlencode('"' . $article->title . '" par ' . $article->user->name . ' - ') }}"
-                            class="inline-flex items-center rounded-md border border-skin-base bg-skin-button px-4 py-2 text-sm font-normal leading-5 text-gray-500 dark:text-gray-400 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-body"
-                        >
-                            <x-icon.linkedin class="size-5" aria-hidden="true" />
-                            LinkedIn
-                        </a>
-                    </div>
-                </div>
-
-                @canany([App\Policies\ArticlePolicy::UPDATE, App\Policies\ArticlePolicy::DELETE], $article)
-                    <div class="relative mt-10">
-                        <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                            <div class="w-full border-t border-gray-300"></div>
-                        </div>
-                        <div class="relative flex justify-center">
-                            <span class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm">
-                                <x-buttons.default
-                                    :href="route('articles.edit', $article)"
-                                    class="relative inline-flex items-center rounded-none rounded-l-lg border border-gray-300"
-                                >
-                                    <span class="sr-only">{{ __('actions.edit') }}</span>
-                                    <x-untitledui-pencil class="size-5" aria-hidden="true" />
-                                </x-buttons.default>
-
-                                @if ($article->isNotApproved())
-                                    @hasanyrole('admin|moderator')
-                                        <x-buttons.default
-                                            onclick="Livewire.dispatch('openModal', { component: 'modals.approved-article', arguments: {{ json_encode([$article->id]) }} })"
-                                            type="button"
-                                            class="relative -ml-px inline-flex items-center rounded-none border border-gray-200 text-green-500 focus:z-10 focus:border-green-500 focus:outline-none focus:ring-green-500"
-                                        >
-                                            <span class="sr-only">{{ __('actions.approve') }}</span>
-                                            <x-untitledui-check-verified-02 class="size-5" aria-hidden="true" />
-                                        </x-buttons.default>
-                                    @endhasanyrole
-                                @endif
-
-                                <x-buttons.default
-                                    onclick="Livewire.dispatch('openModal', { component: 'modals.delete-article', arguments: {{ json_encode([$article->id]) }} })"
-                                    type="button"
-                                    class="relative inline-flex items-center rounded-none rounded-r-lg border border-gray-200"
-                                >
-                                    <span class="sr-only">{{ __('actions.delete') }}</span>
-                                    <x-untitledui-trash-03 class="size-5" aria-hidden="true" />
-                                </x-buttons.default>
-                            </span>
-                        </div>
-                    </div>
-                @endcanany
-
-                @if ($next || $previous)
-                    <footer class="border-skin-light mt-10 border-t lg:hidden">
-                        <div class="space-y-8 py-8 sm:flex sm:items-center sm:justify-between sm:space-y-0">
-                            @if ($next)
-                                <div>
-                                    <h2 class="text-xs uppercase leading-5 tracking-wide text-gray-500 dark:text-gray-400">
-                                        Article suivant
-                                    </h2>
-                                    <div class="mt-3 flex items-start space-x-2">
-                                        <img
-                                            class="size-10 rounded-md object-cover shadow-lg"
-                                            src="{{ $next->getFirstMediaUrl('media') ?? asset('images/socialcard.png') }}"
-                                            alt="{{ $next->slug }}"
-                                        />
-                                        <div class="flex flex-col space-y-1">
-                                            <a
-                                                class="line-clamp-2 text-base font-medium leading-4 text-gray-900 hover:text-primary-600-hover"
-                                                href="{{ route('articles.show', $next) }}"
-                                            >
-                                                {{ $next->title }}
-                                            </a>
-                                            <span class="text-sm text-skin-muted">
-                                                {{ $next->readTime() }} min de lecture
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            @endif
-
-                            @if ($previous)
-                                <div>
-                                    <h2 class="text-xs uppercase leading-5 tracking-wide text-gray-500 dark:text-gray-400">
-                                        Article précédent
-                                    </h2>
-                                    <div class="mt-3 flex items-start space-x-2">
-                                        <img
-                                            class="size-10 rounded-md object-cover shadow-lg"
-                                            src="{{ $previous->getFirstMediaUrl('media') ?? asset('images/socialcard.png') }}"
-                                            alt="{{ $previous->slug }}"
-                                        />
-                                        <div class="flex flex-col space-y-1">
-                                            <a
-                                                class="line-clamp-2 text-base font-medium leading-4 text-gray-900 hover:text-primary-600-hover"
-                                                href="{{ route('articles.show', $previous) }}"
-                                            >
-                                                {{ $previous->title }}
-                                            </a>
-                                            <span class="text-sm text-skin-muted">
-                                                {{ $previous->readTime() }} min de lecture
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            @endif
-                        </div>
-                    </footer>
-                @endif
-            </div>
-            <div class="relative hidden lg:col-span-2 lg:block">
-                <x-sticky-content class="space-y-10">
-                    <x-sponsors />
-
-                    @if ($article->showToc())
-                        <div class="rounded-lg bg-skin-card px-4 py-6 shadow-lg">
-                            <h4
-                                class="text-sm font-semibold uppercase leading-tight tracking-widest text-gray-900"
-                            >
-                                Table des matières
-                            </h4>
-                            <x-toc class="toc mt-4" id="toc">{!! $article->body !!}</x-toc>
-                        </div>
-                    @endif
-
-                    <x-ads />
-
-                    <x-discord />
-                </x-sticky-content>
-            </div>
-        </article>
-    </x-container>
-
-    @if ($article->showToc())
-        <div x-data="{ openTOC: false }" class="relative lg:hidden">
-            <button
-                @click="openTOC =! openTOC"
-                class="border-skin-light fixed right-0 top-40 z-30 -mr-1 mt-8 flex size-10 items-center justify-center rounded-l-lg border bg-skin-card px-1.5 py-1 text-gray-500 dark:text-gray-400 shadow hover:bg-skin-card-muted hover:text-gray-900 sm:mt-12 md:w-auto lg:hidden"
-            >
-                <svg class="h-3.5 w-3.5" viewBox="0 0 24 21" xmlns="http://www.w3.org/2000/svg">
-                    <g fill="currentColor" fill-rule="nonzero">
-                        <circle cx="2.286" cy="2.286" r="2.286" />
-                        <circle cx="2.286" cy="10.286" r="2.286" />
-                        <circle cx="2.286" cy="18.286" r="2.286" />
-                        <path
-                            d="M9.143 4.571h12.571a2.286 2.286 0 000-4.571H9.143a2.286 2.286 0 000 4.571zM21.714 8H9.143a2.286 2.286 0 000 4.571h12.571a2.286 2.286 0 000-4.571zM21.714 16H9.143a2.286 2.286 0 000 4.571h12.571a2.286 2.286 0 100-4.571z"
-                        />
-                    </g>
-                </svg>
-                <span class="ml-1 hidden text-sm font-semibold uppercase md:block">Sommaire</span>
-            </button>
-
-            <div
-                @keydown.window.escape="openTOC = false"
-                x-show="openTOC"
-                class="fixed inset-0 z-50 overflow-hidden"
-                aria-labelledby="slide-over-title"
-                x-ref="dialog"
-                aria-modal="true"
-            >
-                <div class="absolute inset-0 overflow-hidden">
-                    <div class="absolute inset-0" @click="openTOC = false" aria-hidden="true">
-                        <div class="fixed inset-y-0 right-0 mt-16 flex max-w-full pl-10">
-                            <div
-                                x-show="openTOC"
-                                x-transition:enter="transform transition duration-500 ease-in-out sm:duration-700"
-                                x-transition:enter-start="translate-x-full"
-                                x-transition:enter-end="translate-x-0"
-                                x-transition:leave="transform transition duration-500 ease-in-out sm:duration-700"
-                                x-transition:leave-start="translate-x-0"
-                                x-transition:leave-end="translate-x-full"
-                                class="w-screen max-w-xs"
-                            >
-                                <div
-                                    class="flex h-[450px] flex-col overflow-y-scroll rounded-l-lg bg-skin-card py-6 shadow-xl"
-                                >
-                                    <div class="px-4 sm:px-6">
-                                        <div class="flex items-start justify-between">
-                                            <h2 class="text-lg font-medium text-gray-900" id="slide-over-title">
-                                                Table des Matières
-                                            </h2>
-                                            <div class="ml-3 flex h-7 items-center">
-                                                <button
-                                                    type="button"
-                                                    class="rounded-md bg-skin-card text-skin-muted hover:text-gray-500 dark:text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
-                                                    @click="openTOC = false"
-                                                >
-                                                    <span class="sr-only">Fermer</span>
-                                                    <x-untitledui-x class="size-6" />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="relative mt-6 flex-1 px-4 sm:px-6">
-                                        <x-toc class="toc" id="toc">{!! $article->body !!}</x-toc>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    @endif
-</x-app-layout>
diff --git a/resources/views/components/articles/card-author.blade.php b/resources/views/components/articles/card-author.blade.php
new file mode 100644
index 00000000..bfdeb9dc
--- /dev/null
+++ b/resources/views/components/articles/card-author.blade.php
@@ -0,0 +1,61 @@
+@props([
+    'article',
+])
+
+@php
+    $media = ! empty($article->getFirstMediaUrl('media'))
+        ? $article->getFirstMediaUrl('media')
+        : asset('images/socialcard.png')
+@endphp
+
+<article class="relative group" wire:key="{{ $article->slug() }}">
+    <div class="relative w-full">
+        <img
+            src="{{ $media }}"
+            alt="{{ $article->title }}"
+            class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] dark:bg-gray-800"
+        >
+        <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10 dark:ring-white/10"></div>
+    </div>
+    <div class="max-w-xl mt-4">
+        <div class="flex items-center gap-x-4 text-xs">
+            @if ($article->tags->isNotEmpty())
+                <div class="flex items-center gap-x-4">
+                    @foreach ($article->tags as $tag)
+                        <x-tag :tag="$tag" />
+                    @endforeach
+                </div>
+            @endif
+
+            <x-articles.sponsored :isSponsored="$article->isSponsored()" />
+        </div>
+        <div class="group relative">
+            <h3 class="mt-3 text-lg/6 font-heading font-bold text-gray-900 group-hover:text-primary-600 dark:text-white lg:text-xl">
+                <x-link :href="route('articles.show', $article)">
+                    <span class="absolute inset-0"></span>
+                    {{ $article->title }}
+                </x-link>
+            </h3>
+            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600 dark:text-gray-300">
+                {!! $article->excerpt(175) !!}
+            </p>
+        </div>
+        <div class="relative mt-8">
+            <div class="text-sm/6 flex items-center gap-4">
+                <x-link :href="route('profile', $article->user->username)" class="inline-flex items-center gap-2 text-gray-700 dark:text-gray-300">
+                    <x-user.avatar
+                        :user="$article->user"
+                        class="size-6 ring-1 ring-offset-2 ring-gray-200 ring-offset-gray-50 dark:ring-white/20 dark:ring-offset-gray-900"
+                        span="-right-1 top-0 size-3 ring-1"
+                    />
+                    <span class="absolute inset-0"></span>
+                    {{ $article->user->name }}
+                </x-link>
+                <div class="w-[1px] h-4 border-l border-gray-200 dark:border-white/20"></div>
+                <time class="capitalize text-gray-500 dark:text-gray-400" datetime="{{ $article->publishedAt()->format('Y-m-d') }}">
+                    {{ $article->publishedAt()->isoFormat('LL') }}
+                </time>
+            </div>
+        </div>
+    </div>
+</article>
diff --git a/resources/views/components/articles/card-with-author.blade.php b/resources/views/components/articles/card-with-author.blade.php
deleted file mode 100644
index 4bbc02e4..00000000
--- a/resources/views/components/articles/card-with-author.blade.php
+++ /dev/null
@@ -1,96 +0,0 @@
-@props([
-    'article',
-])
-
-<article class="border-b border-skin-base pb-8" aria-labelledby="post-title-{{ $article->id }}">
-    <div>
-        <div class="flex space-x-3">
-            <div class="flex-shrink-0">
-                <x-user.avatar :user="$article->user" class="size-10" />
-            </div>
-            <div class="min-w-0 flex-1">
-                <p class="text-sm font-medium text-gray-900">
-                    <a href="{{ route('profile', $article->user->username) }}" class="hover:underline">
-                        {{ $article->user->name }}
-                    </a>
-                </p>
-                <p class="text-sm text-gray-500 dark:text-gray-400">
-                    <time class="capitalize" datetime="{{ $article->publishedAt()->format('Y-m-d') }}">
-                        {{ $article->publishedAt()->isoFormat('LL') }}
-                    </time>
-                </p>
-            </div>
-        </div>
-        <h2 id="post-title-{{ $article->id }}" class="mt-4 text-lg font-medium leading-7 text-gray-900">
-            {{ $article->title }}
-        </h2>
-    </div>
-    <a href="{{ route('articles.show', $article) }}" class="group mt-2 block space-y-4">
-        <p class="text-base leading-6 text-gray-700 dark:text-gray-300/70">
-            {!! $article->excerpt(175) !!}
-        </p>
-        <div class="relative h-96 overflow-hidden">
-            <img
-                class="h-full w-full rounded-lg object-cover shadow-lg group-hover:opacity-75"
-                src="{{ $article->getFirstMediaUrl('media') }}"
-                alt="{{ $article->title }}"
-            />
-        </div>
-        <div class="flex justify-between space-x-8">
-            <div class="flex space-x-6">
-                <span class="inline-flex items-center text-sm">
-                    <button type="button" class="inline-flex space-x-2 text-skin-muted hover:text-gray-500 dark:text-gray-400">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            class="size-5"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
-                            />
-                        </svg>
-                        <span class="font-medium text-gray-900">{{ $article->reactions_count }}</span>
-                        <span class="sr-only">{{ __('mentions j\'aime') }}</span>
-                    </button>
-                </span>
-                <span class="inline-flex items-center text-sm">
-                    <div class="inline-flex space-x-2 text-skin-muted">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            class="size-5"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                            />
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                        </svg>
-                        <span class="font-medium text-gray-900">{{ $article->views_count }}</span>
-                        <span class="sr-only">{{ __('vues') }}</span>
-                    </div>
-                </span>
-            </div>
-            <div class="flex items-center space-x-3">
-                @if ($article->tags->isNotEmpty())
-                    <div class="flex items-center space-x-2">
-                        @foreach ($article->tags as $tag)
-                            <x-tag :tag="$tag" />
-                        @endforeach
-                    </div>
-                @endif
-
-                <x-articles.sponsored :isSponsored="$article->isSponsored()" />
-            </div>
-        </div>
-    </a>
-</article>
diff --git a/resources/views/components/articles/card.blade.php b/resources/views/components/articles/card.blade.php
index c9ccdfad..41d90401 100644
--- a/resources/views/components/articles/card.blade.php
+++ b/resources/views/components/articles/card.blade.php
@@ -7,23 +7,45 @@
 <div
     @class(['relative group space-y-6', 'lg:grid lg:grid-cols-3 lg:items-start lg:gap-6 lg:space-y-0' => $isSummary])
 >
-    <div class="aspect-h-2 aspect-w-3">
-        <img
-            class="rounded-lg object-cover shadow-lg group-hover:opacity-75"
-            src="{{ $article->getFirstMediaUrl('media') }}"
-            alt="{{ $article->title }}"
-        />
-    </div>
-    <div @class(['space-y-4', 'sm:col-span-2' => $isSummary])>
+    @php
+        $media = ! empty($article->getFirstMediaUrl('media'))
+            ? $article->getFirstMediaUrl('media')
+            : asset('images/socialcard.png')
+    @endphp
+
+    @if(! $isSummary)
+        <div class="aspect-[2/1] w-full rounded-lg bg-gray-100 shadow-sm transition group-hover:opacity-80">
+            <img
+                class="rounded-lg object-cover shadow-sm group-hover:opacity-75"
+                src="{{ $media }}"
+                alt="{{ $article->title }}"
+            />
+        </div>
+    @endif
+
+    <div @class(['space-y-4', 'sm:col-span-3' => $isSummary])>
         <div>
-            <time
-                datetime="{{ $article->publishedAt()->format('Y-m-d') }}"
-                class="text-sm capitalize leading-5 text-gray-500 dark:text-gray-400"
-            >
-                {{ $article->publishedAt()->isoFormat('LL') }}
-            </time>
-            <x-link :href="route('articles.show', $article)" class="group mt-0.5 flex items-center justify-between gap-2">
-                <h4 class="text-lg font-semibold leading-6 text-gray-900 transition duration-200 ease-in-out group-hover:text-primary-600">
+            <div @class([
+                'flex',
+                'items-center justify-between gap-4' => ! $isSummary,
+                'flex-col justify-between gap-2' => $isSummary,
+            ])>
+                <time
+                    datetime="{{ $article->publishedAt()->format('Y-m-d') }}"
+                    class="text-sm capitalize leading-5 text-gray-500 dark:text-gray-400"
+                >
+                    {{ $article->publishedAt()->isoFormat('LL') }}
+                </time>
+                @if ($article->tags->isNotEmpty())
+                    <div class="flex items-center gap-2">
+                        @foreach ($article->tags as $tag)
+                            <x-tag :tag="$tag" />
+                        @endforeach
+                    </div>
+                @endif
+            </div>
+            <x-link :href="route('articles.show', $article)" class="group mt-4 flex items-center justify-between gap-2">
+                <h4 class="text-lg font-bold font-heading leading-6 text-gray-900 transition duration-200 ease-in-out group-hover:text-primary-600 lg:text-xl">
                     {{ $article->title }}
                 </h4>
                 @if ($iconLink)
@@ -35,16 +57,5 @@ class="text-sm capitalize leading-5 text-gray-500 dark:text-gray-400"
                 {!! $article->excerpt(150) !!}
             </p>
         </div>
-        <div class="flex items-center gap-3">
-            @if ($article->tags->isNotEmpty())
-                <div class="flex items-center gap-2">
-                    @foreach ($article->tags as $tag)
-                        <x-tag :tag="$tag" />
-                    @endforeach
-                </div>
-            @endif
-
-            <x-articles.sponsored :isSponsored="$article->isSponsored()" />
-        </div>
     </div>
 </div>
diff --git a/resources/views/components/articles/filter.blade.php b/resources/views/components/articles/filter.blade.php
deleted file mode 100644
index 4457225d..00000000
--- a/resources/views/components/articles/filter.blade.php
+++ /dev/null
@@ -1,131 +0,0 @@
-@props([
-    'selectedSortBy',
-    'forMobile' => false,
-])
-
-@if (! $forMobile)
-    <div class="space-y-1 pb-8">
-        <button
-            type="button"
-            wire:click="sortBy('recent')"
-            aria-current="{{ $selectedSortBy === 'recent' ? 'page' : 'false' }}"
-            class="{{ $selectedSortBy === 'recent' ? 'bg-skin-link text-gray-900' : 'text-gray-500 dark:text-gray-400' }} group flex w-full items-center rounded-md px-3 py-2 font-sans text-sm font-medium"
-        >
-            <svg
-                class="-ml-1 mr-3 size-6 shrink-0 text-gray-500 dark:text-gray-400"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    d="M15.596 15.696h-7.22M15.596 11.937h-7.22M11.131 8.177H8.376"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-                <path
-                    clip-rule="evenodd"
-                    d="M3.61 12c0 6.937 2.098 9.25 8.391 9.25 6.294 0 8.391-2.313 8.391-9.25 0-6.937-2.097-9.25-8.391-9.25C5.708 2.75 3.61 5.063 3.61 12z"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-            </svg>
-            <span class="truncate">Récent</span>
-        </button>
-
-        <button
-            type="button"
-            wire:click="sortBy('popular')"
-            aria-current="{{ $selectedSortBy === 'popular' ? 'page' : 'false' }}"
-            class="{{ $selectedSortBy === 'popular' ? 'bg-skin-link text-gray-900' : 'text-gray-500 dark:text-gray-400' }} group flex w-full items-center rounded-md px-3 py-2 font-sans text-sm font-medium"
-        >
-            <svg
-                class="-ml-1 mr-3 size-6 shrink-0 text-skin-muted group-hover:text-gray-500 dark:text-gray-400"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    clip-rule="evenodd"
-                    d="M12 3C9.964 3 9.771 6.547 8.56 7.8c-1.213 1.253-4.982-.18-5.505 2.044-.523 2.225 2.867 2.98 3.285 4.89.42 1.909-1.65 4.59.12 5.926 1.77 1.334 3.674-1.685 5.54-1.685s3.77 3.019 5.54 1.685c1.77-1.335-.3-4.017.12-5.927.419-1.909 3.808-2.664 3.285-4.889-.522-2.224-4.292-.791-5.503-2.044C14.23 6.547 14.036 3 12 3z"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-            </svg>
-            <span class="truncate">Populaire</span>
-        </button>
-
-        <button
-            type="button"
-            wire:click="sortBy('trending')"
-            aria-current="{{ $selectedSortBy === 'trending' ? 'page' : 'false' }}"
-            class="{{ $selectedSortBy === 'trending' ? 'bg-skin-link text-gray-900' : 'text-gray-500 dark:text-gray-400' }} group flex w-full items-center rounded-md px-3 py-2 font-sans text-sm font-medium"
-        >
-            <svg
-                class="-ml-1 mr-3 size-6 shrink-0 text-skin-muted group-hover:text-gray-500 dark:text-gray-400"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    d="M6.98 4.601V17.22M2.9 8.7s2.169-4.1 4.078-4.1c1.908 0 4.078 4.1 4.078 4.1M16.906 19.428V6.81M20.985 15.329s-2.17 4.1-4.078 4.1c-1.908 0-4.078-4.1-4.078-4.1"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-            </svg>
-            <span class="truncate">Tendance</span>
-        </button>
-    </div>
-@else
-    <div class="mx-auto mt-10 max-w-lg lg:hidden">
-        <nav class="relative z-0 flex divide-x divide-skin-base rounded-lg shadow" aria-label="Tabs">
-            <button
-                type="button"
-                wire:click="sortBy('recent')"
-                aria-current="{{ $selectedSortBy === 'recent' ? 'page' : 'false' }}"
-                class="{{ $selectedSortBy === 'recent' ? 'text-gray-900' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900' }} group relative w-full min-w-0 flex-1 overflow-hidden rounded-l-lg bg-skin-card p-4 text-center text-sm font-medium hover:bg-skin-card-muted focus:z-10 sm:px-6"
-            >
-                <span>Récents</span>
-                <span
-                    aria-hidden="true"
-                    class="{{ $selectedSortBy === 'recent' ? 'bg-skin-primary' : 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"
-                ></span>
-            </button>
-
-            <button
-                type="button"
-                wire:click="sortBy('popular')"
-                aria-current="{{ $selectedSortBy === 'popular' ? 'page' : 'false' }}"
-                class="{{ $selectedSortBy === 'popular' ? 'text-gray-900' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900' }} group relative w-full min-w-0 flex-1 overflow-hidden bg-skin-card p-4 text-center text-sm font-medium hover:bg-skin-card-muted focus:z-10 sm:px-6"
-            >
-                <span>Populaire</span>
-                <span
-                    aria-hidden="true"
-                    class="{{ $selectedSortBy === 'popular' ? 'bg-skin-primary' : 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"
-                ></span>
-            </button>
-
-            <button
-                type="button"
-                wire:click="sortBy('trending')"
-                aria-current="{{ $selectedSortBy === 'trending' ? 'page' : 'false' }}"
-                class="{{ $selectedSortBy === 'trending' ? 'text-gray-900' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900' }} group relative w-full min-w-0 flex-1 overflow-hidden rounded-r-lg bg-skin-card p-4 text-center text-sm font-medium hover:bg-skin-card-muted focus:z-10 sm:px-6"
-            >
-                <span>Tendance</span>
-                <span
-                    aria-hidden="true"
-                    class="{{ $selectedSortBy === 'trending' ? 'bg-skin-primary' : 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"
-                ></span>
-            </button>
-        </nav>
-    </div>
-@endif
diff --git a/resources/views/components/articles/overview.blade.php b/resources/views/components/articles/overview.blade.php
index a08bd392..8191d9e3 100644
--- a/resources/views/components/articles/overview.blade.php
+++ b/resources/views/components/articles/overview.blade.php
@@ -2,19 +2,25 @@
     'article',
 ])
 
+@php
+    $media = ! empty($article->getFirstMediaUrl('media'))
+        ? $article->getFirstMediaUrl('media')
+        : asset('images/socialcard.png');
+@endphp
+
 <article
-    id="article-title-{{ $article->id }}"
+    id="{{ $article->slug }}"
     class="space-y-4 lg:grid lg:grid-cols-3 lg:items-start lg:gap-6 lg:space-y-0"
 >
-    <a href="{{ route('articles.show', $article) }}" class="group">
+    <x-link :href="route('articles.show', $article)" class="group">
         <div class="aspect-h-2 aspect-w-3">
             <img
                 class="rounded-lg object-cover shadow-lg group-hover:opacity-75"
-                src="{{ $article->getFirstMediaUrl('media') }}"
+                src="{{ $media }}"
                 alt="{{ $article->title }}"
             />
         </div>
-    </a>
+    </x-link>
     <div class="sm:col-span-2">
         <div class="flex items-center space-x-3">
             @if ($article->tags->isNotEmpty())
@@ -28,33 +34,33 @@ class="rounded-lg object-cover shadow-lg group-hover:opacity-75"
             <x-articles.sponsored :isSponsored="$article->isSponsored()" />
         </div>
         <div class="mt-2">
-            <a href="{{ route('articles.show', $article) }}" class="group">
+            <x-link :href="route('articles.show', $article)" class="group">
                 <h4 class="font-sans text-lg font-semibold leading-7 text-gray-900 group-hover:text-primary-600">
                     {{ $article->title }}
                 </h4>
-            </a>
+            </x-link>
             <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-400">
                 {!! $article->excerpt(130) !!}
             </p>
             <div class="mt-3 flex items-center font-sans">
                 <div class="shrink-0">
-                    <a href="{{ route('profile', $article->user->username) }}">
+                    <x-link :href="route('profile', $article->user->username)">
                         <span class="sr-only">{{ $article->user->name }}</span>
                         <x-user.avatar :user="$article->user" class="size-10" />
-                    </a>
+                    </x-link>
                 </div>
                 <div class="ml-3">
                     <p class="text-sm font-medium text-gray-900">
-                        <a href="{{ route('profile', $article->user->username) }}" class="hover:underline">
+                        <x-link :href="route('profile', $article->user->username)" class="hover:underline">
                             {{ $article->user->name }}
-                        </a>
+                        </x-link>
                     </p>
                     <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400/60">
                         <time class="capitalize" datetime="{{ $article->publishedAt()->format('Y-m-d') }}">
                             {{ $article->publishedAt()->isoFormat('LL') }}
                         </time>
                         <span aria-hidden="true">&middot;</span>
-                        <span>{{ __(':time min de lecture', ['time' => $article->readTime()]) }}</span>
+                        <span>{{ __('global.read_time', ['time' => $article->readTime()]) }}</span>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/components/danger-button.blade.php b/resources/views/components/danger-button.blade.php
deleted file mode 100644
index eb349456..00000000
--- a/resources/views/components/danger-button.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<button
-    {{ $attributes->twMerge(['class' => 'inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-negative-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-negative-500 focus:outline-none focus:border-negative-700 sm:text-sm sm:leading-5 focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-negative-500']) }}
->
-    {{ $slot }}
-</button>
diff --git a/resources/views/components/section-header.blade.php b/resources/views/components/section-header.blade.php
index 33226faf..1a0a5e21 100644
--- a/resources/views/components/section-header.blade.php
+++ b/resources/views/components/section-header.blade.php
@@ -4,6 +4,10 @@
 ])
 
 <div>
-    <h3 class="font-heading font-bold text-xl leading-7 text-gray-900 dark:text-white sm:text-2xl">{{ $title }}</h3>
-    <p class="mt-2 leading-6 text-gray-500 dark:text-gray-400 sm:max-w-3xl sm:text-base">{{ $content }}</p>
+    <h3 class="font-heading font-bold text-xl leading-7 text-gray-900 dark:text-white sm:text-2xl">
+        {{ $title }}
+    </h3>
+    <p class="mt-2 leading-6 text-gray-500 dark:text-gray-400 sm:max-w-3xl">
+        {{ $content }}
+    </p>
 </div>
diff --git a/resources/views/components/sponsors.blade.php b/resources/views/components/sponsors.blade.php
index 37c40c52..22b309de 100644
--- a/resources/views/components/sponsors.blade.php
+++ b/resources/views/components/sponsors.blade.php
@@ -1,7 +1,9 @@
 <div {{ $attributes->twMerge(['class' => 'text-right']) }}>
-    <h4 class="font-sans text-sm font-semibold uppercase leading-5 tracking-wide text-gray-900">Sponsors</h4>
+    <h4 class="font-sans text-sm font-semibold uppercase leading-5 tracking-wide text-gray-900">
+        Sponsors
+    </h4>
     <div class="mt-5 space-y-5">
-        <a href="https://laravelshopper.io" class="flex items-center justify-end">
+        <a href="https://laravelshopper.dev" class="flex items-center justify-end">
             <img
                 class="logo-white h-10"
                 src="{{ asset('/images/sponsors/shopper-logo.svg') }}"
diff --git a/resources/views/components/tag.blade.php b/resources/views/components/tag.blade.php
index 401e3177..dced0759 100644
--- a/resources/views/components/tag.blade.php
+++ b/resources/views/components/tag.blade.php
@@ -2,9 +2,9 @@
     'tag',
 ])
 
-<span class="inline-flex items-center gap-1.5 rounded-full border border-gray-300 px-2.5 py-1.5 text-sm font-medium leading-none text-gray-700 dark:bg-gray-800 dark:text-white dark:border-white/20">
+<x-link :href="route('articles.tag', $tag)" class="inline-flex items-center text-sm gap-1.5 relative z-10 rounded-lg bg-gray-100 px-2 py-1 font-medium text-gray-600 hover:bg-gray-200/50 dark:bg-gray-800 dark:text-white">
     <svg class="brand-{{ $tag->slug() }} size-2" fill="currentColor" viewBox="0 0 8 8">
         <circle cx="4" cy="4" r="3" />
     </svg>
-    {{ $tag->name() }}
-</span>
+    {{ $tag->name }}
+</x-link>
diff --git a/resources/views/components/view-mode.blade.php b/resources/views/components/view-mode.blade.php
deleted file mode 100644
index 9f28f7aa..00000000
--- a/resources/views/components/view-mode.blade.php
+++ /dev/null
@@ -1,22 +0,0 @@
-@props([
-    'mode',
-    'isViewMode' => false,
-])
-
-<x-default-button
-    type="button"
-    wire:click="changeViewMode('{{ $mode }}')"
-    @class([
-        'border-skin-base shadow-none focus:ring-1',
-        'relative bg-skin-button-hover' => $isViewMode,
-        'bg-transparent' => ! $isViewMode,
-    ])
->
-    @if ($isViewMode)
-        <span class="absolute right-0 top-0 -mr-1 -mt-1 flex h-3 w-3">
-            <span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
-        </span>
-    @endif
-
-    {{ $slot }}
-</x-default-button>
diff --git a/resources/views/components/winter-is-coming.blade.php b/resources/views/components/winter-is-coming.blade.php
deleted file mode 100644
index 15040ee6..00000000
--- a/resources/views/components/winter-is-coming.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<ul class="g-snows">
-    @for ($i = 0; $i < 100; $i++)
-        <li></li>
-    @endfor
-</ul>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 13368147..d3362cf8 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -53,7 +53,7 @@ class="inline-flex items-center rounded-full bg-green-700 p-1 pr-2 text-white sm
                     :content="__('pages/home.popular_posts.description')"
                 />
                 <div
-                    class="mx-auto mt-8 grid max-w-xl gap-10 lg:mt-10 lg:max-w-none lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-3 lg:gap-x-8"
+                    class="mx-auto mt-8 grid max-w-xl gap-10 lg:mt-10 lg:max-w-none lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-3 lg:gap-x-12"
                 >
                     @foreach ($latestArticles as $article)
                         @if ($loop->first)
diff --git a/resources/views/livewire/articles/browse.blade.php b/resources/views/livewire/articles/browse.blade.php
deleted file mode 100644
index 06a4229a..00000000
--- a/resources/views/livewire/articles/browse.blade.php
+++ /dev/null
@@ -1,84 +0,0 @@
-<div class="lg:grid lg:grid-cols-9 lg:gap-10">
-    <div class="hidden lg:col-span-2 lg:block">
-        <x-sticky-content class="divide-y divide-skin-base">
-            <div class="pb-8">
-                <h4 class="text-base font-medium leading-6 text-gray-900">Affichage des articles</h4>
-                <div class="mt-5 flex items-center space-x-3">
-                    <x-view-mode mode="list" :isViewMode="$viewMode === 'list'">
-                        <svg
-                            class="mr-2 size-5 text-gray-500 dark:text-gray-400/60"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
-                            />
-                        </svg>
-                        Liste
-                    </x-view-mode>
-                    <x-view-mode mode="card" :isViewMode="$viewMode === 'card'">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            class="mr-2 size-5 text-gray-500 dark:text-gray-400/60"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
-                            />
-                        </svg>
-                        Carte
-                    </x-view-mode>
-                </div>
-            </div>
-            <div class="py-8">
-                <h4 class="text-base font-medium leading-6 text-gray-900">Tous les tags</h4>
-                <x-tags :tags="$tags" :selected-tag="$selectedTag" :showTagsColor="false" showTagsIcon />
-            </div>
-        </x-sticky-content>
-    </div>
-    <div x-data x-intersect="@this.call('loadMore')" class="lg:col-span-7 lg:grid lg:grid-cols-8 lg:gap-8">
-        <div class="lg:col-span-6">
-            <div class="border-b border-skin-base pb-5">
-                <h1 class="font-heading text-3xl font-extrabold leading-8 text-gray-900">Récentes publications</h1>
-                <p class="mt-2 max-w-4xl leading-5 text-gray-500 dark:text-gray-400">Tous les articles récemment publiés.</p>
-            </div>
-
-            <div class="mx-auto max-w-lg space-y-8 py-12 sm:space-y-10 lg:max-w-none">
-                @foreach ($articles as $article)
-                    @if ($viewMode === 'card')
-                        <x-articles.card-with-author :article="$article" />
-                    @else
-                        <x-articles.overview :article="$article" />
-                    @endif
-                @endforeach
-            </div>
-
-            @if ($articles->hasMorePages())
-                <div x-data x-intersect="@this.call('loadMore')" class="mt-5 flex justify-center">
-                    <p class="flex items-center">
-                        <x-loader class="text-primary-600" />
-                        Chargement...
-                    </p>
-                </div>
-            @endif
-        </div>
-
-        <div class="hidden lg:col-span-2 lg:block">
-            <x-sticky-content class="space-y-12">
-                <x-sponsors />
-                <x-ads />
-                <x-discord />
-            </x-sticky-content>
-        </div>
-    </div>
-</div>
diff --git a/resources/views/livewire/pages/articles/index.blade.php b/resources/views/livewire/pages/articles/index.blade.php
new file mode 100644
index 00000000..043fb52e
--- /dev/null
+++ b/resources/views/livewire/pages/articles/index.blade.php
@@ -0,0 +1,122 @@
+<div>
+    <div class="relative bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
+        <x-container class="relative flex items-center justify-between py-12 sm:py-16">
+            <div class="max-w-xl">
+                <h1 class="font-heading font-bold text-3xl text-gray-900 dark:text-white">
+                    {{ __('pages/article.blog') }}
+                </h1>
+                <p class="mt-1.5 text-lg text-gray-500 dark:text-gray-400">
+                    {{ __('pages/article.blog_summary') }}
+                </p>
+            </div>
+            <div class="hidden lg:block">
+                @include('ads.ln')
+            </div>
+        </x-container>
+        <div class="border-b border-gray-100 dark:border-white/10">
+            <x-container
+                x-data="{
+                    displayLeftArrow: false,
+                    displayRightArrow: true,
+                    element: document.getElementById('tags'),
+                    currentTab: document
+                        .getElementById('tags')
+                        .querySelector('.current'),
+
+                    slideLeft() {
+                        this.element.scrollLeft -= 100
+                        this.onScroll()
+                    },
+                    slideRight() {
+                        this.element.scrollLeft += 100
+                        this.onScroll()
+                    },
+                    onScroll() {
+                        this.displayLeftArrow = this.element.scrollLeft >= 20
+                        let maxScrollPosition =
+                            this.element.scrollWidth - this.element.clientWidth - 20
+                        this.displayRightArrow = this.element.scrollLeft <= maxScrollPosition
+                    },
+                    scrollToActive() {
+                        if (this.currentTab) {
+                            this.element.scrollLeft = this.currentTab.offsetLeft - 50
+                        }
+                    },
+                }"
+                x-init="scrollToActive()"
+                class="relative overflow-hidden"
+            >
+                <div
+                    x-cloak
+                    x-show="displayLeftArrow"
+                    x-transition:enter="transition duration-300 ease-out"
+                    x-transition:enter-start="-translate-x-2 opacity-0"
+                    x-transition:enter-end="translate-x-0 opacity-100"
+                    x-transition:leave="transition duration-300 ease-in"
+                    x-transition:leave-start="translate-x-0 opacity-100"
+                    x-transition:leave-end="-translate-x-2 opacity-0"
+                    class="absolute top-0 flex h-full w-32 items-center justify-start bg-gradient-to-r from-white px-2.5 dark:from-gray-800"
+                >
+                    <button
+                        @click="slideLeft()"
+                        type="button"
+                        class="flex size-8 items-center justify-center rounded-full text-gray-400 transition duration-200 ease-in-out hover:bg-gray-50 focus:outline-none dark:bg-gray-800 dark:text-gray-500"
+                    >
+                        <x-untitledui-chevron-left class="size-6" aria-hidden="true" />
+                    </button>
+                </div>
+
+                <nav
+                    @scroll="onScroll()"
+                    class="hide-scroll -mb-px flex items-center space-x-2 overflow-x-auto scroll-smooth pb-2 pl-4 pr-10"
+                    aria-label="Tabs"
+                    id="tags"
+                >
+                    @foreach($tags as $tag)
+                        <x-link
+                            :href="route('articles.tag', $tag)"
+                            class="inline-flex items-center rounded-lg py-1.5 px-3 text-nowrap gap-2 text-gray-500 transition-colors duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-700 dark:hover:bg-gray-900/70 dark:text-gray-400 dark:hover:text-white"
+                        >
+                            <x-dynamic-component :component="'icon.tags.'. $tag->slug()" class="size-5" aria-hidden="true" />
+                            {{ $tag->name }}
+                        </x-link>
+                    @endforeach
+                </nav>
+
+                <div
+                    x-show="displayRightArrow"
+                    x-transition:enter="transition duration-300 ease-out"
+                    x-transition:enter-start="translate-x-2 opacity-0"
+                    x-transition:enter-end="translate-x-0 opacity-100"
+                    x-transition:leave="transition duration-300 ease-in"
+                    x-transition:leave-start="translate-x-0 opacity-100"
+                    x-transition:leave-end="translate-x-2 opacity-0"
+                    class="absolute right-0 top-0 flex h-full w-32 items-center justify-end bg-gradient-to-l from-white px-2.5 dark:from-gray-800"
+                >
+                    <button
+                        @click="slideRight()"
+                        type="button"
+                        class="flex size-8 items-center justify-center rounded-full text-gray-400 transition duration-200 ease-in-out hover:bg-gray-50 focus:outline-none dark:bg-gray-800 dark:text-gray-500"
+                    >
+                        <x-untitledui-chevron-right class="size-6" aria-hidden="true" />
+                    </button>
+                </div>
+            </x-container>
+        </div>
+    </div>
+
+    <x-container x-data x-intersect="@this.call('loadMore')" class="py-12 lg:py-16">
+        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-12">
+            @foreach ($articles as $article)
+                <x-articles.card-author :article="$article" wire:key="{{ $article->slug() }}" />
+            @endforeach
+        </div>
+
+        @if ($articles->hasMorePages())
+            <p x-intersect="@this.call('loadMore')" class="mt-10 flex items-center justify-center gap-2">
+                <x-loader class="text-primary-600" aria-hidden="true" />
+                {{ __('global.loading') }}
+            </p>
+        @endif
+    </x-container>
+</div>
diff --git a/resources/views/livewire/pages/articles/single-post.blade.php b/resources/views/livewire/pages/articles/single-post.blade.php
new file mode 100644
index 00000000..e31fa940
--- /dev/null
+++ b/resources/views/livewire/pages/articles/single-post.blade.php
@@ -0,0 +1,168 @@
+<div>
+    @php
+        $next = $article->nextArticle();
+        $previous = $article->previousArticle();
+        $user = $article->user;
+        $media = $article->getFirstMediaUrl('media');
+    @endphp
+
+    <x-container class="py-12">
+        <nav class="flex items-center gap-2 text-sm" aria-label="Breadcrumb">
+            <x-link :href="route('home')" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white">
+                {{ __('global.navigation.home') }}
+            </x-link>
+            <span>
+                <x-untitledui-slash-divider
+                    class="size-4 text-gray-400 dark:text-gray-500"
+                    stroke-width="1.5"
+                    aria-hidden="true"
+                />
+            </span>
+            <x-link :href="route('articles')" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white">
+                {{ __('global.navigation.articles') }}
+            </x-link>
+        </nav>
+
+        <div class="mt-12 lg:mt-16">
+            <div class="lg:grid lg:grid-cols-3 lg:gap-16">
+                <div class="lg:col-span-2">
+                    <div class="flex items-center gap-2">
+                        <div class="inline-flex rounded-lg bg-primary-50 px-2.5 py-1 ring-1 ring-primary-100 dark:bg-primary-800/20 dark:ring-primary-800">
+                            <span class="text-primary-600 text-xs">
+                                {{ __('global.read_time', ['time' => $article->readTime()]) }}
+                            </span>
+                        </div>
+                        <span class="text-gray-500 dark:text-gray-400" aria-hidden="true">&middot;</span>
+                        <span class="text-sm leading-5 text-gray-500 dark:text-gray-400">
+                            {{ __('global.page_views', ['number' => $article->views_count]) }}
+                        </span>
+                    </div>
+                    <h1 class="mt-4 font-heading font-extrabold tracking-tight text-3xl text-gray-900 dark:text-white lg:text-5xl lg:leading-[3.5rem]">
+                        {{ $article->title }}
+                    </h1>
+                    <div class="mt-8 flex items-center justify-between gap-10">
+                        @if ($article->tags->isNotEmpty())
+                            <div class="flex items-center gap-2">
+                                @foreach ($article->tags as $tag)
+                                    <x-tag :tag="$tag" />
+                                @endforeach
+                            </div>
+                        @endif
+
+                        <div class="relative text-sm/6 flex items-center gap-4">
+                            <x-link :href="route('profile', $article->user->username)" class="inline-flex items-center gap-2 text-gray-700 dark:text-gray-300">
+                                <x-user.avatar
+                                    :user="$article->user"
+                                    class="size-6 ring-1 ring-offset-2 ring-gray-200 ring-offset-gray-50 dark:ring-white/20 dark:ring-offset-gray-900"
+                                    span="-right-1 top-0 size-3 ring-1"
+                                />
+                                <span class="absolute inset-0"></span>
+                                {{ $article->user->name }}
+                            </x-link>
+                            <div class="w-[1px] h-4 border-l border-gray-200 dark:border-white/20"></div>
+                            <time class="capitalize text-gray-500 dark:text-gray-400" datetime="{{ $article->publishedAt()->format('Y-m-d') }}">
+                                {{ $article->publishedAt()->isoFormat('LL') }}
+                            </time>
+                        </div>
+                    </div>
+                </div>
+
+                @if ($media)
+                    <div class="relative aspect-[16/9] lg:aspect-[3/2] overflow-hidden">
+                        <img
+                            class="rounded-xl object-cover shadow-sm size-full"
+                            src="{{ $media }}"
+                            alt="{{ $article->title }}"
+                        />
+                    </div>
+                @endif
+            </div>
+
+            <div class="mt-12 lg:grid lg:grid-cols-4 lg:gap-16 lg:mt-20">
+                <div class="overflow-x-hidden lg:col-span-3">
+                    <x-markdown-content
+                        id="content"
+                        class="prose prose-green text-gray-500 dark:text-gray-400 dark:prose-invert lg:max-w-none"
+                        :content="$article->body"
+                    />
+                </div>
+                <div class="hidden lg:block">
+                    <x-sticky-content class="space-y-10">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                {{ __('pages/article.share_article') }}
+                            </p>
+                            <div class="mt-4 flex flex-wrap gap-2">
+                                <a
+                                    href="https://twitter.com/share?text={{ urlencode('"' . $article->title . '" par ' . ($article->user->twitter() ? '@' . $article->user->twitter() : $article->user->name) . ' #caparledev - ') }}&url={{ urlencode(route('articles.show', $article)) }}"
+                                    class="inline-flex items-center gap-2 py-2 px-4 bg-white border-0 ring-1 ring-gray-200 dark:ring-white/20 rounded-lg shadow-sm text-sm text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-green-500 dark:bg-gray-800 dark:focus:ring-offset-gray-900"
+                                    target="_blank"
+                                >
+                                    <x-icon.twitter class="size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
+                                    Twitter
+                                </a>
+                                <a
+                                    href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('articles.show', $article)) }}&quote={{ urlencode('"' . $article->title . '" par ' . $article->user->name . ' - ') }}"
+                                    class="inline-flex items-center gap-2 py-2 px-4 bg-white border-0 ring-1 ring-gray-200 dark:ring-white/20 rounded-lg shadow-sm text-sm text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-green-500 dark:bg-gray-800 dark:focus:ring-offset-gray-900"
+                                    target="_blank"
+                                >
+                                    <x-icon.facebook class="size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
+                                    Facebook
+                                </a>
+                                <a
+                                    href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('articles.show', $article)) }}&title={{ urlencode('"' . $article->title . '" par ' . $article->user->name . ' - ') }}"
+                                    class="inline-flex items-center gap-2 py-2 px-4 bg-white border-0 ring-1 ring-gray-200 dark:ring-white/20 rounded-lg shadow-sm text-sm text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-green-500 dark:bg-gray-800 dark:focus:ring-offset-gray-900"
+                                    target="_blank"
+                                >
+                                    <x-icon.linkedin class="size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
+                                    LinkedIn
+                                </a>
+                            </div>
+                        </div>
+                        @if ($next || $previous)
+                            <div class="border-gray-200 border-t space-y-8 py-8 dark:border-white/10">
+                                @if ($next)
+                                    <div>
+                                        <h5 class="text-xs uppercase leading-5 tracking-wide text-gray-500 dark:text-gray-400">
+                                            {{ __('pages/article.next_article') }}
+                                        </h5>
+                                        <div class="mt-3 flex flex-col space-y-1">
+                                            <x-link
+                                                class="line-clamp-2 font-medium text-gray-700 dark:text-white hover:text-primary-600 dark:hover:text-primary-500"
+                                                :href="route('articles.show', $next)"
+                                            >
+                                                {{ $next->title }}
+                                            </x-link>
+                                            <span class="text-sm text-gray-400 dark:text-gray-500">
+                                                {{ __('global.read_time', ['time' => $next->readTime()]) }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                @endif
+
+                                @if ($previous)
+                                    <div>
+                                        <h5 class="text-xs uppercase leading-5 tracking-wide text-gray-500 dark:text-gray-400">
+                                            {{ __('pages/article.prev_article') }}
+                                        </h5>
+                                        <div class="mt-3 flex flex-col space-y-1">
+                                            <x-link
+                                                class="line-clamp-2 font-medium text-gray-700 dark:text-white hover:text-primary-600 dark:hover:text-primary-500"
+                                                :href="route('articles.show', $previous)"
+                                            >
+                                                {{ $previous->title }}
+                                            </x-link>
+                                            <span class="text-sm text-gray-400 dark:text-gray-500">
+                                                {{ __('global.read_time', ['time' => $previous->readTime()]) }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                @endif
+                            </div>
+                        @endif
+                    </x-sticky-content>
+                </div>
+            </div>
+        </div>
+    </x-container>
+</div>
diff --git a/resources/views/livewire/pages/articles/tag.blade.php b/resources/views/livewire/pages/articles/tag.blade.php
new file mode 100644
index 00000000..9f76390d
--- /dev/null
+++ b/resources/views/livewire/pages/articles/tag.blade.php
@@ -0,0 +1,45 @@
+<x-container class="py-12">
+    <header class="max-w-2xl">
+        <nav class="flex items-center gap-2 text-sm" aria-label="Breadcrumb">
+            <x-link :href="route('home')" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white">
+                {{ __('global.navigation.home') }}
+            </x-link>
+            <span>
+                <x-untitledui-slash-divider
+                    class="size-4 text-gray-400 dark:text-gray-500"
+                    stroke-width="1.5"
+                    aria-hidden="true"
+                />
+            </span>
+            <x-link :href="route('articles')" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white">
+                {{ __('global.navigation.articles') }}
+            </x-link>
+        </nav>
+        <div class="mt-4 flex items-center gap-4">
+            <x-dynamic-component :component="'icon.tags.'. $tag->slug()" class="h-8" aria-hidden="true" />
+            <h1 class="text-2xl font-bold tracking-tight font-heading text-gray-900 dark:text-white sm:text-3xl">
+                {{ $tag->name }}
+            </h1>
+        </div>
+        @if($tag->description)
+            <p class="mt-2 text-gray-500 dark:text-gray-400">
+                {{ $tag->description }}
+            </p>
+        @endif
+    </header>
+
+    <div x-data x-intersect="@this.call('loadMore')" class="mt-12 lg:mt-16">
+        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-12">
+            @foreach ($articles as $article)
+                <x-articles.card-author :article="$article" wire:key="{{ $article->slug() }}" />
+            @endforeach
+        </div>
+
+        @if ($articles->hasMorePages())
+            <p x-intersect="@this.call('loadMore')" class="mt-10 flex items-center justify-center gap-2">
+                <x-loader class="text-primary-600" aria-hidden="true" />
+                {{ __('global.loading') }}
+            </p>
+        @endif
+    </div>
+</x-container>
diff --git a/resources/views/livewire/pages/forum/detail-thread.blade.php b/resources/views/livewire/pages/forum/detail-thread.blade.php
index ac5707f4..233ce600 100644
--- a/resources/views/livewire/pages/forum/detail-thread.blade.php
+++ b/resources/views/livewire/pages/forum/detail-thread.blade.php
@@ -3,7 +3,7 @@
         <div class="space-y-3">
             <x-buttons.primary
                 type="button"
-                onclick="Livewire.dispatchTo('forum.reply-form', 'replyForm')"
+                onclick="Livewire.dispatchTo('components.forum.reply-form', 'replyForm')"
                 class="gap-2 w-full justify-center py-2.5"
             >
                 {{ __('pages/forum.reply_thread') }}
diff --git a/routes/web.php b/routes/web.php
index 20b2eb76..aa1adaa2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -13,6 +13,7 @@
 use App\Http\Controllers\SponsoringController;
 use App\Http\Controllers\SubscriptionController;
 use App\Http\Controllers\User;
+use App\Livewire\Pages\Articles;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', HomeController::class)->name('home');
@@ -35,9 +36,11 @@
 
 // Articles
 Route::prefix('articles')->group(function (): void {
-    Route::get('/', [ArticlesController::class, 'index'])->name('articles');
+    Route::get('/', Articles\Index::class)->name('articles');
+    Route::get('/tags/{tag:slug}', Articles\SingleTag::class)->name('articles.tag');
+    Route::get('/{article}', Articles\SinglePost::class)->name('articles.show');
+
     Route::get('/new', [ArticlesController::class, 'create'])->name('articles.new');
-    Route::get('/{article}', [ArticlesController::class, 'show'])->name('articles.show');
     Route::get('/{article}/edit', [ArticlesController::class, 'edit'])->name('articles.edit');
 });
 
diff --git a/tests/Feature/Actions/Article/CreateArticleActionTest.php b/tests/Feature/Actions/Article/CreateArticleActionTest.php
index 13ac6b35..456b77ff 100644
--- a/tests/Feature/Actions/Article/CreateArticleActionTest.php
+++ b/tests/Feature/Actions/Article/CreateArticleActionTest.php
@@ -3,7 +3,7 @@
 declare(strict_types=1);
 
 use App\Actions\Article\CreateArticleAction;
-use App\Data\Article\CreateArticleData;
+use App\Data\CreateArticleData;
 use App\Models\Article;
 use App\Models\Tag;
 
diff --git a/tests/Feature/Actions/Discussion/CreateDiscussionActionTest.php b/tests/Feature/Actions/Discussion/CreateDiscussionActionTest.php
index 0b8a95a4..eab9e5bb 100644
--- a/tests/Feature/Actions/Discussion/CreateDiscussionActionTest.php
+++ b/tests/Feature/Actions/Discussion/CreateDiscussionActionTest.php
@@ -3,7 +3,7 @@
 declare(strict_types=1);
 
 use App\Actions\Discussion\CreateDiscussionAction;
-use App\Data\Discussion\CreateDiscussionData;
+use App\Data\CreateDiscussionData;
 use App\Models\Discussion;
 use App\Models\Tag;
 use Illuminate\Support\Facades\Notification;