diff --git a/blog/html/accueil_blog.html b/blog/html/accueil_blog.html
index 21a15c0..f19eaa9 100644
--- a/blog/html/accueil_blog.html
+++ b/blog/html/accueil_blog.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">
+    <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">
 
 
 
@@ -39,11 +39,9 @@
                         <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>
+                            <a class="nav-link left-label" href="#">Vétérinaires</a>
                         </li>
                     </ul>
 
@@ -83,7 +81,7 @@
             <header>
                 <h1 class="title fs-2">Modifier la page blog</h1>
             </header>
-            <main>
+            <div class="content">
 
                 
                 <section class="mb-5 section-categories">
@@ -153,7 +151,7 @@
                         </tbody>
                     </table>
                 </section>
-            </main>
+            </div>
         </div>
     </main>
     <script src="../js/liste_categorie.js"></script>
diff --git a/blog/html/ajouter_article.html b/blog/html/ajouter_article.html
index 1fc257d..535e66b 100644
--- a/blog/html/ajouter_article.html
+++ b/blog/html/ajouter_article.html
@@ -1,133 +1,156 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ajouter un article</title>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../../css/blog.css">
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/style.css">
 
-    <script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
 </head>
+
 <body>
 
-<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>
+    <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>
+                <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">
+                <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 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>
 
-                <!-- 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"><a class="nav-link" href="#">Vétérinaires</a></li>
+                    </ul>
 
-                    <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>
+                    <!-- 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>
-        </div>
-    </nav>
-</header>
+        </nav>
+    </header>
 
-<div class="container mt-5">
-    <h2 class="mb-5 text-center">Ajouter un article</h2>
+    <div class="container mt-5">
+        <h2 class="mb-5 text-center">Ajouter un article</h2>
 
-    <form id="ajouterArticleForm">
+        <form id="ajouterArticleForm">
 
-        
-        <div id="messages" class="mb-3"></div>
 
-        <!-- Catégorie -->
-        <div class="mb-3">
-            <label class="form-label fw-bold">Catégorie *</label>
-            <select id="articleCategory" class="form-select">
-                <option value="">Choisissez une catégorie</option>
-                <option value="actualités">Actualités</option>
-                <option value="chien">Chien</option>
-                <option value="chat">Chat</option>
-                <option value="boutique">Boutique</option>
-            </select>
-        </div>
+            <div id="messages" class="mb-3"></div>
 
-        <!-- Titre -->
-        <div class="mb-4">
-            <label class="form-label fw-bold">Titre *</label>
-            <input type="text" id="articleTitle" class="form-control">
-        </div>
 
-        <!-- Contenu -->
-        <div class="mb-3">
-            <label class="form-label fw-bold">Contenu</label>
-            <textarea id="articleContent"></textarea>
-        </div>
+            <div class="mb-3">
+                <label class="form-label fw-bold">Catégorie (obligatoire)</label>
+                <select id="articleCategory" class="form-select" required>
+                    <option value="none" disabled selected>Choisissez une catégorie</option>
+                    <option value="actualités">Actualités</option>
+                    <option value="chien">Chien</option>
+                    <option value="chat">Chat</option>
+                    <option value="boutique">Boutique</option>
+                </select>
+            </div>
 
-        <!-- Image -->
-        <div class="mb-4">
-            <label class="form-label fw-bold">Image</label>
-            <input type="file" id="articleImage" class="form-control">
-        </div>
+            <!-- Titre -->
+            <div class="mb-4">
+                <label class="form-label fw-bold" for="articleTitle">Titre (obligatoire)</label>
+                <input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"
+                    required>
+            </div>
 
-        <!-- Publié -->
-        <div class="form-check mb-3">
-            <input class="form-check-input" type="checkbox" id="articlePublished">
-            <label class="form-check-label">Publié</label>
-        </div>
 
-        <!-- Boutons -->
-        <div class="d-flex gap-3 mt-4">
-            <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
-            <button type="submit" class="btn btn-primary w-50">Ajouter</button>
-        </div>
-    </form>
-</div>
+            <!-- Contenu -->
+            <div class="row mb-3">
+                <div class="col-md-4 image">
+                    <div class="mb-4">
+                        <label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
+                        
+                        <input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
+
+                    </div>
+                    <div class="preview-img-container">
+                    </div>
+                </div>
+
+                <div class="col-md-8 conent">
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
+                        <div class="row">
+
+                        </div>
+                        <textarea id="articleContent" required></textarea>
+                    </div>
+                </div>
+            </div>
+
+
+      
+
+
+
+            <!-- Publié -->
+            <div class="form-check mb-3">
+                <input class="form-check-input" type="checkbox" id="articlePublished">
+                <label class="form-check-label" for="articlePublished">Publié</label>
+            </div>
+
+            <!-- Boutons -->
+            <div class="d-flex gap-3 mt-4">
+                <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
+                <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+            </div>
+        </form>
+    </div>
+
+
+    <script src="/js/imgLoad.js"></script>
+    <script src="../js/ajouter_article.js"></script>
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/node_modules/tinymce/tinymce.min.js"></script>
+    <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+
+    <script src="/js/tinyMce.js"></script>
+
+    <script src="/js/previewImage.js"></script>
 
