diff --git a/Webzine.WebApplication/Areas/Administration/Views/Artiste/Index.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Artiste/Index.cshtml
index 78c392b..73aabac 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Artiste/Index.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Artiste/Index.cshtml
@@ -16,7 +16,7 @@
             <thead class="table-active">
                 <tr>
                     <th scope="col" class="p-2">Nom</th>
-                    <th scope="col" class="text-center p-2" style="width: 100px;">Actions</th>
+                    <th scope="col" class="text-center p-2">Actions</th>
                 </tr>
             </thead>
             <tbody>
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Artiste/_Form.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Artiste/_Form.cshtml
index 3a3101e..f5c84bc 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Artiste/_Form.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Artiste/_Form.cshtml
@@ -2,7 +2,7 @@
 
 <div class="container">
     <!-- ARTISTE -->
-    <div class="row mb-3 align-items-center">
+    <div class="row mb-3">
         <label class="col-md-3 col-form-label">Nom de l'artiste<span class="text-danger">*</span></label>
         <div class="col-md-9">
             <input asp-for="Nom" class="form-control" />
@@ -10,14 +10,15 @@
     </div>
 
     <!-- BIOGRAPHIE -->
-    <div class="row mb-3 align-items-center">
-        <label class="col-md-3 col-form-label">Biographie<span class="text-danger">*</span></label>
+    <div class="row mb-3">
+        <label class="col-md-3 col-form-label">Biographie</label>
         <div class="col-md-9">
-            <input asp-for="Biographie" class="form-control"/>
+            <textarea asp-for="Biographie" class="form-control" rows="5"></textarea>
         </div>
     </div>
 
 
+
     <!-- BOUTONS -->
     <div class="row mt-4">
         <div class="col-md-9 offset-md-3">
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Commentaire/Index.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Commentaire/Index.cshtml
index 4f696e8..c8608b7 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Commentaire/Index.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Commentaire/Index.cshtml
@@ -14,10 +14,10 @@
             <thead class="table-active">
                 <tr>
                     <th scope="col">Titre</th>
-                    <th scope="col">Auteur</th>
+                    <th scope="col">Nom</th>
                     <th scope="col">Commentaire</th>
                     <th scope="col">Date de création</th>
