diff --git a/blog/html/accueil_blog.html b/blog/html/accueil_blog.html
index 5c5b14b..21a15c0 100644
--- a/blog/html/accueil_blog.html
+++ b/blog/html/accueil_blog.html
@@ -1,114 +1,163 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin - Blog</title>
+    <title>Admin |Modifier le blog</title>
+    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../css/style.css">
+
 
-    <!-- BOOTSTRAP -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
-    <style>
-        body {
-            background: #f4f6f9;
-            
-        }
-        .menu-card {
-            transition: 0.2s;
-            cursor: pointer;
-        }
-        .menu-card:hover {
-            transform: scale(1.03);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
-        }
-        .menu-icon {
-            font-size: 40px;
-        }
-        .page-wrapper {
-            padding: 40px;
-            margin-top: 80px; 
-}
 
-    </style>
 </head>
 
 <body>
+    <header>
+        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+            <div class="container-fluid align-items-center">
+                <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
 
-     <!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
-        <div class="container-fluid align-items-center">
-            <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Boutique</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Prestations</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                    </ul>
 
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
 
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                                <li><a class="dropdown-item" href="#">Profil</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="#">Sortir</a></li>
+                            </ul>
+                        </li>
+                    </ul>
 
-                <!-- MENU GAUCHE -->
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item"><a class="nav-link active" href="#">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
-                </ul>
-
-                <!-- MENU DROIT -->
-                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
-                    </li>
-
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown">
-                            <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
-                            <li><a class="dropdown-item" href="#">Profil</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#">Sortir</a></li>
-                        </ul>
-                    </li>
-                </ul>
-
-            </div>
-        </div>
-    </nav>
-</header>
-
-<div class="container text-center mt-5">
-    <h2 class="mb-5">Gestion du blog</h2>
-
-    <div class="row g-4 justify-content-center">
-
-        <!-- UNE SEULE CARTE : Articles + Catégories -->
-        <div class="col-md-4">
-            <a href="../html/liste_categorie_article.html" class="text-decoration-none">
-                <div class="card p-4 menu-card">
-                    <div class="menu-icon">📝</div>
-                    <h4 class="mt-3 text-dark">Articles & Catégories</h4>
-                    <p class="text-muted">
-                        Gérer les articles et organiser les catégories du blog.
-                    </p>
                 </div>
-            </a>
+            </div>
+        </nav>
+
+    </header>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2">Modifier la page blog</h1>
+            </header>
+            <main>
+
+                
+                <section class="mb-5 section-categories">
+                    <h2 class="my-4 fs-3">Liste des catégories</h2>
+
+                    <!-- Message succès catégories -->
+                    <div id="successCategoriesMsg" class="alert alert-success d-none"></div>
+
+                    <!-- Bouton ajouter catégorie -->
+                    <div class="d-flex justify-content-start mb-4">
+                        <a href="ajouter_categorie.html" class="btn btn-primary">Ajouter une catégorie</a>
+                    </div>
+
+                    <!-- Tableau catégories -->
+                    <table class="table table-striped table-hover">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Nom</th>
+                                <th class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="categoriesTableBody">
+                            <!-- rempli en JS -->
+                        </tbody>
+                    </table>
+                </section>
+
+             
+
+                <section class="section-articles">
+                    <h2 class="my-4 fs-3">Liste des articles</h2>
+
+                    <!-- Message succès articles -->
+                    <div id="successArticlesMsg" class="alert alert-success d-none"></div>
+
+                    <!-- Bouton ajouter article -->
+                    <div class="d-flex justify-content-start mb-4">
+                        <a href="ajouter_article.html" class="btn btn-primary">Ajouter un article</a>
+                    </div>
+
+                    <!-- Tableau articles -->
+                    <table class="table table-striped table-hover">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Titre</th>
+                                <th class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+
+                        <tbody id="articlesTableBody">
+                            <tr>
+                                <td>Mon premier article</td>
+                                <td class="text-end">
+                                    <a href="modifier_article.html"
+                                        class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Mon deuxième article</td>
+                                <td class="text-end">
+                                    <a href="modifier_article.html"
+                                        class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </section>
+            </main>
         </div>