-<script src="../js/ajouter_article.js"></script>
-<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-<script>
-tinymce.init({
-    selector: '#articleContent',
-    height: 400,
-    language: 'fr',
-    plugins: 'lists fullscreen',
-    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
-});
-</script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/blog/html/ajouter_categorie.html b/blog/html/ajouter_categorie.html
index 6e0a7a1..ba284e7 100644
--- a/blog/html/ajouter_categorie.html
+++ b/blog/html/ajouter_categorie.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ajouter une catégorie</title>
     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/css/blog.css">
+    <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
 
@@ -28,8 +28,8 @@
                     <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>
+                        
+                    <li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
                 </ul>
 
                 <!-- MENU DROIT -->
@@ -70,12 +70,12 @@
     <form id="addCategoryForm">
 
         <div class="mb-4">
-            <label class="form-label fw-bold">Nom de la catégorie *</label>
+            <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
             <input
                 type="text"
                 id="categoryName"
                 class="form-control"
-                placeholder="Actualité, chien, chat…">
+                placeholder="Actualité, chien, chat…" required>
         </div>
 
         <div class="mb-3">
@@ -98,5 +98,9 @@
 <script src="../js/ajouter_categorie.js"></script>
 <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
+<script src="/node_modules/tinymce/tinymce.min.js"></script>
+<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+<script src="/js/tinyMce.js"></script>
+
 </body>
 </html>
diff --git a/blog/html/modifier_article.html b/blog/html/modifier_article.html
index 23a8b96..e235877 100644
--- a/blog/html/modifier_article.html
+++ b/blog/html/modifier_article.html
@@ -4,16 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modifier un article</title>
-
-    <link rel="stylesheet" href="../../css/blog.css">
-    <script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
-
-    
+    <link rel="stylesheet" href="/css/style.css">
 </head>
 
 <body>
-
 <header>
     <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
         <div class="container-fluid align-items-center">
@@ -33,8 +28,8 @@
                     <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>
+                        
+                    <li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
                 </ul>
 
                 <!-- MENU DROIT -->
@@ -68,49 +63,56 @@
 
 <div class="container">
     <h2 class="mb-4 text-center">Modifier un article</h2>
-
-   
     <div id="messages" class="mb-3"></div>
 
     <form id="editArticleForm">
 
         <!-- Titre -->
         <div class="mb-3">
-            <label class="form-label fw-bold">Titre *</label>
-            <input type="text" id="articleTitle" class="form-control">
+            <label class="form-label fw-bold">Titre (obligatoire)</label>
+            <input type="text" id="articleTitle" class="form-control" value="Les chats, ces réveils matin détraqués">
+        </div>
+
+          <div class="mb-4 categorie">
+            <label class="form-label fw-bold" for="categories">Catégorie (obligatoire)</label>
+          
+            <select id="categories" class="form-select">
+                 <option value="none" disabled>Choisissez une catégorie</option>
+                    <option value="actualités">Actualités</option>
+                    <option value="chien">Chien</option>
+                    <option value="chat" selected>Chat</option>
+                    <option value="boutique">Boutique</option> 
+            </select>
         </div>
 
         <!-- Contenu -->
-        <div class="mb-3">
-            <label class="form-label fw-bold">Contenu</label>
-            <textarea id="articleContent"></textarea>
-        </div>
+            <div class="row mb-3">
+                <div class="col-md-4 image">
+                    <div class="mb-4">
+                        <label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
+                        
+                        <input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
 
-        <!-- Catégorie -->
-        <div class="mb-4">
-            <label class="form-label fw-bold">Catégorie</label>
-            <input type="text" id="articleCategory" class="form-control" list="categories">
-            <datalist id="categories">
-                <option value="actualités">
-                <option value="chien">
-                <option value="chat">
-                <option value="boutique">
-            </datalist>
-        </div>
+                    </div>
+                    <div class="preview-img-container">
+                    </div>
+                </div>
 
-        <!-- Image -->
-        <div class="mb-4">
-            <label class="fw-bold">Image actuelle</label>
-            <div>
-                <img id="imagePreview" class="preview-img mb-2 d-none" alt="apercu image">
-                <input type="file" id="articleImage" class="form-control">
+                <div class="col-md-8 conent">
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
+                        <div class="row">
+
+                        </div>
+                        <textarea id="articleContent" required></textarea>
+                    </div>
+                </div>
             </div>