-                    <th scope="col" class="text-center p-2" style="width: 100px" ;>Actions</th>
+                    <th scope="col" class="text-center p-2">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -25,7 +25,9 @@
                 {
                     <tr class="align-middle">
                         <td>
-                            @commentaire.Titre.Libelle
+                            <a asp-action="Details" asp-controller="Titre" asp-route-id="@commentaire.Titre.IdTitre">
+                                @commentaire.Titre.Libelle
+                            </a>
                         </td>
                         <td>
                             @commentaire.Auteur
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml
index 861c59b..5498169 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml
@@ -12,19 +12,19 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Artiste">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-users fa-3x text-primary mb-3"></i>
+                    <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                        <i class="fa fa-users fa-5x text-primary mb-3"></i>
 
-                    <h3>
-                        @Model.NombreArtistes 
-                    </h3>
-
-                    <p>
-                        artistes
-                    </p>
+                        <h2>
+                            @Model.NombreArtistes 
+                        </h2>
+                        <p>
+                            artistes
+                        </p>
+                   </div>
                 </div>
-
             </a>
         </div>
 
@@ -33,17 +33,17 @@
             <a asp-area=""
                asp-controller="Artiste"
                asp-route-nom="@Model.ArtisteLePlusChronique">
+               <div class="ratio ratio-4x3">
+                    <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                        <i class="fa fa-user fa-5x text-primary mb-3"></i>
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-user fa-3x text-primary mb-3"></i>
+                        <h2>
+                            @Model.ArtisteLePlusChronique
+                        </h2>
 
-                    <h3>
-                        @Model.ArtisteLePlusChronique
-                    </h3>
-
-                    <p>artiste le plus chroniqué</p>
+                        <p>artiste le plus chroniqué</p>
+                    </div>
                 </div>
-
             </a>
         </div>
 
@@ -52,19 +52,20 @@
             <a asp-area=""
                asp-controller="Artiste"
                asp-route-nom="@Model.AlbumLePlusChronique">
+             <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-trophy fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-trophy fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.AlbumLePlusChronique
-                    </h3>
+                    </h2>
 
                     <p>
                         artiste avec le plus d'albums distincts
                     </p>
                 </div>
-
+            </div>
             </a>
         </div>
 
@@ -72,19 +73,20 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Titre">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-book fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-book fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.NombreBiographies
-                    </h3>
+                    </h2>
 
                     <p>
                         biographies d'artistes
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
@@ -94,19 +96,20 @@
                asp-controller="Titre"
                asp-action="Details"
                 asp-route-id="@Model.IdMusiqueLaPlusJouee">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-compact-disc fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-compact-disc fa-5x text-primary mb-3"></i>
 
-                    <h4>
+                    <h2>
                         @Model.MusiqueLaPlusJouee
-                    </h4>
+                    </h2>
 
                     <p>
                         titre le plus lu
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
@@ -114,19 +117,20 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Titre">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-music fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-music fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.NombreTitres
-                    </h3>
+                    </h2>
 
                     <p>
                         titres
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
@@ -134,50 +138,57 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Styles">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-tags fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-tags fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.NombreGenres
-                    </h3>
+                    </h2>
 
                     <p>
                         styles de musique
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
         <!-- NOMBRE DE LECTURES -->
         <div class="col-md-4">
-            <div class="card shadow-sm p-4 bg-light h-100">
-                <i class="fa fa-eye fa-3x text-dark mb-3"></i>
+            <div class="ratio ratio-4x3">
 
-                <h3>
-                    @Model.NombreLectures
-                </h3>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center">
+                    <i class="fa fa-eye fa-5x text-dark mb-3"></i>
 
-                <p>
-                    lectures
-                </p>
+                    <h2>
+                        @Model.NombreLectures
+                    </h2>
+
+                    <p>
+                        lectures
+                    </p>
+                </div>
             </div>
         </div>
 
         <!-- TOTAL LIKES -->
         <div class="col-md-4">
-            <div class="card shadow-sm p-4 bg-light h-100">
-                <i class="fa fa-thumbs-up fa-3x text-dark mb-3"></i>
+            <div class="ratio ratio-4x3">
 
-                <h3>
+            <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center">
+                <i class="fa fa-thumbs-up fa-5x text-dark mb-3"></i>
+
+                <h2>
                     @Model.NombreLikes
-                </h3>
+                </h2>
 
                 <p>
                     likes
                 </p>
             </div>
+            </div>
         </div>
 
     </div>
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Style/Create.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Style/Create.cshtml
index 0ac8105..c0cb8f7 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Style/Create.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Style/Create.cshtml
@@ -22,7 +22,7 @@
 
             @* Input *@
             <div class="me-3">
-                <input asp-for="Libelle" class="form-control" style="width: 250px;" />
+                <input asp-for="Libelle" class="form-control" />
             </div>
 
             @* Bouton *@
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Style/Edit.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Style/Edit.cshtml
index e9b763b..446cabe 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Style/Edit.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Style/Edit.cshtml
@@ -25,7 +25,7 @@
 
             @* Input *@
             <div class="me-3">
-                <input asp-for="Libelle" class="form-control" style="width: 250px;" />
+                <input asp-for="Libelle" class="form-control" />
             </div>
 
             @* Bouton *@
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Style/Index.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Style/Index.cshtml
index 7a710ee..ff7e162 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Style/Index.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Style/Index.cshtml
@@ -20,7 +20,7 @@
             <thead class="table-active">
                 <tr>
                     <th scope="col" class="p-2">Libellé</th>
-                    <th scope="col" class="text-center p-2" style="width: 100px;">Actions</th>
+                    <th scope="col" class="text-center p-2">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -28,11 +28,11 @@
                 {
                     @foreach (Webzine.Entity.Style style in Model.Styles)
                     {
-                        <tr class="align-middle">
-                            <td class="p-2">
+                        <tr >
+                            <td class="p-2 w-75">
                                 @style.Libelle
                             </td>
-                            <td class="text-center p-2">
+                            <td class="text-center w-auto p-2">
                                 <a asp-action="Edit" asp-route-id="@style.IdStyle" class="text-primary me-2" title="Éditer">
                                     <i class="fas fa-edit"></i>
                                 </a>
diff --git a/Webzine.WebApplication/Areas/Administration/Views/Titre/_Form.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Titre/_Form.cshtml
index ac6eef5..d1f4f8c 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Titre/_Form.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Titre/_Form.cshtml
@@ -62,7 +62,7 @@
 
     <!-- JAQUETTE -->
     <div class="row mb-3 align-items-center">
-        <label class="col-md-3 col-form-label">Jaquette<span class="text-danger">*</span></label>
+        <label class="col-md-3 col-form-label">Jaquette de l'album<span class="text-danger">*</span></label>
         <div class="col-md-9">
             <input asp-for="UrlJaquette"
                    class="form-control"/>
@@ -102,13 +102,13 @@
     </div>
 
     <!-- LECTURES / LIKES (AFFICHAGE UNIQUEMENT) -->
-    <div class="row mb-4 align-items-center">
+    <div class="row align-items-center">
         <label class="col-md-3 col-form-label">Nb de lectures<span class="text-danger">*</span></label>
         <div class="col-md-3">
             @Model.NbLectures
         </div>
     </div>
-    <div class="row mb-4 align-items-center">
+    <div class="row align-items-center">
         <label class="col-md-3 col-form-label">Nb de likes<span class="text-danger">*</span></label>
         <div class="col-md-3">
             @Model.NbLikes
diff --git a/Webzine.WebApplication/Views/Accueil/Index.cshtml b/Webzine.WebApplication/Views/Accueil/Index.cshtml
index 23290ad..bf225d4 100644
--- a/Webzine.WebApplication/Views/Accueil/Index.cshtml
+++ b/Webzine.WebApplication/Views/Accueil/Index.cshtml
@@ -37,7 +37,7 @@
 
                 <!-- Chronique -->
                 <p class="mt-2 mb-3 text-muted">
-                    @titre.Chronique
+                    @(titre.Chronique.Length > 200 ? titre.Chronique.Substring(0, 200) + "..." : titre.Chronique)
                 </p>
 
                 <!-- Footer -->
diff --git a/Webzine.WebApplication/Views/Artiste/Index.cshtml b/Webzine.WebApplication/Views/Artiste/Index.cshtml
index f719270..737e563 100644
--- a/Webzine.WebApplication/Views/Artiste/Index.cshtml
+++ b/Webzine.WebApplication/Views/Artiste/Index.cshtml
@@ -59,7 +59,7 @@
                                     <a asp-controller="Titre"
                                        asp-action="Details"
                                        asp-route-id="@titre.IdTitre"
-                                       class="text-primary fw-bold">
+                                       class="text-primary">
                                         @titre.Libelle
                                     </a>
                                 </td>
diff --git a/Webzine.WebApplication/Views/Contact/Index.cshtml b/Webzine.WebApplication/Views/Contact/Index.cshtml
index 1817b16..55ef4d4 100644
--- a/Webzine.WebApplication/Views/Contact/Index.cshtml
+++ b/Webzine.WebApplication/Views/Contact/Index.cshtml
@@ -4,14 +4,15 @@
 
 <div class="container">
     <h1>Contact</h1>
-    <div>
+    <div class="my-2">
         C.U.C.D.B - DIIAGE <br />   
         69 Avenue Aristide Briand<br />
         21000 Dijon
     </div>
-    <div>
+
+    <div class ="my-2">
         <i class="fa-solid fa-phone"></i> Phone : 03 80 40 50 60<br />
-        <i class="fa-solid fa-envelope"></i> secretariat@cucdb.fr
+        <i class="fa-solid fa-envelope"></i> <span class="text-primary">secretariat@cucdb.fr</span>
     </div>
 
 </div>
@@ -21,43 +22,43 @@
     <h2>Suivez-nous</h2>
     <div class="row g-4 text-center">
         <div class="col-md-4">
-            <a href="#" class="card h-100 p-4 shadow-sm border-0 bg-light-subtle">
-                <i class="fa-solid fa-link fa-3x text-primary mb-3"></i>
+            <a href="#" class="card h-100 p-4 border-0 bg-light">
+                <i class="fa-solid fa-link fa-3x text-primary mb-3 align-self-center"></i>
                 <div class="fw-bold text-primary">Site officiel du DIIAGE</div>
             </a>
         </div>
 
         <div class="col-md-4">
-            <a href="#" class="card h-100 p-4 shadow-sm border-0 bg-light-subtle">
-                <i class="fa-brands fa-facebook fa-3x text-primary mb-3"></i>
+            <a href="#" class="card h-100 p-4 border-0 bg-light">
+                <i class="fa-brands fa-facebook fa-3x text-primary mb-3 align-self-center"></i>
                 <div class="fw-bold text-primary">Facebook</div>
             </a>
         </div>
 
         <div class="col-md-4">
-            <a href="#" class="card h-100 p-4 shadow-sm border-0 bg-light-subtle">
-                <i class="fa-brands fa-instagram fa-3x text-primary mb-3"></i>
+            <a href="#" class="card h-100 p-4 border-0 bg-light">
+                <i class="fa-brands fa-instagram fa-3x text-primary mb-3 align-self-center"></i>
                 <div class="fw-bold text-primary">Instagram</div>
             </a>
         </div>
 
         <div class="col-md-4">
-            <a href="#" class="card h-100 p-4 shadow-sm border-0 bg-light-subtle">
-                <i class="fa-brands fa-linkedin fa-3x text-primary mb-3"></i>
+            <a href="#" class="card h-100 p-4 border-0 bg-light">
+                <i class="fa-brands fa-linkedin fa-3x text-primary mb-3 align-self-center"></i>
                 <div class="fw-bold text-primary">LinkedIn</div>
             </a>
         </div>
 
         <div class="col-md-4">
-            <a href="#" class="card h-100 p-4 shadow-sm border-0 bg-light-subtle">
-                <i class="fa-solid fa-map fa-3x text-primary mb-3"></i>
+            <a href="#" class="card h-100 p-4 border-0 bg-light">
+                <i class="fa-solid fa-map fa-3x text-primary mb-3 align-self-center"></i>
                 <div class="fw-bold text-primary">Google Maps</div>
             </a>
         </div>
 
         <div class="col-md-4">
-            <a href="#" class="card h-100 p-4 shadow-sm border-0 bg-light-subtle">
-                <i class="fa-brands fa-twitter fa-3x text-primary mb-3"></i>
+            <a href="#" class="card h-100 p-4 border-0 bg-light">
+                <i class="fa-brands fa-twitter fa-3x text-primary mb-3 align-self-center"></i>
                 <div class="fw-bold text-primary">Twitter</div>
             </a>
         </div>
diff --git a/Webzine.WebApplication/Views/Shared/_Layout.cshtml b/Webzine.WebApplication/Views/Shared/_Layout.cshtml
index 60de9d0..e1e6514 100644
--- a/Webzine.WebApplication/Views/Shared/_Layout.cshtml
+++ b/Webzine.WebApplication/Views/Shared/_Layout.cshtml
@@ -12,7 +12,7 @@
 
     <script src="~/js/bootstrap.bundle.js" defer></script>
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
     <partial name="_Header"/>
     <div class="container-fluid flex-grow-1 py-4">
         <div class="row">
diff --git a/Webzine.WebApplication/wwwroot/images/avatar.png b/Webzine.WebApplication/wwwroot/images/avatar.png
new file mode 100644
index 0000000..42127ef
Binary files /dev/null and b/Webzine.WebApplication/wwwroot/images/avatar.png differ
diff --git a/Webzine.WebApplication/wwwroot/images/avater.png b/wwwroot/css/site.css
similarity index 100%
rename from Webzine.WebApplication/wwwroot/images/avater.png
rename to wwwroot/css/site.css