diff --git a/Sources/MyFirstBlazor/MyFirstBlazor.csproj b/Sources/MyFirstBlazor/MyFirstBlazor.csproj
index b775b09..6033f3c 100644
--- a/Sources/MyFirstBlazor/MyFirstBlazor.csproj
+++ b/Sources/MyFirstBlazor/MyFirstBlazor.csproj
@@ -6,4 +6,10 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazorise.Bootstrap" Version="1.1.2" />
+    <PackageReference Include="Blazorise.DataGrid" Version="1.1.2" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.2" />
+  </ItemGroup>
+
 </Project>
diff --git a/Sources/MyFirstBlazor/Pages/List.razor b/Sources/MyFirstBlazor/Pages/List.razor
index 48ab1e8..27fdf9c 100644
--- a/Sources/MyFirstBlazor/Pages/List.razor
+++ b/Sources/MyFirstBlazor/Pages/List.razor
@@ -1,11 +1,29 @@
 @page "/list"
+@using MyFirstBlazor.Models;
+
 
 <h3>List</h3>
 
-@if (items != null)
-{
-    foreach (var item in items)
-    {
-        <div>@item.Id</div>
-    }
-}
\ No newline at end of file
+<DataGrid TItem="Item"
+          Data="@items"
+          ReadData="@OnReadData"
+          TotalItems="@totalItem"
+          PageSize="10"
+          ShowPager
+          Responsive>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
+        <DisplayTemplate>
+            @(string.Join(", ", ((Item)context).EnchantCategories))
+        </DisplayTemplate>
+    </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
+        <DisplayTemplate>
+            @(string.Join(", ", ((Item)context).RepairWith))
+        </DisplayTemplate>
+    </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
+</DataGrid>
diff --git a/Sources/MyFirstBlazor/Pages/List.razor.cs b/Sources/MyFirstBlazor/Pages/List.razor.cs
index 67a872f..bb67b0d 100644
--- a/Sources/MyFirstBlazor/Pages/List.razor.cs
+++ b/Sources/MyFirstBlazor/Pages/List.razor.cs
@@ -1,21 +1,34 @@
-using Microsoft.AspNetCore.Components;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Components;
 using MyFirstBlazor.Models;
 
-namespace MyFirstBlazor.Pages
+public partial class List
 {
-    public partial class List
-    {
-        private Item[] items;
+    private List<Item>? items;
+
+    private int totalItem;
+
+    [Inject]
+    public HttpClient Http { get; set; }
+
+    [Inject]
+    public NavigationManager NavigationManager { get; set; }
 
-        [Inject]
-        public HttpClient Http { get; set; }
+    private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+    {
+        if (e.CancellationToken.IsCancellationRequested)
+        {
+            return;
+        }
 
-        [Inject]
-        public NavigationManager NavigationManager { get; set; }
+        // When you use a real API, we use this follow code
+        //var response = await Http.GetJsonAsync<Item[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+        var response = (await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}FakeData.json")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
 
-        protected override async Task OnInitializedAsync()
+        if (!e.CancellationToken.IsCancellationRequested)
         {
-            items = await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json");
+            totalItem = (await Http.GetFromJsonAsync<List<Item>>($"{NavigationManager.BaseUri}FakeData.json")).Count;
+            items = new List<Item>(response); // an actual data for the current page
         }
     }
-}
+}
\ No newline at end of file
diff --git a/Sources/MyFirstBlazor/Pages/_Layout.cshtml b/Sources/MyFirstBlazor/Pages/_Layout.cshtml
index a0f515d..6f16388 100644
--- a/Sources/MyFirstBlazor/Pages/_Layout.cshtml
+++ b/Sources/MyFirstBlazor/Pages/_Layout.cshtml
@@ -28,5 +28,9 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+
+    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
 </body>
 </html>
diff --git a/Sources/MyFirstBlazor/Program.cs b/Sources/MyFirstBlazor/Program.cs
index c5ee18c..b5ca7cd 100644
--- a/Sources/MyFirstBlazor/Program.cs
+++ b/Sources/MyFirstBlazor/Program.cs
@@ -1,3 +1,6 @@
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using MyFirstBlazor.Data;
@@ -9,6 +12,10 @@ builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
 builder.Services.AddHttpClient();
+builder.Services
+   .AddBlazorise()
+   .AddBootstrapProviders()
+   .AddFontAwesomeIcons();
 
 var app = builder.Build();
 
diff --git a/Sources/MyFirstBlazor/_Imports.razor b/Sources/MyFirstBlazor/_Imports.razor
index ff9c5ea..c91e5ad 100644
--- a/Sources/MyFirstBlazor/_Imports.razor
+++ b/Sources/MyFirstBlazor/_Imports.razor
@@ -8,3 +8,4 @@
 @using Microsoft.JSInterop
 @using MyFirstBlazor
 @using MyFirstBlazor.Shared
+@using Blazorise.DataGrid