diff --git a/CityInfo.WEB/Components/PageHeader.razor b/CityInfo.WEB/Components/PageHeader.razor
index 7507e77..2db5f38 100644
--- a/CityInfo.WEB/Components/PageHeader.razor
+++ b/CityInfo.WEB/Components/PageHeader.razor
@@ -18,11 +18,17 @@
                             } else if(LinkType == LinkType.Edit)
                             {
                             <a href="@Link" class="btn btn-primary">
-                                <i class="fa-solid fa-edit"></i>
+                                <i class="fa-solid fa-pen-to-square"></i>
                                 Editer
                             </a>
                             }
-
+                            else if (LinkType == LinkType.Details)
+                            {
+                                <a href="@Link" class="btn btn-primary">
+                                    <i class="fa-solid fa-circle-info"></i>
+                                    Revenir aux détails
+                                </a>
+                            }
                     </div>
                 </div>
             }
diff --git a/CityInfo.WEB/Components/PageHeader.razor.cs b/CityInfo.WEB/Components/PageHeader.razor.cs
index 7a36ae3..d203495 100644
--- a/CityInfo.WEB/Components/PageHeader.razor.cs
+++ b/CityInfo.WEB/Components/PageHeader.razor.cs
@@ -5,7 +5,8 @@ namespace CityInfo.WEB.Components
     public enum LinkType
     {
         Create,
-        Edit
+        Edit,
+        Details
     }
     public partial class PageHeader
     {
diff --git a/CityInfo.WEB/Pages/CityDetails.razor b/CityInfo.WEB/Pages/CityDetails.razor
index 1f10748..0c69d18 100644
--- a/CityInfo.WEB/Pages/CityDetails.razor
+++ b/CityInfo.WEB/Pages/CityDetails.razor
@@ -42,7 +42,7 @@
                             <th>@pointOfInterest.Id</th>
                             <td>@pointOfInterest.Name</td>
                             <td>
-                                <a class="btn btn-primary" href="@($"/pointofinterest/{pointOfInterest.Id}")">Détails</a>
+                                <a class="btn btn-primary" href="@($"/city/{City.Id}/pointofinterest/{pointOfInterest.Id}")">Détails</a>
                             </td>
                         </tr>
                     }
diff --git a/CityInfo.WEB/Pages/CityDetails.razor.cs b/CityInfo.WEB/Pages/CityDetails.razor.cs
index b35184b..e75d9d7 100644
--- a/CityInfo.WEB/Pages/CityDetails.razor.cs
+++ b/CityInfo.WEB/Pages/CityDetails.razor.cs
@@ -23,6 +23,7 @@ namespace CityInfo.WEB.Pages
             if(City == null)
             {
                 NavigationManager.NavigateTo("/not-found");
+                return;
             }
             PointsOfInterest = await PointOfInterestDataService.GetPointsOfInterest(CityId);
         }
