diff --git a/Webzine.Entity/Fixtures/ArtisteFactory.cs b/Webzine.Entity/Fixtures/ArtisteFactory.cs
new file mode 100644
index 0000000..e9af87b
--- /dev/null
+++ b/Webzine.Entity/Fixtures/ArtisteFactory.cs
@@ -0,0 +1,54 @@
+using Bogus;
+
+namespace Webzine.Entity.Fixtures
+{
+    /// <summary>
+    /// Factory pour générer des artistes avec des titres associés, à l'aide de la bibliothèque Bogus.
+    /// 
+    /// </summary>
+    public class ArtisteFactory
+    {
+        /// <summary>
+        /// Récupère un artiste par son nom, en générant des données fictives pour ses titres associés.
+        /// </summary>
+        /// <param name="nom"></param>
+        /// <returns></returns>
+        public static Artiste SeedArtisteByName(string nom)
+        {
+            // On définit nos albums "bouchonnés"
+            var albumsData = new[]
+            {
+                new { Nom = "Bohemian Rhapsody", Image = "https://upload.wikimedia.org/wikipedia/en/9/9f/Bohemian_Rhapsody.png" },
+                new { Nom = "Born This Way", Image = "https://static.wikia.nocookie.net/ladygaga/images/2/2d/BornThisWay-DeluxeEdition.jpg/revision/latest/scale-to-width-down/3500?cb=20111120030308" }
+            };
+
+            var faker = new Bogus.Faker("fr");
+            var tousLesTitres = new List<Titre>();
+
+            // Pour chaque album, on génère un paquet de titres
+            foreach (var album in albumsData)
+            {
+                var nombreDeTitres = faker.Random.Number(3, 6);
+
+                var titresDeLalbum = new Faker<Titre>("fr")
+                    .RuleFor(t => t.IdTitre, f => f.IndexFaker + 1 + tousLesTitres.Count)
+                    .RuleFor(t => t.UrlJaquette, _ => album.Image)
+                    .RuleFor(t => t.Album, _ => album.Nom)
+                    .RuleFor(t => t.Duree, f => f.Random.Number(90, 180))
+                    .RuleFor(t => t.Libelle, f => f.Music.Genre() + " - " + f.Commerce.ProductName())
+                    .Generate(nombreDeTitres);
+
+                tousLesTitres.AddRange(titresDeLalbum);
+            }
+
+            // On crée l'artiste final
+            var artisteFaker = new Faker<Artiste>("fr")
+                .RuleFor(a => a.IdArtiste, f => f.IndexFaker + 1)
+                .RuleFor(a => a.Nom, _ => nom)
+                .RuleFor(a => a.Biographie, f => f.Lorem.Paragraphs(2))
+                .RuleFor(a => a.Titres, _ => tousLesTitres);
+
+            return artisteFaker.Generate();
+        }
+    }
+}
\ No newline at end of file
diff --git a/Webzine.Entity/Style.cs b/Webzine.Entity/Style.cs
index 11c6f32..ed1cd12 100644
--- a/Webzine.Entity/Style.cs
+++ b/Webzine.Entity/Style.cs
@@ -18,5 +18,6 @@ namespace Webzine.Entity
         [Display(Name = "Libellé")]
         public string Libelle { get; set; }
 
+        public List<Titre> Titres { get; set; } = new List<Titre>();
     }
 }
diff --git a/Webzine.Entity/Titre.cs b/Webzine.Entity/Titre.cs
index f8d299c..6775064 100644
--- a/Webzine.Entity/Titre.cs
+++ b/Webzine.Entity/Titre.cs
@@ -63,5 +63,6 @@ namespace Webzine.Entity
 
         public List<Commentaire> Commentaires { get; set; }
 
+        public List<Style> Styles { get; set; } = new List<Style>();
     }
 }
diff --git a/Webzine.Entity/Webzine.Entity.csproj b/Webzine.Entity/Webzine.Entity.csproj
index 33c0658..06e46f1 100644
--- a/Webzine.Entity/Webzine.Entity.csproj
+++ b/Webzine.Entity/Webzine.Entity.csproj
@@ -7,6 +7,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+      <PackageReference Include="Bogus" Version="35.6.5" />
       <PackageReference Include="Faker.Net" Version="2.0.163" />
       <PackageReference Include="NLog" Version="6.1.1" />
       <PackageReference Include="StyleCop.Analyzers" Version="1.1.118">