-        </div>
 
         <!-- Publié -->
         <div class="form-check mb-3">
             <input class="form-check-input" type="checkbox" id="articlePublished">
-            <label class="form-check-label">Publié (sera publié sur facebook)</label>
+            <label class="form-check-label">Publié</label>
         </div>
 
         <!-- Boutons -->
@@ -125,20 +127,10 @@
 <script src="../js/modifier_article.js"></script>
 <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-<script>
-tinymce.init({
-    selector: "#articleContent",
-    height: 400,
-    language: "fr",
-
-    plugins: "lists fullscreen",
-    toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen",
-
-    branding: false,          
-    promotion: false,
-    menubar: false 
-});
-</script>
+<script src="/node_modules/tinymce/tinymce.min.js"></script>
+<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+<script src="/js/tinyMce.js"></script>
 
+<script src="/js/previewImage.js"></script>
 </body>
 </html>
diff --git a/blog/html/modifier_categorie.html b/blog/html/modifier_categorie.html
index 368db98..726054a 100644
--- a/blog/html/modifier_categorie.html
+++ b/blog/html/modifier_categorie.html
@@ -1,100 +1,108 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modifier une catégorie</title>
-    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../../css/blog.css">
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/style.css">
+
 
-    
 </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>
+    <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>
+                <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">
+                <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 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>
 
-                <!-- 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"><a class="nav-link" href="#">Vétérinaires</a></li>
+                    </ul>
 
-                    <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>
+                    <!-- 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">
+        <h2 class="mb-5 text-center">Modifier une catégorie</h2>
+
+
+        <form id="modifierCategorie">
+
+
+            <div class="mb-4">
+                <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
+                <input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie"
+                    required>
 
             </div>
-        </div>
-    </nav>
-</header>
-
-<div class="container">
-    <h2 class="mb-5 text-center">Modifier une catégorie</h2>
-
-   
-    <form id="modifierCategorie">
 
 
-        <div class="mb-4">
-  <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
-  <input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie" required>
+            <div class="mb-3">
+                <label class="form-label fw-bold">Description (optionnel)</label>
+                <textarea id="categorieDescription" class="form-control" rows="4"></textarea>
+            </div>
 
-</div>
+            <div class="d-flex gap-3 mt-4">
+                <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
+                <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
+            </div>
 
+        </form>
+    </div>
 
-        <div class="mb-3">
-            <label class="form-label fw-bold">Description (optionnel)</label>
-            <textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea>
-        </div>
+    <script src="../js/modifier_categorie.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-        <div class="d-flex gap-3 mt-4">
-  <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
-  <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
-</div>
+    <script src="/node_modules/tinymce/tinymce.min.js"></script>
+    <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+    <script src="/js/tinyMce.js"></script>
 
-    </form>
-</div>
-
-<script src="../js/modifier_categorie.js"></script>
-<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-
-
-    
 </body>
+
 </html>
\ No newline at end of file
diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js
index 5da8a12..bfd6d34 100644
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -2,6 +2,7 @@ const form = document.getElementById("ajouterArticleForm");
 const messages = document.getElementById("messages");
 
 const imgField = document.getElementById("articleImage");
+const imgPreview = document.getElementById("imagePreview");
 const titleField = document.getElementById("articleTitle");
 const categoryField = document.getElementById("articleCategory");
 const publishedField = document.getElementById("articlePublished");
@@ -26,6 +27,9 @@ function imageValide(file) {
     return ["image/jpeg", "image/png"].includes(file.type);
 }
 