diff --git a/CityInfo.WEB/Pages/PointOfInterestDetails.razor b/CityInfo.WEB/Pages/PointOfInterestDetails.razor
new file mode 100644
index 0000000..b1ab04d
--- /dev/null
+++ b/CityInfo.WEB/Pages/PointOfInterestDetails.razor
@@ -0,0 +1,30 @@
+@page "/city/{CityId:int}/pointofinterest/{PointOfInterestId:int}"
+
+@if(PointOfInterest == null)
+{
+    <Loading></Loading>
+} else
+{
+    <PageHeader Name="Point d'intéret" NameType="Détails" LinkType="LinkType.Edit" Link="@($"/city/{CityId}/pointofinterest/{PointOfInterestId}/edit")"></PageHeader>
+    <Card HeaderTitle="Informations sur le point d'intéret">
+        <div class="datagrid">
+            <div class="datagrid-item">
+                <div class="datagrid-title">Nom</div>
+                <div class="datagrid-content">@PointOfInterest.Name</div>
+            </div>
+            <div class="datagrid-item">
+                <div class="datagrid-title">Description</div>
+                <div class="datagrid-content">@PointOfInterest.Description</div>
+            </div>
+            @if(City != null)
+            {
+                <div class="datagrid-item">
+                    <div class="datagrid-title">Ville liée</div>
+                    <div class="datagrid-content"><a class="link link-primary" href="@($"/city/{CityId}")">@City.Name</a></div>
+                </div>
+            }
+            
+        </div>
+    </Card>
+
+}
\ No newline at end of file
diff --git a/CityInfo.WEB/Pages/PointOfInterestDetails.razor.cs b/CityInfo.WEB/Pages/PointOfInterestDetails.razor.cs
new file mode 100644
index 0000000..6e3cd9b
--- /dev/null
+++ b/CityInfo.WEB/Pages/PointOfInterestDetails.razor.cs
@@ -0,0 +1,33 @@
+using CityInfo.WEB.Models;
+using CityInfo.WEB.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace CityInfo.WEB.Pages
+{
+    public partial class PointOfInterestDetails
+    {
+        [Inject]
+        public IPointOfInterestDataService PointOfInterestDataService { get; set; } = default!;
+        [Inject]
+        public ICityDataService CityDataService { get; set; } = default!;
+        [Inject]
+        public NavigationManager NavigationManager { get; set; } = default!;
+        [Parameter]
+        public int CityId { get; set; }
+        [Parameter]
+        public int PointOfInterestId { get; set; }
+        public PointOfInterest? PointOfInterest { get; set; }
+        public City? City { get; set; }
+
+        protected async override Task OnInitializedAsync()
+        {
+            PointOfInterest = await PointOfInterestDataService.GetPointOfInterest(CityId, PointOfInterestId);
+            if (PointOfInterest == null)
+            {
+                NavigationManager.NavigateTo("not-found");
+                return;
+            }
+            City = await CityDataService.GetCity(CityId);
+        }
+    }
+}
diff --git a/CityInfo.WEB/Pages/PointOfInterestEdit.razor b/CityInfo.WEB/Pages/PointOfInterestEdit.razor
new file mode 100644
index 0000000..5f967a8
--- /dev/null
+++ b/CityInfo.WEB/Pages/PointOfInterestEdit.razor
@@ -0,0 +1,36 @@
+@page "/city/{CityId:int}/pointofinterest/{PointOfInterestId:int}/edit"
+
+@if (PointOfInterest == null)
+{
+    <Loading></Loading>
+}
+else
+{
+    <PageHeader Name="Point d'intéret" NameType="Modifier" LinkType="LinkType.Details" Link="@($"/city/{CityId}/pointofinterest/{PointOfInterestId}")"></PageHeader>
+    <Card HeaderTitle="Modifier le point d'intéret">
+        <EditForm Model="PointOfInterest" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
+            <div>
+                <label for="PointOfInterestName" class="form-label">Nom</label>
+
+                <div class="input-icon">
+                    <span class="input-icon-addon">
+                        <i class="fa-solid fa-location-dot"></i>
+                    </span>
+                    <InputText id="PointOfInterestName" @bind-Value="PointOfInterest.Name" class="form-control"></InputText>
+                    <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => PointOfInterest.Name)" />
+                </div>
+            </div>
+            <div>
+                <label for="PointOfInterestDescription" class="form-label">Description</label>
+                <div class="input-icon">
+                    <span class="input-icon-addon">
+                        <i class="fa-solid fa-align-left"></i>
+                    </span>
+                    <InputText id="PointOfInterestDescription" @bind-Value="PointOfInterest.Description" class="form-control"></InputText>
+                    <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => PointOfInterest.Description)" />
+                </div>
+            </div>
+        </EditForm>
+    </Card>
+
+}
\ No newline at end of file
diff --git a/CityInfo.WEB/Pages/PointOfInterestEdit.razor.cs b/CityInfo.WEB/Pages/PointOfInterestEdit.razor.cs
new file mode 100644
index 0000000..10b7dd9
--- /dev/null
+++ b/CityInfo.WEB/Pages/PointOfInterestEdit.razor.cs
@@ -0,0 +1,38 @@
+using CityInfo.WEB.Models;
+using CityInfo.WEB.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace CityInfo.WEB.Pages
+{
+    public partial class PointOfInterestEdit
+    {
+        [Inject]
+        public IPointOfInterestDataService PointOfInterestDataService { get; set; } = default!;
+        [Inject]
+        public ICityDataService CityDataService { get; set; } = default!;
+        [Inject]
+        public NavigationManager NavigationManager { get; set; } = default!;
+        [Parameter]
+        public int CityId { get; set; }
+        [Parameter]
+        public int PointOfInterestId { get; set; }
+        public PointOfInterest? PointOfInterest { get; set; }
+        protected async override Task OnInitializedAsync()
+        {
+            PointOfInterest = await PointOfInterestDataService.GetPointOfInterest(CityId, PointOfInterestId);
+            if (PointOfInterest == null)
+            {
+                NavigationManager.NavigateTo("not-found");
+                return;
+            }
+        }
+        private async Task HandleValidSubmit()
+        {
+
+        }
+        private async Task HandleInvalidSubmit()
+        {
+
+        }
+    }
+}
diff --git a/CityInfo.WEB/Services/PointOfInterestDataService.cs b/CityInfo.WEB/Services/PointOfInterestDataService.cs
index b6cd575..0eda2ae 100644
--- a/CityInfo.WEB/Services/PointOfInterestDataService.cs
+++ b/CityInfo.WEB/Services/PointOfInterestDataService.cs
@@ -24,9 +24,32 @@ namespace CityInfo.WEB.Services
             throw new NotImplementedException();
         }
 
-        public Task<PointOfInterest?> GetPointOfInterest(int cityId, int pointOfInterestId)
+        public async Task<PointOfInterest?> GetPointOfInterest(int cityId, int pointOfInterestId)
         {
-            throw new NotImplementedException();
+            try
+            {
+                var response = await _httpClient.GetAsync($"/api/cities/{cityId}/pointsofinterest/{pointOfInterestId}");
+
+                if (response.IsSuccessStatusCode)
+                {
+                    return await response.Content.ReadFromJsonAsync<PointOfInterest>();
+                }
+
+                if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
+                {
+                    return null;
+                }
+
+                _logger.LogWarning($"Erreur HTTP {response.StatusCode} lors du chargement du point d'intéret {pointOfInterestId}",
+                    response.StatusCode, cityId);
+
+                return null;
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, $"Erreur lors de la récupération du point d'intéret {pointOfInterestId}", cityId);
+                return null;
+            }
         }
 
         public async Task<IEnumerable<PointOfInterest>> GetPointsOfInterest(int cityId)