diff --git a/Blazor/Blazor/Modals/DeleteConfirmation.razor.cs b/Blazor/Blazor/Modals/DeleteConfirmation.razor.cs
index 40de040..bf38444 100644
--- a/Blazor/Blazor/Modals/DeleteConfirmation.razor.cs
+++ b/Blazor/Blazor/Modals/DeleteConfirmation.razor.cs
@@ -2,7 +2,7 @@
 using Blazored.Modal.Services;
 using Blazored.Modal;
 using Microsoft.AspNetCore.Components;
-using Blazor.Models;
+using Blazor.ViewClasses;
 
 namespace Blazor.Modals
 {
diff --git a/Blazor/Blazor/Pages/Chapters.razor b/Blazor/Blazor/Pages/Chapters.razor
index f2457b9..e600fad 100644
--- a/Blazor/Blazor/Pages/Chapters.razor
+++ b/Blazor/Blazor/Pages/Chapters.razor
@@ -28,5 +28,5 @@
             <button type="button" class="btn btn-primary" @onclick="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
         </DisplayTemplate>
     </DataGridColumn>
-</DataGrid> 
+</DataGrid>
 <script src="Pages/Chapters.razor.js"></script>
\ No newline at end of file
diff --git a/Blazor/Blazor/Pages/Chapters.razor.cs b/Blazor/Blazor/Pages/Chapters.razor.cs
index bb9c476..e1a7dad 100644
--- a/Blazor/Blazor/Pages/Chapters.razor.cs
+++ b/Blazor/Blazor/Pages/Chapters.razor.cs
@@ -1,48 +1,102 @@
-using Microsoft.AspNetCore.Components;
-using Blazor.Models;
-using Blazorise.DataGrid;
-using Blazored.LocalStorage;
+using Blazored.LocalStorage;
 using Blazor.Services;
 using Blazor.Modals;
 using Blazored.Modal;
 using Blazored.Modal.Services;
+using Blazor.ViewClasses;
+using System.Text;
+using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components;
+using Blazorise.DataGrid;
+using ChoETL;
 
-namespace Blazor.Pages
+
+namespace Blazor.Pages;
+public partial class Chapters
 {
-    public partial class Chapters
-    {
-        public List<Chapter> chapters;
+    public List<Chapter> chapters;
+
+    private int totalChapter;
+
+    [Inject]
+    public NavigationManager NavigationManager { get; set; }
+
+    [CascadingParameter]
+    public IModalService Modal { get; set; }
 
-        private int totalItem;
+    [Inject]
+    public IDataService DataService { get; set; }
+    public IWebHostEnvironment WebHostEnvironment { get; set; }
 
-        [Inject]
-        public NavigationManager NavigationManager { get; set; }
+    [Inject]
+    public HttpClient Http { get; set; }
 
-        [CascadingParameter]
-        public IModalService Modal { get; set; }
+    [Inject]
+    public ILocalStorageService LocalStorage { get; set; }
 
-        [Inject]
-        public IDataService DataService { get; set; }
+    [Inject]
+    public IJSRuntime IJSRuntime { get; set; }
 
-        [Inject]
-        public IWebHostEnvironment WebHostEnvironment { get; set; }
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        // Do not treat this action if is not the first render
+        if (!firstRender)
+        {
+            return;
+        }
+
+        var currentData = await LocalStorage.GetItemAsync<Chapter[]>("data");
 
-        private async Task OnReadData(DataGridReadDataEventArgs<Chapter> e)
+        // Check if data exist in the local storage
+        if (currentData == null)
+        {
+            // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
+            var originalData = Http.GetFromJsonAsync<Chapter[]>($"https://trusting-panini.87-106-126-109.plesk.page/api/chapters").Result;
+            await LocalStorage.SetItemAsync("data", originalData);
+        }
+    }
+
+    private async Task OnReadData(DataGridReadDataEventArgs<Chapter> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
             {
                 return;
             }
 
+        // When you use a real API, we use this follow code
+        //var response = await Http.GetFromJsonAsync<ChaptersModel[]>( $"https://trusting-panini.87-106-126-109.plesk.page/api/chapters?page={e.Page}&pageSize={e.PageSize}" );
+        var response = Http.GetFromJsonAsync<Chapter[]>($"https://trusting-panini.87-106-126-109.plesk.page/api/chapters").Result;
+
             if (!e.CancellationToken.IsCancellationRequested)
             {
-                chapters = await DataService.List(e.Page, e.PageSize);
-                totalItem = await DataService.Count();
+            totalChapter = (await LocalStorage.GetItemAsync<List<Chapter>>("data")).Count;
+            chapters = new List<Chapter>(response); // an actual data for the current page
+        }
+    }
+
+    private async void Export()
+    {
+        StringBuilder sb = new StringBuilder();
+        HttpResponseMessage response = await Http.GetAsync("https://trusting-panini.87-106-126-109.plesk.page/api/chapters");
+        var json = await response.Content.ReadAsStringAsync();
+        using (var jsonFile = ChoJSONReader.LoadText(json))
+        {
+            using (var csvFile = new ChoCSVWriter(sb).WithFirstLineHeader())
+            {
+                csvFile.Write(jsonFile);
             }
         }
 
+        var sentFile = new MemoryStream(Encoding.UTF32.GetBytes(sb.ToString()));
+
+        using (var streamRef = new DotNetStreamReference(stream: sentFile))
+        {
+            await IJSRuntime.InvokeVoidAsync("downloadFileFromStream", "data.csv", streamRef);
+        }
+    }
+
 
-        private async void OnDelete(int id)
+    private async void OnDelete(int id)
         {
             var parameters = new ModalParameters();
             parameters.Add(nameof(Chapter.Id), id);