diff --git a/myBlazorApp/myBlazorApp/Pages/Add.razor.cs b/myBlazorApp/myBlazorApp/Pages/Add.razor.cs
index 306432e..f3726fc 100644
--- a/myBlazorApp/myBlazorApp/Pages/Add.razor.cs
+++ b/myBlazorApp/myBlazorApp/Pages/Add.razor.cs
@@ -3,30 +3,17 @@ using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using myBlazorApp.Models;
+using myBlazorApp.Services;
 
 namespace myBlazorApp.Pages
 {
     public partial class Add
     {
-        [Inject]
-        public ILocalStorageService LocalStorage { get; set; }
-
-        [Inject]
-        public IWebHostEnvironment WebHostEnvironment { get; set; }
-
-        [Inject]
-        public NavigationManager NavigationManager { get; set; }
-
         /// <summary>
         /// The default enchant categories.
         /// </summary>
         private List<string> enchantCategories = new List<string>() { "armor", "armor_head", "armor_chest", "weapon", "digger", "breakable", "vanishable" };
 
-        /// <summary>
-        /// The default repair with.
-        /// </summary>
-        private List<string> repairWith = new List<string>() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };
-
         /// <summary>
         /// The current item model
         /// </summary>
@@ -36,44 +23,20 @@ namespace myBlazorApp.Pages
             RepairWith = new List<string>()
         };
 
-        private async void HandleValidSubmit()
-        {
-            // Get the current data
-            var currentData = await LocalStorage.GetItemAsync<List<Item>>("data");
-
-            // Simulate the Id
-            itemModel.Id = currentData.Max(s => s.Id) + 1;
-
-            // Add the item to the current data
-            currentData.Add(new Item
-            {
-                Id = itemModel.Id,
-                DisplayName = itemModel.DisplayName,
-                Name = itemModel.Name,
-                RepairWith = itemModel.RepairWith,
-                EnchantCategories = itemModel.EnchantCategories,
-                MaxDurability = itemModel.MaxDurability,
-                StackSize = itemModel.StackSize,
-                CreatedDate = DateTime.Now
-            });
-
-            // Save the image
-            var imagePathInfo = new DirectoryInfo($"{WebHostEnvironment.WebRootPath}/images");
-
-            // Check if the folder "images" exist
-            if (!imagePathInfo.Exists)
-            {
-                imagePathInfo.Create();
-            }
+        /// <summary>
+        /// The default repair with.
+        /// </summary>
+        private List<string> repairWith = new List<string>() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };
 
-            // Determine the image name
-            var fileName = new FileInfo($"{imagePathInfo}/{itemModel.Name}.png");
+        [Inject]
+        public IDataService DataService { get; set; }
 
-            // Write the file content
-            await File.WriteAllBytesAsync(fileName.FullName, itemModel.ImageContent);
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
 
-            // Save the data
-            await LocalStorage.SetItemAsync("data", currentData);
+        private async void HandleValidSubmit()
+        {
+            await DataService.Add(itemModel);
 
             NavigationManager.NavigateTo("list");
         }