+    </main>
+    <script src="../js/liste_categorie.js"></script>
+    <script src="../js/liste_articles.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-    </div>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
-</body>
-</html>
+</body>
\ No newline at end of file
diff --git a/blog/html/liste_categorie_article.html b/blog/html/liste_categorie_article.html
deleted file mode 100644
index b5df79a..0000000
--- a/blog/html/liste_categorie_article.html
+++ /dev/null
@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blog – Catégories & Articles</title>
-
-    <!-- BOOTSTRAP CSS -->
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-
-    <!-- BOOTSTRAP ICONS -->
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
-
-    <style>
-        body {
-            background: #f4f6f9;
-        }
-
-        .page-container {
-            padding: 30px;
-            margin: 40px auto;
-        }
-
-        .navbar-brand { 
-            font-size: 1.2rem; 
-            line-height: 1; 
-            padding-top: 0.25rem; 
-            padding-bottom: 0.25rem; 
-        }
-
-        @media (max-width: 1399.98px) {
-            .navbar .nav-item { 
-                background-color: var(--bs-light);
-                border: 1px solid var(--bs-border-color);
-                border-radius: .25rem;
-                margin-bottom: .375rem;
-                text-align: center;
-            }
-            #navbarSupportedContent > ul:first-child { margin-top: .5rem; }
-            #navbarSupportedContent > ul:last-child { margin-top: 1rem; }
-            .bi { display: none; }
-        }
-    </style>
-</head>
-
-<body>
-
-<!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
-        <div class="container-fluid align-items-center">
-            <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
-
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
-                <!-- MENU GAUCHE -->
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item"><a class="nav-link active" href="#">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
-                </ul>
-
-                <!-- MENU DROIT -->
-                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
-                    </li>
-
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown">
-                            <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
-                            <li><a class="dropdown-item" href="#">Profil</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#">Sortir</a></li>
-                        </ul>
-                    </li>
-                </ul>
-
-            </div>
-        </div>
-    </nav>
-</header>
-
-<!-- CONTENU -->
-<main class="page-container">
-
-    <!-- ===================== -->
-    <!--   LISTE CATEGORIES    -->
-    <!-- ===================== -->
-    <section class="mb-5">
-        <h2 class="text-center mb-4">Liste des catégories</h2>
-
-        <!-- Message succès catégories -->
-        <div id="successCategoriesMsg" class="alert alert-success d-none"></div>
-
-        <!-- Bouton ajouter catégorie -->
-        <div class="d-flex justify-content-end mb-4">
-            <a href="ajouter_categorie.html" class="btn btn-primary">Ajouter une catégorie</a>
-        </div>
-
-        <!-- Tableau catégories -->
-        <table class="table table-striped table-hover">
-            <thead class="table-dark">
-                <tr>
-                    <th>Nom</th>
-                    <th class="text-end">Actions</th>
-                </tr>
-            </thead>
-            <tbody id="categoriesTableBody">
-                <!-- rempli en JS -->
-            </tbody>
-        </table>
-    </section>
-
-    <!-- ===================== -->
-    <!--   LISTE ARTICLES      -->
-    <!-- ===================== -->
-    
-    <section style="margin-top: 120px;">
-        <h2 class="text-center mb-4">Liste des articles</h2>
-
-        <!-- Message succès articles -->
-        <div id="successArticlesMsg" class="alert alert-success d-none"></div>
-
-        <!-- Bouton ajouter article -->
-        <div class="d-flex justify-content-end mb-4">
-            <a href="ajouter_article.html" class="btn btn-primary">Ajouter un article</a>
-        </div>
-
-        <!-- Tableau articles -->
-        <table class="table table-striped table-hover">
-            <thead class="table-dark">
-                <tr>
-                    <th>Titre</th>
-                    <th class="text-end">Actions</th>
-                </tr>
-            </thead>
-
-            <tbody id="articlesTableBody">
-                <tr>
-                    <td>Mon premier article</td>
-                    <td class="text-end">
-                        <a href="modifier_article.html" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
-                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Mon deuxième article</td>
-                    <td class="text-end">
-                        <a href="modifier_article.html" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
-                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </section>
-
-</main>
-
-<!-- SCRIPTS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script src="../js/liste_categorie.js"></script>
-<script src="../js/liste_articles.js"></script>
-
-</body>
-</html>

Titre	Actions
Mon premier article	+ Modifier + +
Mon deuxième article	+ Modifier + +
Titre	Actions
Mon premier article	- Modifier - -
Mon deuxième article	- Modifier - -