diff --git a/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css b/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css
index 34491e9..2913fd8 100644
--- a/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css
+++ b/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css
@@ -1,6 +1,5 @@
 .inventory-items {
     grid-template-columns: repeat(6,minmax(0,1fr));
-    gap: 10px;
+    gap: 5px;
     display: grid;
-    width: 40%;
 }
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
index 8a84ed5..829b2cf 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
@@ -4,53 +4,48 @@
 @using myBlazorApp.Models;
 
 
-<div class="inventory">
-    <MyInventory/>
-</div>
-
-<div id="ItemList">
-    <div>
-        <h3>List of Items</h3>
-        @*SearchBar*@
-
-
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
-
 
+<div class="body">
+    <div class="inventory">
+        <MyInventory/>
     </div>
 
-    <div id="ItemList" class="align-end">
+    <div id="ItemList">
         <div>
-            <p>
-               List of items 
-            </p>
-            @*SearchBar*@
-
+            <h3>List of Items</h3>
+            @*SearchBar*@
+
         </div>
 
-        <DataGrid TItem="Item"
-              Data="@items"
-              ReadData="@OnReadData"
-              TotalItems="@totalItem"
-              PageSize="10"
-              ShowPager
-              Responsive>
-              <DataGridColumn TItem="Item" Field=""/>          
-              <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
-              <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
-                <DisplayTemplate>
-                    @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
+        <div id="ItemList" class="align-end">
+            <div>
+                <p>
+                   List of items 
+                </p>
+                @*SearchBar*@
+
+            </div>
+
+            <DataGrid TItem="Item"
+                  Data="@items"
+                  ReadData="@OnReadData"
+                  TotalItems="@totalItem"
+                  PageSize="10"
+                  ShowPager
+                  Responsive>
+                  <DataGridColumn TItem="Item" Field=""/>          
+                  <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+                  <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
+                    @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
                     {
-                        <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
+                        <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
                     }
                     else
                     {
                         <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
                     }
-                </DisplayTemplate>
-              </DataGridColumn>
-        </DataGrid>
+                  </DataGridColumn>
+            </DataGrid>
+        </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
index e9dae9e..39e3a98 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
@@ -4,6 +4,7 @@ using Blazored.Modal.Services;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using myBlazorApp.Factories;
 using myBlazorApp.Modals;
 using myBlazorApp.Models;
 using myBlazorApp.Services;
@@ -13,6 +14,15 @@ namespace myBlazorApp.Pages
 	public partial class Inventory
     {
 
+        [Parameter]
+        public int Id { get; set; }
+
+        private ItemModel itemModel = new()
+        {
+            EnchantCategories = new List<string>(),
+            RepairWith = new List<string>()
+        };
+
         private List<Item> items = new List<Item>();
 
         private int totalItem;
@@ -61,6 +71,21 @@ namespace myBlazorApp.Pages
             // Reload the page
             NavigationManager.NavigateTo("list", true);
         }
+
+        protected override async Task OnInitializedAsync()
+        {
+            var item = await DataService.GetById(Id);
+
+            var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");
+
+            if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
+            {
+                fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
+            }
+
+            // Set the model with the item
+            itemModel = ItemFactory.ToModel(item, fileContent);
+        }
 
     }
 }
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
index c3bcf2e..9411cb2 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
@@ -1,21 +1,17 @@
 .body {
     display: flex;
+    width: 100%;
 }
 
-.inventory-items {
-    grid-template-columns: repeat(6,minmax(0,1fr));
-    gap: 10px;
-    display: grid;
-    width: 40%;
-}
-
-.align-start {
+.inventory {
     align-items: flex-start;
-    justify-content: start
+    justify-content: start;
+    width: 35%;
+    margin-right: 20%;
 }
 
-.align-end { 
+.ItemList {
     align-content: flex-end;
     justify-content: end;
-    width: 400px;
+    width: 45%;
 }
\ No newline at end of file
diff --git a/myBlazorApp/myBlazorApp/Services/DataLocalService.cs b/myBlazorApp/myBlazorApp/Services/DataLocalService.cs
index 835852a..5c0e36f 100644
--- a/myBlazorApp/myBlazorApp/Services/DataLocalService.cs
+++ b/myBlazorApp/myBlazorApp/Services/DataLocalService.cs
@@ -34,7 +34,23 @@ namespace myBlazorApp.Services
             model.Id = currentData.Max(s => s.Id) + 1;
 
             /// Add the item to the current data
-            currentData.Add(ItemFactory.Create(model));
+            currentData.Add(ItemFactory.Create(model));
+
+            // Save the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+            // Check if the folder "images" exist
+            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);
@@ -89,7 +105,33 @@ namespace myBlazorApp.Services
             if (item == null)
             {
                 throw new Exception($"Unable to found the item with ID: {id}");
-            }
+            }
+
+            // Save the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+            // Check if the folder "images" exist
+            if (!imagePathInfo.Exists)
+            {
+                imagePathInfo.Create();
+            }
+
+            // Delete the previous image
+            if (item.Name != model.Name)
+            {
+                var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+                if (oldFileName.Exists)
+                {
+                    File.Delete(oldFileName.FullName);
+                }
+            }
+
+            // Determine the image name
+            var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+
+            // Write the file content
+            await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
 
             // Modify the content of the item
             ItemFactory.Update(item, model);
@@ -107,8 +149,16 @@ namespace myBlazorApp.Services
             var item = currentData.FirstOrDefault(w => w.Id == id);
 
             // Delete item in
-            currentData.Remove(item);
-
+            currentData.Remove(item);
+
+            // Delete the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+            var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+            if (fileName.Exists)
+            {
+                File.Delete(fileName.FullName);
+            }
 
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);