diff --git a/myBlazorApp/myBlazorApp/Pages/List.razor.cs b/myBlazorApp/myBlazorApp/Pages/List.razor.cs
index 4f9f113..5ba93d7 100644
--- a/myBlazorApp/myBlazorApp/Pages/List.razor.cs
+++ b/myBlazorApp/myBlazorApp/Pages/List.razor.cs
@@ -3,56 +3,33 @@ using Blazored.LocalStorage;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 using myBlazorApp.Models;
+using myBlazorApp.Services;
 
 namespace myBlazorApp.Pages
 {
     public partial class List
-    { 
+    {
         private List<Item> items;
 
-        private int totalItem { get; set; }
+        private int totalItem;
 
         [Inject]
-        public HttpClient Http { get; set; }
-
-        [Inject]
-        public ILocalStorageService LocalStorage { get; set; }
-
+        public IDataService DataService { get; set; }
 
         [Inject]
         public IWebHostEnvironment WebHostEnvironment { get; set; }
 
-        [Inject]
-        public NavigationManager NavigationManager { get; set; }
-
-        protected override async Task OnAfterRenderAsync(bool firstRender)
-        {
-            if(!firstRender)
-            {
-                return;
-            }
-
-            var currentData = await LocalStorage.GetItemAsync<Item[]>("data");
-
-            if (currentData == null)
-            {
-                var originalData = Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
-                await LocalStorage.SetItemAsync("data", originalData);
-            }
-        }
-
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
             {
                 return;
             }
-            var response = (await LocalStorage.GetItemAsync<Item[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
 
             if (!e.CancellationToken.IsCancellationRequested)
             {
-                totalItem = (await LocalStorage.GetItemAsync<List<Item>>("data")).Count;
-                items = new List<Item>(response);
+                items = await DataService.List(e.Page, e.PageSize);
+                totalItem = await DataService.Count();
             }
         }
     }
diff --git a/myBlazorApp/myBlazorApp/Program.cs b/myBlazorApp/myBlazorApp/Program.cs
index 200afef..47d6fa0 100644
--- a/myBlazorApp/myBlazorApp/Program.cs
+++ b/myBlazorApp/myBlazorApp/Program.cs
@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Blazored.LocalStorage;
 using myBlazorApp.Data;
+using myBlazorApp.Services;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -18,6 +19,7 @@ builder.Services.AddBlazorise();
 builder.Services.AddBootstrapProviders();
 builder.Services.AddFontAwesomeIcons();
 builder.Services.AddBlazoredLocalStorage();
+builder.Services.AddScoped<IDataService, DataLocalService>();
 
 var app = builder.Build();
 
diff --git a/myBlazorApp/myBlazorApp/Services/DataLocalService.cs b/myBlazorApp/myBlazorApp/Services/DataLocalService.cs
new file mode 100644
index 0000000..61dbcd5
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Services/DataLocalService.cs
@@ -0,0 +1,86 @@
+using System;
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components;
+using myBlazorApp.Models;
+
+namespace myBlazorApp.Services
+{
+    public class DataLocalService : IDataService
+    {
+        private readonly HttpClient _http;
+        private readonly ILocalStorageService _localStorage;
+        private readonly NavigationManager _navigationManager;
+        private readonly IWebHostEnvironment _webHostEnvironment;
+
+        public DataLocalService(ILocalStorageService localStorage,
+            HttpClient http,
+            IWebHostEnvironment webHostEnvironment,
+            NavigationManager navigationManager)
+        {
+            _localStorage = localStorage;
+            _http = http;
+            _webHostEnvironment = webHostEnvironment;
+            _navigationManager = navigationManager;
+        }
+
+        public async Task Add(ItemModel model)
+        {
+            // Get the current data
+            var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
+
+            //Simulate the Id
+            model.Id = currentData.Max(s => s.Id) + 1;
+
+            // Add item to current data
+            currentData.Add(new Item
+            {
+                Id = model.Id,
+                DisplayName = model.DisplayName,
+                Name = model.Name,
+                RepairWith = model.RepairWith,
+                EnchantCategories = model.EnchantCategories,
+                MaxDurability = model.MaxDurability,
+                StackSize = model.StackSize,
+                CreatedDate = DateTime.Now
+            });
+
+            // Save the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+            // Check if the folder images exists
+            if (!imagePathInfo.Exists)
+            {
+                imagePathInfo.Create();
+            }
+
+            // Determine the image name
+            var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+
+            //Write the file content
+            await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
+
+            // Save the data
+            await _localStorage.SetItemAsync("data", currentData);
+        }
+
+        public async Task<int> Count()
+        {
+            return (await _localStorage.GetItemAsync<Item[]>("data")).Length;
+        }
+
+        public async Task<List<Item>> List(int currentPage, int pageSize)
+        {
+            // Load data from local storage
+            var currentData = await _localStorage.GetItemAsync<Item[]>("data");
+            // Check if data exist in the local storage
+            if (currentData == null)
+            {
+                // this code add in the local storage the fake data
+                var originalData = await _http.GetFromJsonAsync<Item[]>($"{_navigationManager.BaseUri}fake-data.json");
+                await _localStorage.SetItemAsync("data", originalData);
+            }
+
+            return (await _localStorage.GetItemAsync<Item[]>("data")).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
+        }
+    }
+}
diff --git a/myBlazorApp/myBlazorApp/Services/IDataService.cs b/myBlazorApp/myBlazorApp/Services/IDataService.cs
new file mode 100644
index 0000000..f628445
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Services/IDataService.cs
@@ -0,0 +1,13 @@
+using System;
+using myBlazorApp.Models;
+
+namespace myBlazorApp.Services
+{
+    public interface IDataService
+    {
+        Task Add(ItemModel model);
+        Task<int> Count();
+        Task<List<Item>> List(int currentPage, int pageSize);
+    }
+}
+
diff --git a/myBlazorApp/myBlazorApp/myBlazorApp.csproj b/myBlazorApp/myBlazorApp/myBlazorApp.csproj
index b50b14b..5a86a14 100644
--- a/myBlazorApp/myBlazorApp/myBlazorApp.csproj
+++ b/myBlazorApp/myBlazorApp/myBlazorApp.csproj
@@ -13,10 +13,12 @@
     <None Remove="Blazorise.Bootstrap" />
     <None Remove="Blazorise.Icons.FontAwesome" />
     <None Remove="Blazored.LocalStorage" />
+    <None Remove="Services\" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Properties\" />
     <Folder Include="Models\" />
+    <Folder Include="Services\" />
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Blazorise.DataGrid" Version="1.1.2" />
diff --git a/myBlazorApp/myBlazorApp/wwwroot/images/chat.png b/myBlazorApp/myBlazorApp/wwwroot/images/chat.png
new file mode 100644
index 0000000..ac61877
Binary files /dev/null and b/myBlazorApp/myBlazorApp/wwwroot/images/chat.png differ