diff --git a/Webzine.Repository.Contracts/ILocalEntityRepository.cs b/Webzine.Repository.Contracts/ILocalEntityRepository.cs
deleted file mode 100644
index bce9ad4..0000000
--- a/Webzine.Repository.Contracts/ILocalEntityRepository.cs
+++ /dev/null
@@ -1,12 +0,0 @@
-using Webzine.Entity;
-
-namespace Webzine.Repository.Contracts;
-
-public interface ILocalEntityRepository
-{
-    List<Artiste> Artistes { get; set; }
-    List<Style> Styles { get; set; }
-    List<Titre> Titres { get; set; }
-    List<Commentaire> Commentaires { get; set; }
-    void Seed();
-}
\ No newline at end of file
diff --git a/Webzine.Repository/LocalEntityRepository.cs b/Webzine.Repository/LocalEntityRepository.cs
index ae83014..ff19b56 100644
--- a/Webzine.Repository/LocalEntityRepository.cs
+++ b/Webzine.Repository/LocalEntityRepository.cs
@@ -1,12 +1,8 @@
-using Webzine.Repository.Contracts;
-using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Logging;
 
 namespace Webzine.Repository;
 
-using Entity;
-using Entity.Fixtures;
-
-public class LocalEntityRepository : ILocalEntityRepository
+public class LocalEntityRepository
 {
     private readonly ILogger<LocalEntityRepository> _logger;
     public LocalEntityRepository(ILogger<LocalEntityRepository> logger)
@@ -14,32 +10,4 @@ public class LocalEntityRepository : ILocalEntityRepository
         this._logger = logger;
         this._logger.LogDebug(1, "NLog injected into LocalEntityRepository");
     }
-
-    public List<Artiste> Artistes { get; set; }
-    public List<Style> Styles { get; set; }
-    public List<Titre> Titres { get; set; }
-    public List<Commentaire> Commentaires { get; set; }
-
-    /// <summary>
-    /// Permet de remplir les listes d'entités avec des données de test.
-    /// </summary>
-    public void Seed()
-    {
-        this._logger.LogInformation("Seed was called");
-        try
-        {
-            var seedData = new DataFactory();
-
-            Artistes = seedData.GenerateArtists(10);
-            Styles = seedData.GenerateStyles(8);
-            Titres = seedData.GenerateTitres(seedData.RealMusicData.Count, Artistes);
-            Commentaires = seedData.GenerateCommentaires(30, Titres);
-            this._logger.LogInformation("Seed was completed");
-        }
-        catch (Exception e)
-        {
-            this._logger.LogError(e, "An error occurred while seeding the data");
-            throw;
-        }
-    }
 }