+// Preview image on selection via generic loader (global)
+const imgLoader = window.initImagePreview && window.initImagePreview("articleImage", "articleImagePreview", ["image/jpeg", "image/png"]);
+
 
 form.addEventListener("submit", function (e) {
     e.preventDefault();
@@ -91,6 +95,9 @@ form.addEventListener("submit", function (e) {
     // Reset
     form.reset();
     tinymce.get("articleContent").setContent("");
+    if (imgLoader && typeof imgLoader.reset === "function") {
+        imgLoader.reset();
+    }
 
     // Redirection
     setTimeout(() => {
@@ -98,13 +105,4 @@ form.addEventListener("submit", function (e) {
     }, 1500);
 });
 
-/* =========================
-   TinyMCE
-========================= */
-tinymce.init({
-    selector: "#articleContent",
-    height: 400,
-    language: "fr",
-    plugins: "lists fullscreen",
-    toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen"
-});
+
diff --git a/blog/js/modifier_article.js b/blog/js/modifier_article.js
index 57d54c7..afd4e2e 100644
--- a/blog/js/modifier_article.js
+++ b/blog/js/modifier_article.js
@@ -3,6 +3,7 @@ const messages = document.getElementById("messages");
 
 const imgField = document.getElementById("articleImage");
 const titleField = document.getElementById("articleTitle");
+const imgPreview = document.getElementById("imagePreview");
 const contentField = document.getElementById("articleContent");
 const categoryField = document.getElementById("articleCategory");
 const publishedField = document.getElementById("articlePublished");
@@ -31,6 +32,21 @@ function imageValide(file) {
   return ["image/jpeg", "image/png", "image/gif"].includes(file.type);
 }
 
+// Preview image on selection
+imgField.addEventListener("change", function () {
+  const file = imgField.files && imgField.files[0];
+  if (!file || !imageValide(file)) {
+    if (imgPreview) {
+      imgPreview.src = "";
+      imgPreview.classList.add("d-none");
+    }
+    return;
+  }
+  const url = URL.createObjectURL(file);
+  imgPreview.src = url;
+  imgPreview.classList.remove("d-none");
+});
+
 
 form.addEventListener("submit", function (e) {
   e.preventDefault();
diff --git a/css/blog.css b/css/blog.css
deleted file mode 100644
index 882b6b6..0000000
--- a/css/blog.css
+++ /dev/null
@@ -1,11 +0,0 @@
-
-    body {
-            background: #f4f6f9;
-        }
-        .container {
-           
-            margin: 40px auto;
-        }
-        .ck-editor__editable {
-    min-height: 350px; 
-}
\ No newline at end of file
diff --git a/css/citations.css b/css/citations.css
deleted file mode 100644
index e69de29..0000000
diff --git a/css/prestation.css b/css/prestation.css
index eba3746..e69de29 100644
--- a/css/prestation.css
+++ b/css/prestation.css
@@ -1,2 +0,0 @@
-body { background: #f4f6f981; }
-        .container { margin-top: 50px; }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index d38c219..46dd377 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,44 +1,44 @@
 /*=============================================================================
 Header Navbar Styles
 =============================================================================*/
-a.nav-link{
+a.nav-link {
     font-size: .95rem;
 }
 
 .navbar-brand {
-      font-size: 1.1rem;
-      line-height: 1;
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-  }
+    font-size: 1.1rem;
+    line-height: 1;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
 
-  .brand-sep {
-      height: .8rem;
-  }
+.brand-sep {
+    height: .8rem;
+}
 
 
-  @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;
-      }
+@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:first-child {
+        margin-top: .5rem;
+    }
 
-      #navbarSupportedContent>ul:last-child {
-          margin-top: 1rem;
-      }
+    #navbarSupportedContent>ul:last-child {
+        margin-top: 1rem;
+    }
 
-      .bi {
-          display: none;
-      }
+    .bi {
+        display: none;
+    }
 
-  }
+}
 
 
 
@@ -46,5 +46,38 @@ a.nav-link{
 Divers
 =============================================================================*/
 a.tox-promotion-link {
-  display: none !important;
+    display: none !important;
+}
+
+body {
+    background: #f4f6f981;
+}
+
+.container {
+   margin: 50px auto;
+}
+
+/*=============================================================================
+Placeholders (global)
+=============================================================================*/
+[placeholder] {
+    font-size: 0.9rem !important;
+    font-style: italic !important;
+
+}
+
+/*=============================================================================
+Image Previews
+=============================================================================*/
+.preview-img-container{
+    margin-top: -.8rem;
+    width: 100%;
+    height: 20.3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    border-radius: .25rem;
+    margin-bottom: 1rem;
+    background-color: rgb(238, 236, 236);
 }
\ No newline at end of file
diff --git a/js/previewImage.js b/js/previewImage.js
new file mode 100644
index 0000000..d5e7651
--- /dev/null
+++ b/js/previewImage.js
@@ -0,0 +1,19 @@
+/**
+ * 
+ * Preview image when selected in input field
+ */
+
+document.getElementById("imageInput").addEventListener("change", function (e) {
+    const file = e.target.files[0];
+    const preview = document.querySelector(".preview-img-container");
+    if (file && ["image/jpeg", "image/png"].includes(file.type)) {
+        const reader = new FileReader();
+        reader.onload = function (event) {
+            preview.innerHTML = `<img src="${event.target.result}" alt="Aperçu de l'image" class="img-fluid">`;
+        };
+        reader.readAsDataURL(file);
+        preview.style.backgroundColor = "transparent";
+    } else {
+        preview.innerHTML = `<p class="text-muted">Aucun aperçu disponible <br> Le format n'est pas autorisé</p>`;
+    }
+})
\ No newline at end of file