\ No newline at end of file
diff --git a/Webzine.WebApplication/Controllers/AccueilController.cs b/Webzine.WebApplication/Controllers/AccueilController.cs
index 5be79f9..25e0016 100644
--- a/Webzine.WebApplication/Controllers/AccueilController.cs
+++ b/Webzine.WebApplication/Controllers/AccueilController.cs
@@ -5,9 +5,22 @@ using Webzine.WebApplication.ViewModels.Accueil;
 
 namespace Webzine.WebApplication.Controllers
 {
-    public class AccueilController : Controller
+    public class AccueilController : Microsoft.AspNetCore.Mvc.Controller
     {
-        private readonly IConfiguration _configuration;
+        // Injection du logger via le constructeur
+        private readonly ILogger<AccueilController> _logger;
+
+        public AccueilController(ILogger<AccueilController> logger)
+        {
+            _logger = logger;
+        }
+
+        // GET: AccueilController
+        public ActionResult Index()
+        {
+            _logger.LogInformation("Arrivée sur la page d'accueil");
+            return View();
+        }
 
         public AccueilController(IConfiguration configuration)
         {
diff --git a/Webzine.WebApplication/Controllers/ArtisteController.cs b/Webzine.WebApplication/Controllers/ArtisteController.cs
new file mode 100644
index 0000000..0f5b91a
--- /dev/null
+++ b/Webzine.WebApplication/Controllers/ArtisteController.cs
@@ -0,0 +1,54 @@
+using Microsoft.AspNetCore.Mvc;
+using Webzine.Entity.Fixtures;
+using Webzine.WebApplication.ViewModels;
+
+namespace Webzine.WebApplication.Controllers
+{
+    public class ArtisteController : Controller
+    {
+        // Injection du logger via le constructeur
+        private readonly ILogger<ArtisteController> _logger;
+
+        public ArtisteController(ILogger<ArtisteController> logger)
+        {
+            _logger = logger;
+        }
+
+        /// <summary>
+        /// Prend en paramètre le nom de l'artiste (ex: "fatal-bazooka"), utilise la factory pour trouver l'artiste correspondant, et affiche sa page dédiée.
+        /// </summary>
+        /// <param name="nom"></param>
+        /// <returns></returns>
+        [HttpGet("/artiste/{nom}")]
+        public IActionResult Index(string nom)
+        {
+            _logger.LogInformation("Tentative d'accès à l'artiste avec le nom : {NomArtiste}", nom);
+
+            if (string.IsNullOrEmpty(nom)) return RedirectToAction("Index", "Accueil");
+
+            // On transforme "fatal-bazooka" en "Fatal Bazooka" pour la factory
+            string nomPropre = System.Globalization.CultureInfo.CurrentCulture.TextInfo
+                .ToTitleCase(nom.Replace("-", " "));
+
+            // On appelle la factory pour obtenir l'artiste unique
+            var artiste = ArtisteFactory.SeedArtisteByName(nomPropre);
+
+            if (artiste == null)
+            {
+                _logger.LogWarning("Artiste non trouvé pour le nom : {NomArtiste}", nomPropre);
+                return NotFound();
+            }
+
+            _logger.LogInformation("Artiste trouvé : {NomArtiste}", nom);
+
+            // On remplit le ViewModel
+            var viewModel = new ArtisteModel
+            {
+                Artiste = artiste,
+                Titres = artiste.Titres
+            };
+
+            return View(viewModel);
+        }
+    }
+}
diff --git a/Webzine.WebApplication/Controllers/ContactController.cs b/Webzine.WebApplication/Controllers/ContactController.cs
new file mode 100644
index 0000000..557e1fb
--- /dev/null
+++ b/Webzine.WebApplication/Controllers/ContactController.cs
@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace Webzine.WebApplication.Controllers
+{
+    /// <summary>
+    /// Controller pour la page contact.
+    /// </summary>
+    public class ContactController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}
diff --git a/Webzine.WebApplication/Controllers/TitreController.cs b/Webzine.WebApplication/Controllers/TitreController.cs
new file mode 100644
index 0000000..23d400f
--- /dev/null
+++ b/Webzine.WebApplication/Controllers/TitreController.cs
@@ -0,0 +1,181 @@
+using Microsoft.AspNetCore.Mvc;
+using Webzine.Entity;
+using Webzine.Entity.Fixtures;
+using Webzine.WebApplication.ViewsModels.Titre;
+
+namespace Webzine.WebApplication.Controllers;
+
+/// <summary>
+/// Contrôleur responsable de la gestion des titres musicaux :
+/// affichage des détails, filtrage par style,
+/// ajout de likes et commentaires.
+/// </summary>
+[Route("titre")]
+public class TitreController : Microsoft.AspNetCore.Mvc.Controller
+{
+    private readonly ILogger<TitreController> _logger;
+    private readonly List<Titre> _titres;
+    private readonly List<Style> _styles;
+    private readonly List<Artiste> _artistes;
+
+    /// <summary>
+    /// Initialise une nouvelle instance du <see cref="TitreController"/>.
+    /// Les données sont générées dynamiquement via <see cref="DataFactory"/>.
+    /// </summary>
+    /// <param name="logger">Service de journalisation injecté.</param>
+    public TitreController(ILogger<TitreController> logger)
+    {
+        _logger = logger;
+
+        _logger.LogInformation("Initialisation du contrôleur TitreController.");
+
+        var factory = new DataFactory();
+
+        _artistes = factory.GenerateArtists(10);
+        _styles = factory.GenerateStyles(10);
+        _titres = factory.GenerateTitres(30, _artistes, _styles);
+
+        factory.GenerateCommentaires(50, _titres);
+
+        _logger.LogInformation("Données fictives générées avec succès.");
+    }
+
+    /// <summary>
+    /// Affiche le détail d'un titre spécifique.
+    /// </summary>
+    /// <param name="id">Identifiant du titre.</param>
+    /// <returns>Vue des détails ou 404 si introuvable.</returns>
+    [HttpGet("{id}")]
+    public IActionResult Details(int id)
+    {
+        _logger.LogInformation("Demande d'affichage du détail pour le titre ID {Id}.", id);
+
+        var titre = _titres.FirstOrDefault(t => t.IdTitre == id);
+
+        if (titre == null)
+        {
+            _logger.LogWarning("Titre avec ID {Id} introuvable.", id);
+            return NotFound();
+        }
+
+        var vm = new TitreDetail
+        {
+            Details = new TitreContent
+            {
+                IdTitre = titre.IdTitre,
+                Libelle = titre.Libelle,
+                Chronique = titre.Chronique,
+                DateSortie = titre.DateSortie,
+                NbLikes = titre.NbLikes,
+                UrlJaquette = titre.UrlJaquette,
+                UrlEcoute = titre.UrlEcoute,
+                ArtisteNom = titre.Artiste?.Nom,
+                Styles = titre.Styles,
+                Commentaires = titre.Commentaires
+            },
+            CommentForm = new TitreComment
+            {
+                IdTitre = titre.IdTitre
+            }
+        };
+
+        return View(vm);
+    }
+
+    /// <summary>
+    /// Affiche les titres correspondant à un style musical donné.
+    /// </summary>
+    /// <param name="style">Nom du style musical.</param>
+    /// <returns>Vue contenant la liste filtrée.</returns>
+    [HttpGet("style/{style}")]
+    public IActionResult Style(string style)
+    {
+        _logger.LogInformation("Recherche des titres pour le style : {Style}.", style);
+
+        var titresFiltres = _titres
+            .Where(t => t.Styles.Any(s => s.Libelle.Equals(style)))
+            .OrderBy(t => t.Libelle)
+            .ToList();
+
+        if (!titresFiltres.Any())
+        {
+            _logger.LogWarning("Aucun titre trouvé pour le style : {Style}.", style);
+            return NotFound();
+        }
+
+        var vm = new TitreStyle
+        {
+            StyleName = style,
+            Titres = titresFiltres.Select(t => new TitreStyleItem
+            {
+                IdTitre = t.IdTitre,
+                Libelle = t.Libelle,
+                ArtisteNom = t.Artiste?.Nom,
+                UrlJaquette = t.UrlJaquette,
+                Duree = t.Duree
+            }).ToList()
+        };
+
+        return View(vm);
+    }
+
+    /// <summary>
+    /// Ajoute un like à un titre.
+    /// </summary>
+    /// <param name="model">Modèle contenant l'identifiant du titre.</param>
+    /// <returns>Redirection vers la page détail.</returns>
+    [HttpPost("like")]
+    public IActionResult Like(TitreLike model)
+    {
+        _logger.LogInformation("Ajout d'un like pour le titre ID {Id}.", model.IdTitre);
+
+        var titre = _titres.FirstOrDefault(t => t.IdTitre == model.IdTitre);
+
+        if (titre == null)
+        {
+            _logger.LogWarning("Impossible d'ajouter un like. Titre ID {Id} introuvable.", model.IdTitre);
+            return NotFound();
+        }
+
+        titre.NbLikes++;
+
+        return RedirectToAction("Details", new { id = model.IdTitre });
+    }
+
+    /// <summary>
+    /// Ajoute un commentaire à un titre.
+    /// </summary>
+    /// <param name="model">Données du commentaire.</param>
+    /// <returns>Redirection vers la page détail.</returns>
+    [HttpPost("comment")]
+    public IActionResult Comment(TitreComment model)
+    {
+        if (!ModelState.IsValid)
+        {
+            _logger.LogWarning("Échec de validation du modèle de commentaire pour le titre ID {Id}.", model.IdTitre);
+            return RedirectToAction("Details", new { id = model.IdTitre });
+        }
+
+        var titre = _titres.FirstOrDefault(t => t.IdTitre == model.IdTitre);
+
+        if (titre == null)
+        {
+            _logger.LogWarning("Impossible d'ajouter le commentaire. Titre ID {Id} introuvable.", model.IdTitre);
+            return NotFound();
+        }
+
+        var commentaire = new Commentaire
+        {
+            Auteur = model.Auteur,
+            Contenu = model.Contenu,
+            DateCreation = DateTime.Now,
+            IdTitre = model.IdTitre
+        };
+
+        titre.Commentaires.Add(commentaire);
+
+        _logger.LogInformation("Commentaire ajouté avec succès au titre ID {Id}.", model.IdTitre);
+
+        return RedirectToAction("Details", new { id = model.IdTitre });
+    }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/Program.cs b/Webzine.WebApplication/Program.cs
index c9ec88c..aec5da5 100644
--- a/Webzine.WebApplication/Program.cs
+++ b/Webzine.WebApplication/Program.cs
@@ -1,7 +1,5 @@
 using NLog;
 using NLog.Web;
-using Webzine.Repository;
-using Webzine.Repository.Contracts;
 
 // Initiation du logger NLog pour la classe courante afin de pouvoir l'utiliser pour logger des messages d'information, d'erreur, etc avant la construction de l'application.
 var logger = LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();
@@ -23,9 +21,6 @@ try
     builder.Logging.ClearProviders();
     builder.Host.UseNLog();
 
-    // Register LocalEntityRepository as a singleton
-    builder.Services.AddSingleton<ILocalEntityRepository, LocalEntityRepository>();
-
     var app = builder.Build();
 
     // Active la possibilité de servir des fichiers statiques présents dans
@@ -41,14 +36,6 @@ try
         name: "default",
         pattern: "{controller=Accueil}/{action=Index}/{id?}");
 
-
-    // Permet de remplir les listes d'entités du repository avec des donn�es de test.
-    using (var scope = app.Services.CreateScope())
-    {
-        var repository = scope.ServiceProvider.GetRequiredService<ILocalEntityRepository>();
-        repository.Seed();
-    }
-
     app.Run();
 }
 catch (Exception exception)
diff --git a/Webzine.WebApplication/ViewModels/ArtisteModel.cs b/Webzine.WebApplication/ViewModels/ArtisteModel.cs
new file mode 100644
index 0000000..176623c
--- /dev/null
+++ b/Webzine.WebApplication/ViewModels/ArtisteModel.cs
@@ -0,0 +1,17 @@
+using Webzine.Entity;
+
+namespace Webzine.WebApplication.ViewModels
+{
+    public class ArtisteModel
+    {
+        /// <summary>
+        /// Artiste dont on affiche les détails.
+        /// </summary>
+        public Artiste Artiste { get; set; }
+
+        /// <summary>
+        /// Liste des titres de l'artiste.
+        /// </summary>
+        public List<Titre> Titres { get; set; }
+    }
+}
diff --git a/Webzine.WebApplication/Views/Artiste/Index.cshtml b/Webzine.WebApplication/Views/Artiste/Index.cshtml
new file mode 100644
index 0000000..2063243
--- /dev/null
+++ b/Webzine.WebApplication/Views/Artiste/Index.cshtml
@@ -0,0 +1,70 @@
+@model Webzine.WebApplication.ViewModels.ArtisteModel
+
+@{
+    ViewData["Title"] = "Artiste";
+}
+
+
+<div class="container">
+    <h1>@Model.Artiste.Nom</h1>
+    
+    <hr class="mb-5" />
+
+    <p class="lead">@Model.Artiste.Biographie</p>
+
+    <h2 class="mt-5 mb-4">Albums</h2>
+    <hr class="mb-5" />
+
+    @* On groupe les titres par nom d'album *@
+    @{
+        var albumsGroupes = Model.Titres
+                .OrderBy(t => t.Libelle)  // Trie les titres par ordre alphabétique au sein de chaque groupe futur
+                .GroupBy(t => t.Album)    // Groupe par nom d'album
+                .OrderBy(g => g.Key);     // Trie les albums par ordre alphabétique (la clé du groupe)    
+    }
+
+    @foreach (var groupe in albumsGroupes)
+    {
+        // On récupère le premier titre du groupe pour afficher l'image de l'album
+        var premierTitre = groupe.First();
+
+        <div class="row mb-5 align-items-start">
+            <div class="col-md-3 mb-3">
+                <img src="@premierTitre.UrlJaquette"
+                     class="img-fluid shadow-sm rounded border"
+                     alt="Pochette de @groupe.Key" />
+            </div>
+
+            <div class="col-md-9">
+                <h3 class="h4 pb-2">@groupe.Key</h3>
+
+                <table class="table table-hover table-sm mt-3">
+                    <thead class="text-muted">
+                        <tr>
+                            <th style="width: 80px">Durée</th>
+                            <th>Titre</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach (var titre in groupe)
+                        {
+                            // Conversion des secondes en format MM:SS
+                            var minutes = titre.Duree / 60;
+                            var secondes = titre.Duree % 60;
+                            var dureeFormatee = $"{minutes}:{secondes:D2}";
+
+                            <tr>
+                                <td class="text-secondary font-monospace">@dureeFormatee</td>
+                                <td>
+                                    <span class="text-primary fw-bold" style="cursor:pointer">
+                                        @titre.Libelle
+                                    </span>
+                                </td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    }
+</div>
\ No newline at end of file
diff --git a/Webzine.WebApplication/Views/Contact/Index.cshtml b/Webzine.WebApplication/Views/Contact/Index.cshtml
new file mode 100644
index 0000000..d2c892b
--- /dev/null
+++ b/Webzine.WebApplication/Views/Contact/Index.cshtml
@@ -0,0 +1,66 @@
+@{
+    ViewData["Title"] = "Contact";
+}
+
+<div class="container">
+    <h1>Contact</h1>
+    <div>
+        C.U.C.D.B - DIIAGE <br />   
+        69 Avenue Aristide Briand<br />
+        21000 Dijon</p>
+    </div>
+    <div>
+        <i class="fa-solid fa-phone"></i> Phone : 03 80 40 50 60<br />
+        <i class="fa-solid fa-envelope"></i> secretariat@cucdb.fr
+    </div>
+
+</div>
+
+<div class="container mt-5">
+
+    <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 text-decoration-none">
+                <i class="fa-solid fa-link fa-3x text-primary mb-3"></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 text-decoration-none">
+                <i class="fa-brands fa-facebook fa-3x text-primary mb-3"></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 text-decoration-none">
+                <i class="fa-brands fa-instagram fa-3x text-primary mb-3"></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 text-decoration-none">
+                <i class="fa-brands fa-linkedin fa-3x text-primary mb-3"></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 text-decoration-none">
+                <i class="fa-solid fa-map fa-3x text-primary mb-3"></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 text-decoration-none">
+                <i class="fa-brands fa-twitter fa-3x text-primary mb-3"></i>
+                <div class="fw-bold text-primary">Twitter</div>
+            </a>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/Webzine.WebApplication/Views/Shared/_Layout.cshtml b/Webzine.WebApplication/Views/Shared/_Layout.cshtml
index 2f42ca0..80e4341 100644
--- a/Webzine.WebApplication/Views/Shared/_Layout.cshtml
+++ b/Webzine.WebApplication/Views/Shared/_Layout.cshtml
@@ -6,8 +6,9 @@
     <title>@ViewData["Title"] - Webzine</title>
 
     @* Ajout de bootstrap *@
-    <script src="./js/bootstrap.min.js" defer></script>
-    <link rel="stylesheet" href="./css/bootstrap.min.css">
+    <script src="~/js/bootstrap.min.js" defer></script>
+    <link rel="stylesheet" href="~/css/app.css">
+    <link rel="stylesheet" href="~/css/bootstrap.min.css">
 
     @* Ajout de font-awesome *@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
diff --git a/Webzine.WebApplication/Views/Titre/Details.cshtml b/Webzine.WebApplication/Views/Titre/Details.cshtml
new file mode 100644
index 0000000..287f820
--- /dev/null
+++ b/Webzine.WebApplication/Views/Titre/Details.cshtml
@@ -0,0 +1,193 @@
+@model Webzine.WebApplication.ViewsModels.Titre.TitreDetail
+
+@{
+    ViewData["Title"] = Model.Details.Libelle;
+}
+
+<div class="container mt-4">
+
+    <div class="mb-3">
+        <h2>
+            <a asp-area="" asp-controller="" asp-action="" asp-route-style="@Model.Details.ArtisteNom">@Model.Details.ArtisteNom</a>
+            - @Model.Details.Libelle
+        </h2>
+
+        <div class="d-flex justify-content-between align-items-center pb-2 mb-3">
+
+            <div class="text-muted small d-flex align-items-center gap-4">
+
+                <!-- Date -->
+                <span class="text-dark">
+                    <i class="fa fa-calendar me-1"></i>
+                    Le @Model.Details.DateSortie.ToString("dd/MM/yyyy 'à' HH:mm")
+                </span>
+
+                <!-- Likes -->
+                <span>
+                    <i class="fa fa-heart text-dark me-1"></i>
+                    @Model.Details.NbLikes
+                </span>
+
+                <!-- Styles -->
+                <span class="text-dark">
+                    <i class="fa fa-tags me-1"></i>
+                    Styles :
+
+                    @for (int i = 0; i < Model.Details.Styles.Count; i++)
+                    {
+                        var style = Model.Details.Styles[i];
+
+                        <a class="text-primary text-decoration-none fw-semibold"
+                           asp-controller="Titre"
+                           asp-action="Style"
+                           asp-route-style="@style.Libelle">
+                            @style.Libelle
+                        </a>
+
+                        @if (i < Model.Details.Styles.Count - 1)
+                        {
+                            <span>, </span>
+                        }
+                    }
+                </span>
+
+            </div>
+
+            <!-- ACTION BUTTONS -->
+            <div class="d-flex gap-2">
+
+                <form asp-action="Like" method="post">
+                    <input type="hidden" name="IdTitre" value="@Model.Details.IdTitre" />
+                    <button type="submit" class="btn btn-outline-primary btn-sm">
+                        <i class="fa fa-thumbs-up me-1"></i> Like
+                    </button>
+                </form>
+
+                <a class="btn text-primary btn-sm">
+                    <i class="fa fa-pen-to-square me-1"></i> Editer
+                </a>
+
+            </div>
+
+        </div>
+    </div>
+
+    <!-- CONTENU -->
+    <div class="row mt-4">
+        <div class="col-md-8">
+            <p class="text-justify">
+                @Model.Details.Chronique
+            </p>
+        </div>
+
+        <div class="col-md-4 text-center">
+            <img src="@Model.Details.UrlJaquette"
+                 class="img-fluid rounded shadow"
+                 alt="Jaquette" />
+        </div>
+    </div>
+
+    <!-- LECTEUR -->
+    @if (!string.IsNullOrEmpty(Model.Details.UrlEcoute))
+    {
+        <div class="mt-4">
+            <iframe width="100%" height="315"
+                    src="@Model.Details.UrlEcoute"
+                    title="Lecteur"
+                    allowfullscreen>
+            </iframe>
+        </div>
+    }
+
+    <!-- FORMULAIRE COMMENTAIRE -->
+    <div class="mt-4 mb-4">
+        <div>
+
+            <h4 class="mb-4">Donne ton avis sur le titre</h4>
+
+            <form asp-action="Comment" method="post">
+                <input type="hidden" name="IdTitre" value="@Model.Details.IdTitre"/>
+
+                <div class="row mb-3 align-items-center">
+                    <label class="col-sm-2 col-form-label">
+                        Nom<span class="text-danger">*</span>
+                    </label>
+                    <div class="col">
+                        <input name="Auteur"
+                               class="form-control input-full"
+                               placeholder="Votre nom"
+                               required />
+                    </div>
+                </div>
+
+                <div class="row mb-3 align-items-start">
+                    <label class="col-sm-2 col-form-label">
+                        Commentaire<span class="text-danger">*</span>
+                    </label>
+                    <div class="col">
+                        <textarea name="Contenu"
+                      rows="3"
+                      class="form-control input-full"
+                      placeholder="Votre commentaire..."
+                      required></textarea>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-sm-6 offset-sm-2">
+                        <button type="submit" class="btn btn-primary">
+                            Envoyer
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+        </div>
+    </div>
+
+
+    <!-- COMMENTAIRES -->
+    <div class="mt-4">
+
+        <h4 class="mb-4">Commentaires</h4>
+
+        @if (Model.Details.Commentaires.Any())
+        {
+            foreach (var comment in Model.Details.Commentaires.OrderByDescending(c => c.DateCreation))
+            {
+                <div class="row mb-4">
+
+                    <div class="col-sm-1"></div>
+
+                    <div class="col-sm-6 d-flex">
+                        <img src="/images/avatar.png"
+                             width="50"
+                             height="50"
+                             class="rounded-circle me-3 shadow-sm"
+                             alt="avatar" />
+
+                        <div>
+                            <strong>@comment.Auteur</strong>,
+                            <span class="text-muted small">
+                                le @comment.DateCreation.ToString("dd/MM/yyyy HH:mm")
+                            </span>
+
+                            <p class="mb-0">@comment.Contenu</p>
+                        </div>
+                    </div>
+
+                </div>
+            }
+        }
+        else
+        {
+            <div class="row">
+                <div class="col-sm-6 offset-sm-2">
+                    <p class="text-muted">Aucun commentaire pour le moment.</p>
+                </div>
+            </div>
+        }
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/Webzine.WebApplication/Views/Titre/Style.cshtml b/Webzine.WebApplication/Views/Titre/Style.cshtml
new file mode 100644
index 0000000..cd85fd9
--- /dev/null
+++ b/Webzine.WebApplication/Views/Titre/Style.cshtml
@@ -0,0 +1,50 @@
+@model Webzine.WebApplication.ViewsModels.Titre.TitreStyle
+
+@{
+    ViewData["Title"] = $"Titres - {Model.StyleName}";
+    Layout = "_Layout";
+}
+<div class="container mt-4">
+    <div class="row">
+
+        <!-- COLUMN -->
+        <div class="col-md-8">
+
+            <h1 class="mb-4 titre-h1">Titres ayant le style @Model.StyleName</h1>
+
+            @if (!Model.Titres.Any())
+            {
+                <div class="alert alert-info">
+                    Aucun titre trouvé.
+                </div>
+            }
+            else
+            {
+                @foreach (var titre in Model.Titres)
+                {
+                    <div class="titre-item d-flex align-items-start">
+
+                        <!-- Image -->
+                        <div class="me-3">
+                            <img src="@titre.UrlJaquette" alt="@titre.Libelle" />
+                        </div>
+
+                        <!-- Infos -->
+                        <div>
+                            <a asp-action="Details"
+                               asp-route-id="@titre.IdTitre"
+                               class="titre-link">
+                                @titre.ArtisteNom - @titre.Libelle
+                            </a>
+
+                            <div class="titre-duree">
+                                Durée : @TimeSpan.FromSeconds(titre.Duree).ToString(@"mm\:ss")
+                            </div>
+                        </div>
+
+                    </div>
+                }
+            }
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs
new file mode 100644
index 0000000..2301088
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs
@@ -0,0 +1,19 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreComment
+{
+    [Required]
+    public int IdTitre { get; set; }
+
+    [Required]
+    [MinLength(2)]
+    [MaxLength(30)]
+    public string Auteur { get; set; }
+
+    [Required]
+    [MinLength(10)]
+    [MaxLength(1000)]
+    public string Contenu { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs
new file mode 100644
index 0000000..fd671c9
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs
@@ -0,0 +1,26 @@
+using Webzine.Entity;
+
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreContent
+{
+    public int IdTitre { get; set; }
+
+    public string Libelle { get; set; }
+
+    public string Chronique { get; set; }
+
+    public DateTime DateSortie { get; set; }
+
+    public int NbLikes { get; set; }
+
+    public string UrlJaquette { get; set; }
+
+    public string UrlEcoute { get; set; }
+
+    public string ArtisteNom { get; set; }
+
+    public List<Style> Styles { get; set; } = new();
+
+    public List<Commentaire> Commentaires { get; set; } = new();
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs
new file mode 100644
index 0000000..82f076b
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs
@@ -0,0 +1,7 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreDetail
+{
+    public TitreContent Details { get; set; }
+    public TitreComment CommentForm { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs
new file mode 100644
index 0000000..b126e20
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs
@@ -0,0 +1,6 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreLike
+{
+    public int IdTitre { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs
new file mode 100644
index 0000000..72d2410
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs
@@ -0,0 +1,8 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreStyle
+{
+    public string? StyleName { get; set; }
+
+    public List<TitreStyleItem> Titres { get; set; } = new();
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs
new file mode 100644
index 0000000..647f61f
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs
@@ -0,0 +1,14 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreStyleItem
+{
+    public int IdTitre { get; set; }
+
+    public string? Libelle { get; set; }
+
+    public string? ArtisteNom { get; set; }
+
+    public string? UrlJaquette { get; set; }
+
+    public int Duree { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/Webzine.WebApplication.csproj.user b/Webzine.WebApplication/Webzine.WebApplication.csproj.user
index ea9a183..2702025 100644
--- a/Webzine.WebApplication/Webzine.WebApplication.csproj.user
+++ b/Webzine.WebApplication/Webzine.WebApplication.csproj.user
@@ -2,9 +2,12 @@
 <Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
     <ActiveDebugProfile>https</ActiveDebugProfile>
-    <Controller_SelectedScaffolderID>MvcControllerWithActionsScaffolder</Controller_SelectedScaffolderID>
+    <Controller_SelectedScaffolderID>MvcControllerEmptyScaffolder</Controller_SelectedScaffolderID>
     <Controller_SelectedScaffolderCategoryPath>root/Common/MVC/Controller</Controller_SelectedScaffolderCategoryPath>
     <View_SelectedScaffolderID>RazorViewEmptyScaffolder</View_SelectedScaffolderID>
     <View_SelectedScaffolderCategoryPath>root/Common/MVC/View</View_SelectedScaffolderCategoryPath>
   </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DebuggerFlavor>ProjectDebugger</DebuggerFlavor>
+  </PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/Webzine.WebApplication/wwwroot/css/app.css b/Webzine.WebApplication/wwwroot/css/app.css
index e69de29..60027f0 100644
--- a/Webzine.WebApplication/wwwroot/css/app.css
+++ b/Webzine.WebApplication/wwwroot/css/app.css
@@ -0,0 +1,33 @@
+a {
+    text-decoration: none !important;
+}
+
+.titre-h1 {
+    padding: 15px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.titre-item {
+    padding: 8px 0;
+}
+
+.titre-item img {
+    width: 70px;
+    height: 70px;
+    object-fit: cover;
+}
+
+.titre-link {
+    font-size: 1.1rem;
+    color: #0d6efd;
+    text-decoration: none;
+}
+
+.titre-link:hover {
+    text-decoration: underline;
+}
+
+.titre-duree {
+    font-size: 0.9rem;
+    color: #666;
+}
\ No newline at end of file